tango-app-ui-store-builder 1.2.8 → 1.2.9

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 (14) hide show
  1. package/esm2022/lib/components/manage-store-plano/manage-store-plano.component.mjs +3 -3
  2. package/esm2022/lib/components/onboard-store-plano/onboard-store-plano.component.mjs +3 -3
  3. package/esm2022/lib/components/planogram/plano-details-parent/plano-details-parent.component.mjs +8 -3
  4. package/esm2022/lib/components/planogram/plano-overview/plano-overview.component.mjs +13 -4
  5. package/esm2022/lib/components/planogram/plano-table/plano-table.component.mjs +5 -4
  6. package/esm2022/lib/interfaces/planogram.interface.mjs +1 -1
  7. package/fesm2022/tango-app-ui-store-builder.mjs +25 -11
  8. package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
  9. package/lib/components/manage-plano/rollout-table/rollout-table.component.d.ts +4 -4
  10. package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +6 -6
  11. package/lib/components/planogram/plano-details-parent/plano-details-parent.component.d.ts +2 -0
  12. package/lib/components/planogram/plano-overview/plano-overview.component.d.ts +1 -0
  13. package/lib/interfaces/planogram.interface.d.ts +1 -0
  14. package/package.json +1 -1
package/fesm2022/tango-app-ui-store-builder.mjs CHANGED
@@ -18745,11 +18745,11 @@ class ManageStorePlanoComponent {
18745
18745
  this.destroy$.complete();
18746
18746
  }
18747
18747
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
18748
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "bodyAccordion", first: true, predicate: ["bodyAccordion"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *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'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.lastUpdate}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n Top-right shows the final overall \"Publish\" once layout+fixture+vm are approved.\r\n When a zone task exists and isn't Approved yet, the button stays visible but\r\n disabled (so the store can't be published until zone verification completes).\r\n Legacy stores without a zone task are unblocked immediately. -->\r\n <ng-container *ngIf=\"showTopPublish\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\" [disabled]=\"topPublishDisabled\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594lay)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594lay\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n -->\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'fixture-redo' ? 'Publish Redo' : 'Publish Task' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594fix)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594fix\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <!--\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594vm)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594vm\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n -->\r\n\r\n <!-- Zone Verification -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3>Zone Verification</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"zoneTaskStyle.class\">\r\n <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n {{ zoneTaskStyle.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n Publish Task\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n Publish Redo\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594z)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594z\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\"\r\n style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"shouldRevertOnEdit\"\r\n [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n } -->\r\n\r\n <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n class=\"nav-link\" role=\"tab\">\r\n Fixture Verification\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n Zone Verification\r\n <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n {{ zonePendingCount }}\r\n </span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"feedback-tab-content\">\r\n <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n\r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\"\r\n [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}.fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}.fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "component", type: ZoneVerificationFeedbackComponent, selector: "lib-zone-verification-feedback", inputs: ["floorData", "feedbackDetails", "zoneTask", "zoneFeedback", "totalFixtures", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
18748
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "bodyAccordion", first: true, predicate: ["bodyAccordion"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *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'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n </div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n Top-right shows the final overall \"Publish\" once layout+fixture+vm are approved.\r\n When a zone task exists and isn't Approved yet, the button stays visible but\r\n disabled (so the store can't be published until zone verification completes).\r\n Legacy stores without a zone task are unblocked immediately. -->\r\n <ng-container *ngIf=\"showTopPublish\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\" [disabled]=\"topPublishDisabled\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594lay)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594lay\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n -->\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'fixture-redo' ? 'Publish Redo' : 'Publish Task' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594fix)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594fix\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <!--\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594vm)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594vm\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n -->\r\n\r\n <!-- Zone Verification -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3>Zone Verification</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"zoneTaskStyle.class\">\r\n <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n {{ zoneTaskStyle.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n Publish Task\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n Publish Redo\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594z)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594z\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\"\r\n style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"shouldRevertOnEdit\"\r\n [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n } -->\r\n\r\n <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n class=\"nav-link\" role=\"tab\">\r\n Fixture Verification\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n Zone Verification\r\n <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n {{ zonePendingCount }}\r\n </span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"feedback-tab-content\">\r\n <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n\r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\"\r\n [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}.fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}.fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "component", type: ZoneVerificationFeedbackComponent, selector: "lib-zone-verification-feedback", inputs: ["floorData", "feedbackDetails", "zoneTask", "zoneFeedback", "totalFixtures", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
18749
18749
  }
18750
18750
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, decorators: [{
18751
18751
  type: Component,
18752
- args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *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'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.lastUpdate}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n Top-right shows the final overall \"Publish\" once layout+fixture+vm are approved.\r\n When a zone task exists and isn't Approved yet, the button stays visible but\r\n disabled (so the store can't be published until zone verification completes).\r\n Legacy stores without a zone task are unblocked immediately. -->\r\n <ng-container *ngIf=\"showTopPublish\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\" [disabled]=\"topPublishDisabled\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594lay)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594lay\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n -->\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'fixture-redo' ? 'Publish Redo' : 'Publish Task' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594fix)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594fix\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <!--\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594vm)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594vm\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n -->\r\n\r\n <!-- Zone Verification -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3>Zone Verification</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"zoneTaskStyle.class\">\r\n <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n {{ zoneTaskStyle.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n Publish Task\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n Publish Redo\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594z)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594z\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\"\r\n style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"shouldRevertOnEdit\"\r\n [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n } -->\r\n\r\n <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n class=\"nav-link\" role=\"tab\">\r\n Fixture Verification\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n Zone Verification\r\n <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n {{ zonePendingCount }}\r\n </span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"feedback-tab-content\">\r\n <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n\r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\"\r\n [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}.fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}.fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}\n"] }]
18752
+ args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *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'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n </div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n Top-right shows the final overall \"Publish\" once layout+fixture+vm are approved.\r\n When a zone task exists and isn't Approved yet, the button stays visible but\r\n disabled (so the store can't be published until zone verification completes).\r\n Legacy stores without a zone task are unblocked immediately. -->\r\n <ng-container *ngIf=\"showTopPublish\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\" [disabled]=\"topPublishDisabled\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594lay)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594lay\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n -->\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'fixture-redo' ? 'Publish Redo' : 'Publish Task' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594fix)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594fix\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <!--\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n </button>\r\n <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594vm)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594vm\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n -->\r\n\r\n <!-- Zone Verification -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h3>Zone Verification</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"zoneTaskStyle.class\">\r\n <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n {{ zoneTaskStyle.name }}\r\n </div>\r\n </div>\r\n <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n Publish Task\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n Publish Redo\r\n </button>\r\n <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594z)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594z\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\"\r\n style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"shouldRevertOnEdit\"\r\n [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n [revertOnEdit]=\"shouldRevertOnEdit\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n } -->\r\n\r\n <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n class=\"nav-link\" role=\"tab\">\r\n Fixture Verification\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n Zone Verification\r\n <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n {{ zonePendingCount }}\r\n </span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"feedback-tab-content\">\r\n <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n\r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\"\r\n [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}.fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}.fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}\n"] }]
18753
18753
  }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
18754
18754
  type: ViewChild,
18755
18755
  args: ["baseCanvas"]
@@ -39567,11 +39567,11 @@ class PlanoTableComponent {
39567
39567
  this.planoSub?.unsubscribe();
39568
39568
  }
39569
39569
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoTableComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
39570
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoTableComponent, selector: "lib-plano-table", ngImport: i0, template: "<div class=\"content-wrapper\">\r\n <div>\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-2\">\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 <!-- Filter -->\r\n <plano-filter [clientId]=\"clientId\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"></plano-filter>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!planogramsList.length\">\r\n <!-- Export Icon -->\r\n <svg 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\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 && !planoList\">\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 planogram table</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 && planoList\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"302\" height=\"160\" viewBox=\"0 0 302 160\" fill=\"none\">\r\n <path d=\"M97.9023 54.0942C83.6389 54.0942 72.0762 65.657 72.0762 79.9204C72.0762 85.8363 68.0722 92.5806 62.1564 92.5806H39.3506C25.0871 92.5806 13.5234 104.143 13.5234 118.407C13.5234 132.67 25.0871 144.233 39.3506 144.233H177.449C194.339 144.233 210.412 131.067 227.302 131.067H293.337C298.091 131.067 301.945 127.213 301.945 122.458C301.945 117.704 298.091 113.849 293.337 113.849H205.717C204.072 113.849 202.68 112.627 202.212 111.051C201.473 108.561 203.174 105.747 205.771 105.747H236.001C250.264 105.747 261.827 94.1838 261.827 79.9204C261.827 65.657 250.264 54.0943 236.001 54.0942H97.9023Z\" fill=\"#EAECF0\"/>\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 240.694 55.9315)\" fill=\"#EAECF0\"/>\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 50.3906 120.357)\" fill=\"#6BCAFF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 239.058 75.9004)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 209.781 20.6014)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 98.0986 145.295)\" fill=\"#00A3FF\"/>\r\n <rect x=\"63.0869\" y=\"51.7187\" width=\"166.015\" height=\"96.9528\" rx=\"14.6093\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3.98436\"/>\r\n <mask id=\"path-8-inside-1_769_29740\" fill=\"white\">\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\"/>\r\n </mask>\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\" fill=\"#6BCAFF\"/>\r\n <path d=\"M87.2119 26.0743L87.212 22.09H87.2119V26.0743ZM89.9824 26.3165H93.9668V22.9762L90.6777 22.3933L89.9824 26.3165ZM89.9824 123.859L89.2872 127.782L93.9668 128.611V123.859H89.9824ZM87.2119 123.616L87.212 119.632H87.2119V123.616ZM61.0967 139.388H57.1123L65.081 139.388L61.0967 139.388ZM87.2119 26.0743L87.2119 30.0587C87.9241 30.0587 88.6173 30.121 89.2872 30.2398L89.9824 26.3165L90.6777 22.3933C89.5487 22.1932 88.3902 22.09 87.212 22.09L87.2119 26.0743ZM89.9824 26.3165H85.9981V123.859H89.9824H93.9668V26.3165H89.9824ZM89.9824 123.859L90.6777 119.935C89.5487 119.735 88.3902 119.632 87.212 119.632L87.2119 123.616L87.2119 127.601C87.924 127.601 88.6173 127.663 89.2872 127.782L89.9824 123.859ZM87.2119 123.616V119.632H76.8682V123.616V127.601H87.2119V123.616ZM76.8682 123.616V119.632C65.9574 119.632 57.1125 128.477 57.1123 139.388L61.0967 139.388L65.081 139.388C65.0811 132.878 70.3585 127.601 76.8682 127.601V123.616ZM61.0967 139.388H65.081V41.8458H61.0967H57.1123V139.388H61.0967ZM61.0967 41.8458H65.081C65.081 35.336 70.3583 30.0587 76.8682 30.0587V26.0743V22.09C65.9573 22.09 57.1123 30.935 57.1123 41.8458H61.0967ZM76.8682 26.0743V30.0587H87.2119V26.0743V22.09H76.8682V26.0743Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_769_29740)\"/>\r\n <line x1=\"71.0547\" y1=\"49.7267\" x2=\"71.0547\" y2=\"91.5625\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n <rect x=\"116.229\" y=\"104.642\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <rect x=\"116.229\" y=\"66.9762\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <circle cx=\"212.299\" cy=\"77.2505\" r=\"3.29663\" fill=\"white\"/>\r\n <circle cx=\"105.88\" cy=\"62.2407\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n <circle cx=\"93.4783\" cy=\"132.06\" r=\"3.44505\" fill=\"white\"/>\r\n <rect x=\"116.229\" y=\"37.5784\" width=\"63.389\" height=\"24.8044\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n </svg> \r\n <div class=\"nodatamaintext mt-3\">Planogram Yet to Publish</div>\r\n <div class=\"nodatasubtext\"><a href=\"manage/planogram/manage-planogram?planoId={{planoList?.[0]?.planoId}}&floorId={{planoList?.[0]?._id}}\">{{planoList?.[0]?.storeName}}</a> is still under verification</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 Planogram name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'storeName' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'storeName'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n <!-- <span (click)=\"onSortTable('country')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'country' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'country'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n Region\r\n <!-- <span (click)=\"onSortTable('city')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'city' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'city'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('updatedAt')\" class=\"cursor-pointer\">\r\n Last update\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'updatedAt' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'updatedAt'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('merchCompliance')\" class=\"cursor-pointer\">\r\n Merch Compliance\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'merchCompliance' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'merchCompliance'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\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 <a [routerLink]=\"['/manage/planogram/store-planogram']\" [queryParams]=\"{\r\n planoId: plano.planoId,\r\n floorId: plano._id,\r\n storeName:plano.storeName\r\n }\" class=\"text-decoration-underline\">\r\n {{plano.storeName}} <span *ngIf=\"plano.multipleFloor\">({{plano.floorName | titlecase}})</span> - Plano\r\n </a>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.country}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.city}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano.updatedAt}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano?.merchCompliance ?? 0}}</span>\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\">&#8226;</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 [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>", 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}#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)}}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}\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: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
39570
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoTableComponent, selector: "lib-plano-table", ngImport: i0, template: "<div class=\"content-wrapper\">\r\n <div>\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-2\">\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 <!-- Filter -->\r\n <plano-filter [clientId]=\"clientId\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"></plano-filter>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!planogramsList.length\">\r\n <!-- Export Icon -->\r\n <svg 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\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 && !planoList\">\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 planogram table</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 && planoList\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"302\" height=\"160\" viewBox=\"0 0 302 160\" fill=\"none\">\r\n <path d=\"M97.9023 54.0942C83.6389 54.0942 72.0762 65.657 72.0762 79.9204C72.0762 85.8363 68.0722 92.5806 62.1564 92.5806H39.3506C25.0871 92.5806 13.5234 104.143 13.5234 118.407C13.5234 132.67 25.0871 144.233 39.3506 144.233H177.449C194.339 144.233 210.412 131.067 227.302 131.067H293.337C298.091 131.067 301.945 127.213 301.945 122.458C301.945 117.704 298.091 113.849 293.337 113.849H205.717C204.072 113.849 202.68 112.627 202.212 111.051C201.473 108.561 203.174 105.747 205.771 105.747H236.001C250.264 105.747 261.827 94.1838 261.827 79.9204C261.827 65.657 250.264 54.0943 236.001 54.0942H97.9023Z\" fill=\"#EAECF0\"/>\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 240.694 55.9315)\" fill=\"#EAECF0\"/>\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 50.3906 120.357)\" fill=\"#6BCAFF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 239.058 75.9004)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 209.781 20.6014)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 98.0986 145.295)\" fill=\"#00A3FF\"/>\r\n <rect x=\"63.0869\" y=\"51.7187\" width=\"166.015\" height=\"96.9528\" rx=\"14.6093\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3.98436\"/>\r\n <mask id=\"path-8-inside-1_769_29740\" fill=\"white\">\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\"/>\r\n </mask>\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\" fill=\"#6BCAFF\"/>\r\n <path d=\"M87.2119 26.0743L87.212 22.09H87.2119V26.0743ZM89.9824 26.3165H93.9668V22.9762L90.6777 22.3933L89.9824 26.3165ZM89.9824 123.859L89.2872 127.782L93.9668 128.611V123.859H89.9824ZM87.2119 123.616L87.212 119.632H87.2119V123.616ZM61.0967 139.388H57.1123L65.081 139.388L61.0967 139.388ZM87.2119 26.0743L87.2119 30.0587C87.9241 30.0587 88.6173 30.121 89.2872 30.2398L89.9824 26.3165L90.6777 22.3933C89.5487 22.1932 88.3902 22.09 87.212 22.09L87.2119 26.0743ZM89.9824 26.3165H85.9981V123.859H89.9824H93.9668V26.3165H89.9824ZM89.9824 123.859L90.6777 119.935C89.5487 119.735 88.3902 119.632 87.212 119.632L87.2119 123.616L87.2119 127.601C87.924 127.601 88.6173 127.663 89.2872 127.782L89.9824 123.859ZM87.2119 123.616V119.632H76.8682V123.616V127.601H87.2119V123.616ZM76.8682 123.616V119.632C65.9574 119.632 57.1125 128.477 57.1123 139.388L61.0967 139.388L65.081 139.388C65.0811 132.878 70.3585 127.601 76.8682 127.601V123.616ZM61.0967 139.388H65.081V41.8458H61.0967H57.1123V139.388H61.0967ZM61.0967 41.8458H65.081C65.081 35.336 70.3583 30.0587 76.8682 30.0587V26.0743V22.09C65.9573 22.09 57.1123 30.935 57.1123 41.8458H61.0967ZM76.8682 26.0743V30.0587H87.2119V26.0743V22.09H76.8682V26.0743Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_769_29740)\"/>\r\n <line x1=\"71.0547\" y1=\"49.7267\" x2=\"71.0547\" y2=\"91.5625\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n <rect x=\"116.229\" y=\"104.642\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <rect x=\"116.229\" y=\"66.9762\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <circle cx=\"212.299\" cy=\"77.2505\" r=\"3.29663\" fill=\"white\"/>\r\n <circle cx=\"105.88\" cy=\"62.2407\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n <circle cx=\"93.4783\" cy=\"132.06\" r=\"3.44505\" fill=\"white\"/>\r\n <rect x=\"116.229\" y=\"37.5784\" width=\"63.389\" height=\"24.8044\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n </svg> \r\n <div class=\"nodatamaintext mt-3\">Planogram Yet to Publish</div>\r\n <div class=\"nodatasubtext\"><a href=\"manage/planogram/manage-planogram?planoId={{planoList?.[0]?.planoId}}&floorId={{planoList?.[0]?._id}}\">{{planoList?.[0]?.storeName}}</a> is still under verification</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 Planogram name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'storeName' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'storeName'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n <!-- <span (click)=\"onSortTable('country')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'country' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'country'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n Region\r\n <!-- <span (click)=\"onSortTable('city')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'city' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'city'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('createdAt')\" class=\"cursor-pointer\">\r\n Published at\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'createdAt' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'createdAt'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('merchCompliance')\" class=\"cursor-pointer\">\r\n Merch Compliance\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'merchCompliance' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'merchCompliance'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\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 <a [routerLink]=\"['/manage/planogram/store-planogram']\" [queryParams]=\"{\r\n planoId: plano.planoId,\r\n floorId: plano._id,\r\n storeName:plano.storeName\r\n }\" class=\"text-decoration-underline\">\r\n {{plano.storeName}} <span *ngIf=\"plano.multipleFloor\">({{plano.floorName | titlecase}})</span> - Plano\r\n </a>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.country}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.city}}</span>\r\n </td>\r\n <td>\r\n <span [ngbTooltip]=\"plano?.createdByName ? 'Published by ' + plano.createdByName : null\">\r\n {{ plano.createdAt | date:'dd MMM, yyyy' }}\r\n </span>\r\n </td>\r\n <td>\r\n <span>{{plano?.merchCompliance ?? 0}}</span>\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\">&#8226;</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 [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>", 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}#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)}}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}\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.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
39571
39571
  }
39572
39572
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoTableComponent, decorators: [{
39573
39573
  type: Component,
39574
- args: [{ selector: "lib-plano-table", template: "<div class=\"content-wrapper\">\r\n <div>\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-2\">\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 <!-- Filter -->\r\n <plano-filter [clientId]=\"clientId\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"></plano-filter>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!planogramsList.length\">\r\n <!-- Export Icon -->\r\n <svg 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\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 && !planoList\">\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 planogram table</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 && planoList\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"302\" height=\"160\" viewBox=\"0 0 302 160\" fill=\"none\">\r\n <path d=\"M97.9023 54.0942C83.6389 54.0942 72.0762 65.657 72.0762 79.9204C72.0762 85.8363 68.0722 92.5806 62.1564 92.5806H39.3506C25.0871 92.5806 13.5234 104.143 13.5234 118.407C13.5234 132.67 25.0871 144.233 39.3506 144.233H177.449C194.339 144.233 210.412 131.067 227.302 131.067H293.337C298.091 131.067 301.945 127.213 301.945 122.458C301.945 117.704 298.091 113.849 293.337 113.849H205.717C204.072 113.849 202.68 112.627 202.212 111.051C201.473 108.561 203.174 105.747 205.771 105.747H236.001C250.264 105.747 261.827 94.1838 261.827 79.9204C261.827 65.657 250.264 54.0943 236.001 54.0942H97.9023Z\" fill=\"#EAECF0\"/>\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 240.694 55.9315)\" fill=\"#EAECF0\"/>\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 50.3906 120.357)\" fill=\"#6BCAFF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 239.058 75.9004)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 209.781 20.6014)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 98.0986 145.295)\" fill=\"#00A3FF\"/>\r\n <rect x=\"63.0869\" y=\"51.7187\" width=\"166.015\" height=\"96.9528\" rx=\"14.6093\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3.98436\"/>\r\n <mask id=\"path-8-inside-1_769_29740\" fill=\"white\">\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\"/>\r\n </mask>\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\" fill=\"#6BCAFF\"/>\r\n <path d=\"M87.2119 26.0743L87.212 22.09H87.2119V26.0743ZM89.9824 26.3165H93.9668V22.9762L90.6777 22.3933L89.9824 26.3165ZM89.9824 123.859L89.2872 127.782L93.9668 128.611V123.859H89.9824ZM87.2119 123.616L87.212 119.632H87.2119V123.616ZM61.0967 139.388H57.1123L65.081 139.388L61.0967 139.388ZM87.2119 26.0743L87.2119 30.0587C87.9241 30.0587 88.6173 30.121 89.2872 30.2398L89.9824 26.3165L90.6777 22.3933C89.5487 22.1932 88.3902 22.09 87.212 22.09L87.2119 26.0743ZM89.9824 26.3165H85.9981V123.859H89.9824H93.9668V26.3165H89.9824ZM89.9824 123.859L90.6777 119.935C89.5487 119.735 88.3902 119.632 87.212 119.632L87.2119 123.616L87.2119 127.601C87.924 127.601 88.6173 127.663 89.2872 127.782L89.9824 123.859ZM87.2119 123.616V119.632H76.8682V123.616V127.601H87.2119V123.616ZM76.8682 123.616V119.632C65.9574 119.632 57.1125 128.477 57.1123 139.388L61.0967 139.388L65.081 139.388C65.0811 132.878 70.3585 127.601 76.8682 127.601V123.616ZM61.0967 139.388H65.081V41.8458H61.0967H57.1123V139.388H61.0967ZM61.0967 41.8458H65.081C65.081 35.336 70.3583 30.0587 76.8682 30.0587V26.0743V22.09C65.9573 22.09 57.1123 30.935 57.1123 41.8458H61.0967ZM76.8682 26.0743V30.0587H87.2119V26.0743V22.09H76.8682V26.0743Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_769_29740)\"/>\r\n <line x1=\"71.0547\" y1=\"49.7267\" x2=\"71.0547\" y2=\"91.5625\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n <rect x=\"116.229\" y=\"104.642\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <rect x=\"116.229\" y=\"66.9762\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <circle cx=\"212.299\" cy=\"77.2505\" r=\"3.29663\" fill=\"white\"/>\r\n <circle cx=\"105.88\" cy=\"62.2407\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n <circle cx=\"93.4783\" cy=\"132.06\" r=\"3.44505\" fill=\"white\"/>\r\n <rect x=\"116.229\" y=\"37.5784\" width=\"63.389\" height=\"24.8044\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n </svg> \r\n <div class=\"nodatamaintext mt-3\">Planogram Yet to Publish</div>\r\n <div class=\"nodatasubtext\"><a href=\"manage/planogram/manage-planogram?planoId={{planoList?.[0]?.planoId}}&floorId={{planoList?.[0]?._id}}\">{{planoList?.[0]?.storeName}}</a> is still under verification</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 Planogram name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'storeName' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'storeName'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n <!-- <span (click)=\"onSortTable('country')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'country' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'country'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n Region\r\n <!-- <span (click)=\"onSortTable('city')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'city' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'city'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('updatedAt')\" class=\"cursor-pointer\">\r\n Last update\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'updatedAt' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'updatedAt'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('merchCompliance')\" class=\"cursor-pointer\">\r\n Merch Compliance\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'merchCompliance' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'merchCompliance'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\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 <a [routerLink]=\"['/manage/planogram/store-planogram']\" [queryParams]=\"{\r\n planoId: plano.planoId,\r\n floorId: plano._id,\r\n storeName:plano.storeName\r\n }\" class=\"text-decoration-underline\">\r\n {{plano.storeName}} <span *ngIf=\"plano.multipleFloor\">({{plano.floorName | titlecase}})</span> - Plano\r\n </a>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.country}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.city}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano.updatedAt}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano?.merchCompliance ?? 0}}</span>\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\">&#8226;</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 [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>", 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}#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)}}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}\n"] }]
39574
+ args: [{ selector: "lib-plano-table", template: "<div class=\"content-wrapper\">\r\n <div>\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-2\">\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 <!-- Filter -->\r\n <plano-filter [clientId]=\"clientId\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"></plano-filter>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!planogramsList.length\">\r\n <!-- Export Icon -->\r\n <svg 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\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 && !planoList\">\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 planogram table</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 && planoList\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"302\" height=\"160\" viewBox=\"0 0 302 160\" fill=\"none\">\r\n <path d=\"M97.9023 54.0942C83.6389 54.0942 72.0762 65.657 72.0762 79.9204C72.0762 85.8363 68.0722 92.5806 62.1564 92.5806H39.3506C25.0871 92.5806 13.5234 104.143 13.5234 118.407C13.5234 132.67 25.0871 144.233 39.3506 144.233H177.449C194.339 144.233 210.412 131.067 227.302 131.067H293.337C298.091 131.067 301.945 127.213 301.945 122.458C301.945 117.704 298.091 113.849 293.337 113.849H205.717C204.072 113.849 202.68 112.627 202.212 111.051C201.473 108.561 203.174 105.747 205.771 105.747H236.001C250.264 105.747 261.827 94.1838 261.827 79.9204C261.827 65.657 250.264 54.0943 236.001 54.0942H97.9023Z\" fill=\"#EAECF0\"/>\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 240.694 55.9315)\" fill=\"#EAECF0\"/>\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 50.3906 120.357)\" fill=\"#6BCAFF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 239.058 75.9004)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 209.781 20.6014)\" fill=\"#00A3FF\"/>\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 98.0986 145.295)\" fill=\"#00A3FF\"/>\r\n <rect x=\"63.0869\" y=\"51.7187\" width=\"166.015\" height=\"96.9528\" rx=\"14.6093\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3.98436\"/>\r\n <mask id=\"path-8-inside-1_769_29740\" fill=\"white\">\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\"/>\r\n </mask>\r\n <path d=\"M87.2119 26.0743C88.1571 26.0744 89.083 26.1571 89.9824 26.3165V123.859C89.083 123.699 88.1571 123.616 87.2119 123.616H76.8682C68.1579 123.616 61.0968 130.678 61.0967 139.388V41.8458C61.0967 33.1355 68.1578 26.0743 76.8682 26.0743H87.2119Z\" fill=\"#6BCAFF\"/>\r\n <path d=\"M87.2119 26.0743L87.212 22.09H87.2119V26.0743ZM89.9824 26.3165H93.9668V22.9762L90.6777 22.3933L89.9824 26.3165ZM89.9824 123.859L89.2872 127.782L93.9668 128.611V123.859H89.9824ZM87.2119 123.616L87.212 119.632H87.2119V123.616ZM61.0967 139.388H57.1123L65.081 139.388L61.0967 139.388ZM87.2119 26.0743L87.2119 30.0587C87.9241 30.0587 88.6173 30.121 89.2872 30.2398L89.9824 26.3165L90.6777 22.3933C89.5487 22.1932 88.3902 22.09 87.212 22.09L87.2119 26.0743ZM89.9824 26.3165H85.9981V123.859H89.9824H93.9668V26.3165H89.9824ZM89.9824 123.859L90.6777 119.935C89.5487 119.735 88.3902 119.632 87.212 119.632L87.2119 123.616L87.2119 127.601C87.924 127.601 88.6173 127.663 89.2872 127.782L89.9824 123.859ZM87.2119 123.616V119.632H76.8682V123.616V127.601H87.2119V123.616ZM76.8682 123.616V119.632C65.9574 119.632 57.1125 128.477 57.1123 139.388L61.0967 139.388L65.081 139.388C65.0811 132.878 70.3585 127.601 76.8682 127.601V123.616ZM61.0967 139.388H65.081V41.8458H61.0967H57.1123V139.388H61.0967ZM61.0967 41.8458H65.081C65.081 35.336 70.3583 30.0587 76.8682 30.0587V26.0743V22.09C65.9573 22.09 57.1123 30.935 57.1123 41.8458H61.0967ZM76.8682 26.0743V30.0587H87.2119V26.0743V22.09H76.8682V26.0743Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_769_29740)\"/>\r\n <line x1=\"71.0547\" y1=\"49.7267\" x2=\"71.0547\" y2=\"91.5625\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n <rect x=\"116.229\" y=\"104.642\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <rect x=\"116.229\" y=\"66.9762\" width=\"63.389\" height=\"32.1538\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n <circle cx=\"212.299\" cy=\"77.2505\" r=\"3.29663\" fill=\"white\"/>\r\n <circle cx=\"105.88\" cy=\"62.2407\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n <circle cx=\"93.4783\" cy=\"132.06\" r=\"3.44505\" fill=\"white\"/>\r\n <rect x=\"116.229\" y=\"37.5784\" width=\"63.389\" height=\"24.8044\" rx=\"7.34945\" fill=\"#99DAFF\"/>\r\n </svg> \r\n <div class=\"nodatamaintext mt-3\">Planogram Yet to Publish</div>\r\n <div class=\"nodatasubtext\"><a href=\"manage/planogram/manage-planogram?planoId={{planoList?.[0]?.planoId}}&floorId={{planoList?.[0]?._id}}\">{{planoList?.[0]?.storeName}}</a> is still under verification</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 Planogram name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'storeName' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'storeName'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n <!-- <span (click)=\"onSortTable('country')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'country' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'country'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n Region\r\n <!-- <span (click)=\"onSortTable('city')\" class=\"cursor-pointer\">\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'city' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'city'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span> -->\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('createdAt')\" class=\"cursor-pointer\">\r\n Published at\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'createdAt' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'createdAt'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('merchCompliance')\" class=\"cursor-pointer\">\r\n Merch Compliance\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{\r\n color: sortedColumn === 'merchCompliance' ? '#009BF3' : ''\r\n }\" [ngClass]=\"\r\n sortOrder === 1 && sortedColumn === 'merchCompliance'\r\n ? 'fa-arrow-up'\r\n : 'fa-arrow-down'\r\n \" aria-hidden=\"true\"></i>\r\n </span>\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 <a [routerLink]=\"['/manage/planogram/store-planogram']\" [queryParams]=\"{\r\n planoId: plano.planoId,\r\n floorId: plano._id,\r\n storeName:plano.storeName\r\n }\" class=\"text-decoration-underline\">\r\n {{plano.storeName}} <span *ngIf=\"plano.multipleFloor\">({{plano.floorName | titlecase}})</span> - Plano\r\n </a>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.country}}</span>\r\n </td>\r\n <td>\r\n <span>{{plano?.storeInfo?.city}}</span>\r\n </td>\r\n <td>\r\n <span [ngbTooltip]=\"plano?.createdByName ? 'Published by ' + plano.createdByName : null\">\r\n {{ plano.createdAt | date:'dd MMM, yyyy' }}\r\n </span>\r\n </td>\r\n <td>\r\n <span>{{plano?.merchCompliance ?? 0}}</span>\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\">&#8226;</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 [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>", 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}#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)}}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}\n"] }]
39575
39575
  }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
39576
39576
 
39577
39577
  class ToolsParentComponent {
@@ -45264,7 +45264,9 @@ class PlanoOverviewComponent {
45264
45264
  });
45265
45265
  }
45266
45266
  async renderFloor() {
45267
- this.canvas?.clear();
45267
+ if (!this.canvas)
45268
+ return;
45269
+ this.canvas.clear();
45268
45270
  await this.drawLayoutElements();
45269
45271
  setTimeout(() => {
45270
45272
  this.resizeCanvas();
@@ -46513,6 +46515,8 @@ class PlanoOverviewComponent {
46513
46515
  res.data?.[this.currentSelect]?._id ?? "";
46514
46516
  this.latestFloorData["createdAt"] =
46515
46517
  res.data?.[this.currentSelect]?.createdAt ?? "";
46518
+ this.latestFloorData["createdByName"] =
46519
+ res.data?.[this.currentSelect]?.createdByName ?? "";
46516
46520
  }
46517
46521
  this.previousFloorData = res.data[this.previousSelect]?.floorData;
46518
46522
  if (this.previousFloorData) {
@@ -46520,6 +46524,8 @@ class PlanoOverviewComponent {
46520
46524
  res.data?.[this.previousSelect]?._id ?? "";
46521
46525
  this.previousFloorData["createdAt"] =
46522
46526
  res.data?.[this.previousSelect]?.createdAt ?? "";
46527
+ this.previousFloorData["createdByName"] =
46528
+ res.data?.[this.previousSelect]?.createdByName ?? "";
46523
46529
  }
46524
46530
  this.previousRenderKey = true;
46525
46531
  this.latestRenderKey = true;
@@ -46550,6 +46556,7 @@ class PlanoOverviewComponent {
46550
46556
  this.currentRevisionInfo.emit({
46551
46557
  totalFixtures: allFixtures.length,
46552
46558
  lastUpdated: active.createdAt ?? active.floorData?.lastUpdate ?? '',
46559
+ publishedBy: active.createdByName ?? '',
46553
46560
  requiresRefetch,
46554
46561
  });
46555
46562
  }
@@ -46562,6 +46569,7 @@ class PlanoOverviewComponent {
46562
46569
  this.previousFloorData = revision.floorData;
46563
46570
  this.previousFloorData.revisionId = revision._id;
46564
46571
  this.previousFloorData.createdAt = revision.createdAt;
46572
+ this.previousFloorData.createdByName = revision.createdByName;
46565
46573
  this.previousRenderKey = true;
46566
46574
  this.previousFloorData.floorChange = true;
46567
46575
  }
@@ -46570,6 +46578,7 @@ class PlanoOverviewComponent {
46570
46578
  this.latestFloorData = revision.floorData;
46571
46579
  this.latestFloorData.revisionId = revision._id;
46572
46580
  this.latestFloorData.createdAt = revision.createdAt;
46581
+ this.latestFloorData.createdByName = revision.createdByName;
46573
46582
  this.latestRenderKey = true;
46574
46583
  this.latestFloorData.floorChange = true;
46575
46584
  }
@@ -46802,11 +46811,11 @@ class PlanoOverviewComponent {
46802
46811
  }, () => { });
46803
46812
  }
46804
46813
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoOverviewComponent, deps: [{ token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i5.DatePipe }, { token: StoreBuilderService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
46805
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoOverviewComponent, selector: "plano-overview", inputs: { floorData: "floorData" }, outputs: { currentRevisionInfo: "currentRevisionInfo" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe, DatePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 <div id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\">Published: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}</span>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\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 <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published: {{ (previousFloorData?.createdAt || previousFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published: {{ (latestFloorData?.createdAt || latestFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\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 <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: ["#plano-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PlanoComparisonComponent, selector: "lib-plano-comparison", inputs: ["floorData", "totalFixtures"] }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: FixtureOverviewComponent, selector: "fixture-overview", inputs: ["fixtureDetails", "totalFixtures", "revisionId"], outputs: ["onClose", "changeFixture"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
46814
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoOverviewComponent, selector: "plano-overview", inputs: { floorData: "floorData" }, outputs: { currentRevisionInfo: "currentRevisionInfo" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe, DatePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 <div id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\"\r\n [ngbTooltip]=\"floorData?.createdByName ? 'Published by ' + floorData.createdByName : null\">\r\n Published at: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\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 <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published at: {{ previousFloorData?.createdAt | date:\"d MMM yyyy, hh:mm a\" }}<span *ngIf=\"previousFloorData?.createdByName\"> by {{ previousFloorData.createdByName }}</span>\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published at: {{ latestFloorData?.createdAt | date:\"d MMM yyyy, hh:mm a\" }}<span *ngIf=\"latestFloorData?.createdByName\"> by {{ latestFloorData.createdByName }}</span>\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\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 <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: ["#plano-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: PlanoComparisonComponent, selector: "lib-plano-comparison", inputs: ["floorData", "totalFixtures"] }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: FixtureOverviewComponent, selector: "fixture-overview", inputs: ["fixtureDetails", "totalFixtures", "revisionId"], outputs: ["onClose", "changeFixture"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
46806
46815
  }
46807
46816
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoOverviewComponent, decorators: [{
46808
46817
  type: Component,
46809
- args: [{ selector: "plano-overview", providers: [TitleCasePipe, DatePipe], template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 <div id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\">Published: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}</span>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\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 <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published: {{ (previousFloorData?.createdAt || previousFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published: {{ (latestFloorData?.createdAt || latestFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\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 <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: ["#plano-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\n"] }]
46818
+ args: [{ selector: "plano-overview", providers: [TitleCasePipe, DatePipe], template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 <div id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\"\r\n [ngbTooltip]=\"floorData?.createdByName ? 'Published by ' + floorData.createdByName : null\">\r\n Published at: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\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 <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published at: {{ previousFloorData?.createdAt | date:\"d MMM yyyy, hh:mm a\" }}<span *ngIf=\"previousFloorData?.createdByName\"> by {{ previousFloorData.createdByName }}</span>\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published at: {{ latestFloorData?.createdAt | date:\"d MMM yyyy, hh:mm a\" }}<span *ngIf=\"latestFloorData?.createdByName\"> by {{ latestFloorData.createdByName }}</span>\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n 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\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" 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)\"\r\n 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=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\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 <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: ["#plano-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\n"] }]
46810
46819
  }], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i5.DatePipe }, { type: StoreBuilderService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i4.ToastService }], propDecorators: { floorData: [{
46811
46820
  type: Input
46812
46821
  }], currentRevisionInfo: [{
@@ -49237,6 +49246,7 @@ class PlanoDetailsParentComponent {
49237
49246
  floorId: "",
49238
49247
  totalFixtures: 0,
49239
49248
  floorLastUpdated: "",
49249
+ floorPublishedBy: "",
49240
49250
  planoStatus: "",
49241
49251
  merchCompliancePercentage: 0,
49242
49252
  lastMerchCompliancePercentage: 0,
@@ -49296,6 +49306,7 @@ class PlanoDetailsParentComponent {
49296
49306
  this.floorData.storeName = this.planoData.storeName;
49297
49307
  this.floorData.floorChange = true;
49298
49308
  this.planoBriefDetails.floorLastUpdated = this.floorData.createdAt ?? this.floorData.lastUpdate;
49309
+ this.planoBriefDetails.floorPublishedBy = this.floorData.createdByName ?? "";
49299
49310
  this.planoBriefDetails.floorId = this.floorData._id;
49300
49311
  const newParams = new URLSearchParams(window.location.search);
49301
49312
  newParams.set("planoId", this.floorData.planoId);
@@ -49357,6 +49368,7 @@ class PlanoDetailsParentComponent {
49357
49368
  this.floorData.storeId = this.planoData.storeId;
49358
49369
  // this.floorData.revisionId = this.planoData.revisionId;
49359
49370
  this.planoBriefDetails.floorLastUpdated = this.floorData.createdAt ?? this.floorData.lastUpdate;
49371
+ this.planoBriefDetails.floorPublishedBy = this.floorData.createdByName ?? "";
49360
49372
  this.planoBriefDetails.totalFixtures = this.getAllFixtures().length;
49361
49373
  this.selectedFloorId.setValue(this.floorData._id, {
49362
49374
  emitEvent: false,
@@ -49446,6 +49458,7 @@ class PlanoDetailsParentComponent {
49446
49458
  onRevisionInfoChange(info) {
49447
49459
  this.planoBriefDetails.totalFixtures = info.totalFixtures;
49448
49460
  this.planoBriefDetails.floorLastUpdated = info.lastUpdated;
49461
+ this.planoBriefDetails.floorPublishedBy = info.publishedBy ?? "";
49449
49462
  if (info.requiresRefetch) {
49450
49463
  this.getStoreFixtures();
49451
49464
  }
@@ -49537,6 +49550,7 @@ class PlanoDetailsParentComponent {
49537
49550
  floorId: "",
49538
49551
  totalFixtures: 0,
49539
49552
  floorLastUpdated: "",
49553
+ floorPublishedBy: "",
49540
49554
  planoStatus: "",
49541
49555
  merchCompliancePercentage: 0,
49542
49556
  lastMerchCompliancePercentage: 0,
@@ -49558,11 +49572,11 @@ class PlanoDetailsParentComponent {
49558
49572
  this.getStoreFixtures(event._id);
49559
49573
  }
49560
49574
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoDetailsParentComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i5.Location }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
49561
- 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: MerchComplianceComponent, selector: "merch-compliance", inputs: ["floorData"] }, { kind: "component", type: PlanoOverviewComponent, selector: "plano-overview", inputs: ["floorData"], outputs: ["currentRevisionInfo"] }, { kind: "component", type: PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: ["floorData"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
49575
+ 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>Published at:</p>\r\n <p [ngbTooltip]=\"planoBriefDetails.floorPublishedBy ? 'Published by ' + planoBriefDetails.floorPublishedBy : null\">\r\n {{ planoBriefDetails.floorLastUpdated | date:\"d MMM yyyy, hh:mm a\" }}\r\n </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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: MerchComplianceComponent, selector: "merch-compliance", inputs: ["floorData"] }, { kind: "component", type: PlanoOverviewComponent, selector: "plano-overview", inputs: ["floorData"], outputs: ["currentRevisionInfo"] }, { kind: "component", type: PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: ["floorData"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
49562
49576
  }
49563
49577
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoDetailsParentComponent, decorators: [{
49564
49578
  type: Component,
49565
- args: [{ selector: "lib-plano-details-parent", 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"] }]
49579
+ args: [{ selector: "lib-plano-details-parent", 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>Published at:</p>\r\n <p [ngbTooltip]=\"planoBriefDetails.floorPublishedBy ? 'Published by ' + planoBriefDetails.floorPublishedBy : null\">\r\n {{ planoBriefDetails.floorLastUpdated | date:\"d MMM yyyy, hh:mm a\" }}\r\n </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"] }]
49566
49580
  }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i5.Location }, { type: i2$1.PageInfoService }] });
49567
49581
 
49568
49582
  class CollectionUpdateAiComponent {
@@ -64949,11 +64963,11 @@ class OnboardStorePlanoComponent {
64949
64963
  this.destroy$.complete();
64950
64964
  }
64951
64965
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
64952
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }, { propertyName: "bodyAccordion", first: true, predicate: ["bodyAccordion"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\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_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\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) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n style=\"min-width: 130px;\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button type=\"button\"\r\n style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n clicking compacts the layout and drops the user into edit\r\n mode so the change is revertable via Cancel and persistable\r\n via Save / Submit. -->\r\n @if(canShowCompactToggle && layoutForm.disabled){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n (click)=\"compactLayout()\"\r\n ngbTooltip=\"Compact layout.\"\r\n container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n </svg>\r\n </button>\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <span\r\n [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n container=\"body\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap\"\r\n [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n </span>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n [libraryCategories]=\"libraryCategories\"\r\n [libraryByCategory]=\"libraryByCategory\"\r\n [allowCategoryAndWidthEdit]=\"true\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n @if(hasInvalidFixtures) {\r\n <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"flex-shrink: 0; margin-top: 1px;\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n @if(hasInvalidHeaderFixtures) {\r\n <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n }\r\n @if(hasInvalidLibraryFixtures) {\r\n <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n }\r\n These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n </p>\r\n </div>\r\n }\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
64966
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }, { propertyName: "bodyAccordion", first: true, predicate: ["bodyAccordion"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n </div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\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_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\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) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n style=\"min-width: 130px;\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button type=\"button\"\r\n style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n clicking compacts the layout and drops the user into edit\r\n mode so the change is revertable via Cancel and persistable\r\n via Save / Submit. -->\r\n @if(canShowCompactToggle && layoutForm.disabled){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n (click)=\"compactLayout()\"\r\n ngbTooltip=\"Compact layout.\"\r\n container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n </svg>\r\n </button>\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <span\r\n [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n container=\"body\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap\"\r\n [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n </span>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n [libraryCategories]=\"libraryCategories\"\r\n [libraryByCategory]=\"libraryByCategory\"\r\n [allowCategoryAndWidthEdit]=\"true\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n @if(hasInvalidFixtures) {\r\n <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"flex-shrink: 0; margin-top: 1px;\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n @if(hasInvalidHeaderFixtures) {\r\n <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n }\r\n @if(hasInvalidLibraryFixtures) {\r\n <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n }\r\n These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n </p>\r\n </div>\r\n }\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
64953
64967
  }
64954
64968
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, decorators: [{
64955
64969
  type: Component,
64956
- args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\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_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\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) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n style=\"min-width: 130px;\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button type=\"button\"\r\n style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n clicking compacts the layout and drops the user into edit\r\n mode so the change is revertable via Cancel and persistable\r\n via Save / Submit. -->\r\n @if(canShowCompactToggle && layoutForm.disabled){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n (click)=\"compactLayout()\"\r\n ngbTooltip=\"Compact layout.\"\r\n container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n </svg>\r\n </button>\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <span\r\n [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n container=\"body\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap\"\r\n [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n </span>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n [libraryCategories]=\"libraryCategories\"\r\n [libraryByCategory]=\"libraryByCategory\"\r\n [allowCategoryAndWidthEdit]=\"true\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n @if(hasInvalidFixtures) {\r\n <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"flex-shrink: 0; margin-top: 1px;\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n @if(hasInvalidHeaderFixtures) {\r\n <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n }\r\n @if(hasInvalidLibraryFixtures) {\r\n <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n }\r\n These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n </p>\r\n </div>\r\n }\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
64970
+ args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\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-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\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 style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n </div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\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_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\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) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5 fixture-row\"\r\n [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n style=\"min-width: 130px;\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button type=\"button\"\r\n style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n clicking compacts the layout and drops the user into edit\r\n mode so the change is revertable via Cancel and persistable\r\n via Save / Submit. -->\r\n @if(canShowCompactToggle && layoutForm.disabled){\r\n <button type=\"button\"\r\n class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n (click)=\"compactLayout()\"\r\n ngbTooltip=\"Compact layout.\"\r\n container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n </svg>\r\n </button>\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <span\r\n [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n container=\"body\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap\"\r\n [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n </span>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n [libraryCategories]=\"libraryCategories\"\r\n [libraryByCategory]=\"libraryByCategory\"\r\n [allowCategoryAndWidthEdit]=\"true\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\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\">\r\n <div class=\"shimmer rounded\">\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 class=\"stroke animate description\"></div>\r\n <br />\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 <br />\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 <br />\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 <br />\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</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n @if(hasInvalidFixtures) {\r\n <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"flex-shrink: 0; margin-top: 1px;\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n @if(hasInvalidHeaderFixtures) {\r\n <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n }\r\n @if(hasInvalidLibraryFixtures) {\r\n <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n }\r\n These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n </p>\r\n </div>\r\n }\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *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 </button>\r\n </div>\r\n </div>\r\n</ng-template>", 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}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
64957
64971
  }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
64958
64972
  type: ViewChild,
64959
64973
  args: ["baseCanvas"]