npm - tango-app-ui-store-builder - Versions diffs - 1.0.45 → 1.0.46 - Mend

tango-app-ui-store-builder 1.0.45 → 1.0.46

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 (8) hide show

package/fesm2022/tango-app-ui-store-builder.mjs CHANGED Viewed

@@ -6675,8 +6675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class LayoutEditConfirmationComponent {
     activeModal;
-    title = "Submit Layout";
-    description = "Are you sure you want to edit the layout? Editing the layout will reset all your verification progress.";
+    title = "Save Layout";
+    description = "Are you sure you want to save the layout changes? Editing the layout will reset all your verification progress.";
     constructor(activeModal) {
         this.activeModal = activeModal;
     }
@@ -11581,11 +11581,11 @@ class ManageStorePlanoComponent {
     otherElementsSubscriptions = [];
     planoData;
     floorData;
-    originalFloorData; //used to rollback to original layout state on click cancel while editing.
+    originalFloorData; // used to rollback to original layout state on click cancel while editing.
     cdnUrl;
     fixtureTemplates = [];
     allFixtures = []; // all fixtures including the master templates for tree view
-    allFixtureInstances = []; //only the layout fixtures instances.
+    allFixtureInstances = []; // only the layout fixtures instances.
     storeFeedback;
     selectedFixture;
     selectedFixtureData;
@@ -11853,30 +11853,6 @@ class ManageStorePlanoComponent {
             },
         ]);
     }
-    // async getVmsList() {
-    //   try {
-    //     const res: any = await firstValueFrom(
-    //       this.apiService.getVMNameList(this.clientId),
-    //     );
-    //     if (res?.status === "success") {
-    //       this.vmList = res?.data?.map((item: any) => {
-    //         return {
-    //           id: item._id,
-    //           name: item.vmName,
-    //           displayName: item.vmName,
-    //           width: item.vmWidth.value,
-    //           height: item.vmHeight.value,
-    //           type: item.vmType,
-    //           ...(item.vmImageUrl
-    //             ? { imgUrl: `${this.cdnUrl}${item.vmImageUrl}` }
-    //             : {}),
-    //         };
-    //       });
-    //     }
-    //   } catch (error) {
-    //     console.log("@@ ~ getVmsList [ERR]:", error);
-    //   }
-    // }
     onFixtureSave() {
         this.submitFixture = true;
         // this.selectedFixtureData.taskType = this.publishingState;
@@ -12309,7 +12285,6 @@ class ManageStorePlanoComponent {
     getElementValue(group) {
         return group.get("elementNumber")?.value;
     }
-    // Helper: get wall meta by element number (1-based)
     getWallByNumber(elementNumber) {
         return this.floorData?.layoutPolygon?.find((w) => w.elementType === "wall" && w.elementNumber === elementNumber);
     }
@@ -12352,7 +12327,6 @@ class ManageStorePlanoComponent {
                 }
                 catch { }
                 this.renderFloor();
-                // this.selectFixtureFeedback();
                 this.isPageLoading = false;
                 if (enable) {
                     this.layoutForm?.disable({ emitEvent: false });
@@ -12528,7 +12502,6 @@ class ManageStorePlanoComponent {
     async drawLayoutElements() {
         for (let index = 0; index < this.floorData.layoutPolygon.length; index++) {
             const element = this.floorData.layoutPolygon[index];
-            let wall;
             element.relativePosition ??= {
                 x: 0,
                 y: 0,
@@ -12541,7 +12514,7 @@ class ManageStorePlanoComponent {
                 let width = this.toPixels(element.distance, element.unit);
                 if (width < height)
                     width = this.wallThickness + 1;
-                wall = await this.drawWall(this.canvas, x, y, height, width, element);
+                await this.drawWall(this.canvas, x, y, height, width, element);
             }
             else if (element.elementType === "entrance") {
                 const arrowWidth = 80;
@@ -12568,18 +12541,14 @@ class ManageStorePlanoComponent {
                     const baseX = this.toPixels(element.relativePosition.x, element.relativePosition.unit);
                     const baseY = this.toPixels(element.relativePosition.y, element.relativePosition.unit);
                     const startBuffer = 40;
-                    const spacing = 136; // fixture width + gap (px)
+                    const spacing = 136;
                     const offset = startBuffer + spacing * j;
-                    // wall angle in radians
                     const angleRad = fabric.util.degreesToRadians(element.angle);
-                    // ---- direction vector (along the wall) ----
                     const dirX = Math.cos(angleRad);
                     const dirY = Math.sin(angleRad);
-                    // ---- normal vector (push fixtures inside wall) ----
-                    const normalOffset = this.wallThickness; // tweak if needed
+                    const normalOffset = this.wallThickness;
                     const normX = Math.cos(angleRad + Math.PI / 2) * normalOffset;
                     const normY = Math.sin(angleRad + Math.PI / 2) * normalOffset;
-                    // ---- final fixture position ----
                     x = baseX + dirX * offset + normX;
                     y = baseY + dirY * offset + normY;
                 }
@@ -12596,26 +12565,78 @@ class ManageStorePlanoComponent {
                 this.drawOtherElementsWithLabel(this.canvas, x, y, a, w, h, otherElement);
             }
         }
-        // ---- PREPARE FLOOR FIXTURE POSITIONS (CAD ONLY) ----
         if (this.floorData?.cadLayout && this.floorData?.centerFixture?.length) {
-            const tempOccupied = [];
-            for (const fixture of this.floorData.centerFixture) {
-                const fixtureWidthPx = this.toPixels(fixture.fixtureStaticWidth.value, fixture.fixtureStaticWidth.unit);
-                const fixtureHeightPx = this.toPixels(fixture.fixtureStaticLength.value, fixture.fixtureStaticLength.unit);
-                const spot = this.findEmptyCenterSpot(fixtureWidthPx, fixtureHeightPx, tempOccupied);
-                if (spot) {
-                    // store position back into fixture data (same as user-add flow)
-                    fixture.relativePosition.x = this.fromPixels(spot.x, "ft");
-                    fixture.relativePosition.y = this.fromPixels(spot.y, "ft");
-                    // mark this area as occupied for next fixtures
-                    tempOccupied.push({
-                        x: spot.x,
-                        y: spot.y,
-                        width: fixtureWidthPx,
-                        height: fixtureHeightPx,
-                    });
+            const fixtures = this.floorData.centerFixture;
+            // Layout polygon (your existing method)
+            const layoutPolygon = this.buildLayoutPolygonFromWalls();
+            // Occupied areas (ALL objects)
+            const occupiedRects = this.getOccupiedRects();
+            // Fixture size
+            const fixtureWidthPx = this.toPixels(fixtures[0].fixtureStaticWidth.value, fixtures[0].fixtureStaticWidth.unit);
+            const fixtureHeightPx = this.toPixels(fixtures[0].fixtureStaticLength.value, fixtures[0].fixtureStaticLength.unit);
+            // Grid shape (wide bias if you want)
+            const total = fixtures.length;
+            const maxRows = 2; // you can tweak
+            const rows = Math.min(maxRows, total);
+            const columns = Math.ceil(total / rows);
+            const gridWidth = columns * fixtureWidthPx;
+            const gridHeight = rows * fixtureHeightPx;
+            // Layout bounds
+            const bounds = this.getFullLayoutBounds();
+            const centerX = bounds.left + bounds.width / 2;
+            const centerY = bounds.top + bounds.height / 2;
+            // Check if grid fits
+            const gridFits = (x, y) => {
+                const gridRect = { x, y, w: gridWidth, h: gridHeight };
+                // Inside polygon
+                if (!this.isPointInsidePolygon({ x, y }, layoutPolygon) ||
+                    !this.isPointInsidePolygon({ x: x + gridWidth, y }, layoutPolygon) ||
+                    !this.isPointInsidePolygon({ x, y: y + gridHeight }, layoutPolygon) ||
+                    !this.isPointInsidePolygon({ x: x + gridWidth, y: y + gridHeight }, layoutPolygon)) {
+                    return false;
+                }
+                // No overlap
+                for (const occ of occupiedRects) {
+                    if (this.rectsOverlap(gridRect, occ)) {
+                        return false;
+                    }
                 }
+                return true;
+            };
+            // 🔥 Find largest empty space
+            let bestScore = -Infinity;
+            let bestPos = null;
+            const step = fixtureWidthPx / 2;
+            for (let y = bounds.top; y <= bounds.top + bounds.height - gridHeight; y += step) {
+                for (let x = bounds.left; x <= bounds.left + bounds.width - gridWidth; x += step) {
+                    if (!gridFits(x, y))
+                        continue;
+                    const gridRect = { x, y, w: gridWidth, h: gridHeight };
+                    const emptyMargin = this.computeEmptyMargin(gridRect, bounds, occupiedRects);
+                    const dx = centerX - (x + gridWidth / 2);
+                    const dy = centerY - (y + gridHeight / 2);
+                    const centerPenalty = dx * dx + dy * dy;
+                    // Biggest empty space wins, center is a soft stabilizer
+                    const score = emptyMargin * 1000 - centerPenalty * 0.001;
+                    if (score > bestScore) {
+                        bestScore = score;
+                        bestPos = { x, y };
+                    }
+                }
+            }
+            if (!bestPos) {
+                console.warn("No valid center-fixture placement found");
+                return;
             }
+            // Assign positions
+            fixtures.forEach((fixture, index) => {
+                const row = Math.floor(index / columns);
+                const col = index % columns;
+                const x = bestPos.x + col * fixtureWidthPx;
+                const y = bestPos.y + row * fixtureHeightPx;
+                fixture.relativePosition.x = this.fromPixels(x, "ft");
+                fixture.relativePosition.y = this.fromPixels(y, "ft");
+            });
         }
         for (let i = 0; i < this.floorData?.centerFixture?.length; i++) {
             const fixture = this.floorData.centerFixture[i];
@@ -12636,6 +12657,62 @@ class ManageStorePlanoComponent {
         }
         return true;
     }
+    isPointInsidePolygon(point, polygon) {
+        let inside = false;
+        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+            const xi = polygon[i].x, yi = polygon[i].y;
+            const xj = polygon[j].x, yj = polygon[j].y;
+            const intersect = yi > point.y !== yj > point.y &&
+                point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
+            if (intersect)
+                inside = !inside;
+        }
+        return inside;
+    }
+    getOccupiedRects() {
+        return this.canvas.getObjects().map((obj) => {
+            const r = obj.getBoundingRect();
+            return {
+                x: r.left,
+                y: r.top,
+                w: r.width,
+                h: r.height,
+            };
+        });
+    }
+    rectsOverlap(a, b) {
+        return !(a.x + a.w <= b.x ||
+            a.x >= b.x + b.w ||
+            a.y + a.h <= b.y ||
+            a.y >= b.y + b.h);
+    }
+    computeEmptyMargin(gridRect, bounds, occupiedRects) {
+        let minMargin = Infinity;
+        // distance to layout bounds
+        minMargin = Math.min(minMargin, gridRect.x - bounds.left, bounds.left + bounds.width - (gridRect.x + gridRect.w), gridRect.y - bounds.top, bounds.top + bounds.height - (gridRect.y + gridRect.h));
+        // distance to other objects
+        for (const occ of occupiedRects) {
+            // horizontal gap
+            if (occ.y < gridRect.y + gridRect.h && occ.y + occ.h > gridRect.y) {
+                if (occ.x + occ.w <= gridRect.x) {
+                    minMargin = Math.min(minMargin, gridRect.x - (occ.x + occ.w));
+                }
+                else if (occ.x >= gridRect.x + gridRect.w) {
+                    minMargin = Math.min(minMargin, occ.x - (gridRect.x + gridRect.w));
+                }
+            }
+            // vertical gap
+            if (occ.x < gridRect.x + gridRect.w && occ.x + occ.w > gridRect.x) {
+                if (occ.y + occ.h <= gridRect.y) {
+                    minMargin = Math.min(minMargin, gridRect.y - (occ.y + occ.h));
+                }
+                else if (occ.y >= gridRect.y + gridRect.h) {
+                    minMargin = Math.min(minMargin, occ.y - (gridRect.y + gridRect.h));
+                }
+            }
+        }
+        return minMargin;
+    }
     drawFixtureRowLabel(text, x, y) {
         const label = new fabric.Text(text, {
             left: x,
@@ -12815,28 +12892,6 @@ class ManageStorePlanoComponent {
         let modCenterX = x;
         let modCenterY = y;
         let angle = elementData.angle;
-        if (this.floorData.cadLayout) {
-            // if (elementData.direction === "up") {
-            //   modCenterX = modCenterX;
-            //   modCenterY = modCenterY + centerX;
-            // } else if (elementData.direction === "down") {
-            //   modCenterX = modCenterX;
-            //   modCenterY = modCenterY - centerX;
-            // } else if (elementData.direction === "right") {
-            //   modCenterX = modCenterX + centerX;
-            //   modCenterY = modCenterY;
-            // } else if (elementData.direction === "left") {
-            //   modCenterX = modCenterX - centerX;
-            //   modCenterY = modCenterY;
-            // }
-            // angle =
-            //   elementData.angle > 180
-            //     ? elementData.angle - 180
-            //     : elementData.angle + 180;
-            // elementData.angle = angle;
-            // elementData.relativePosition.x = modCenterX;
-            // elementData.relativePosition.y = modCenterY;
-        }
         const group = new fabric.Group(elements, {
             left: modCenterX,
             top: modCenterY,
@@ -12848,11 +12903,6 @@ class ManageStorePlanoComponent {
             hoverCursor: "pointer",
             angle: angle,
             subTargetCheck: true,
-            // ...(this.floorData.cadLayout
-            //   ? { originX: "center", originY: "center" }
-            //   : {}),
-            // originX: "center",
-            // originY: "center",
         });
         group.objType = elementData.elementType;
         group.data = elementData;
@@ -15435,11 +15485,11 @@ class ManageStorePlanoComponent {
         this.destroy$.complete();
     }
     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 });
-    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 }], 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\">\r\n              <div style=\"margin-top:10px;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            <!-- {{ planoData?.storeName }} -->\r\n            <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n              [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n            </lib-reactive-select>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\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_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\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?.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\" (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              @if(!editFixture && floorData?.isPlanoApproved === false){\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n                  [disabled]=\"layoutForm.enabled\">\r\n                  Approve Layout\r\n                </button>\r\n              }@else{\r\n                <!-- Normal Mode -->\r\n                <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n                  <!-- Publish Buttons -->\r\n                  <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Redo\r\n                  </button>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"publishingState == 'complete'\">\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()\">\r\n                    Publish\r\n                  </button>\r\n                </ng-container>\r\n              }\r\n\r\n\r\n\r\n              <!-- Revoke Button -->\r\n              <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n                class=\"btn btn-red d-flex align-items-center\">\r\n                <svg class=\"me-2\" 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_640_5594)\">\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_5594\">\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              <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\" 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                <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\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\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\r\n              <!-- Visual Merchandise -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                <div class=\"indicator mt-2\" [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            </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 [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 accordion=\"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]=\"i.toString()\" 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\" [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]=\"'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\" class=\"row g-0 mb-5\">\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: 190px\" 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\"\r\n            [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\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\"\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\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"updateLayout(true)\">\r\n            Submit\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\" 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\">\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              </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                (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\" [isSubmitted]=\"submitFixture\"\r\n                (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 ? '340px' : '1050px'}\">\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\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n      (isApproved)=\"handleApproverResponse($event)\">\r\n    </app-manage-store-plano-feedback> -->\r\n\r\n    <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n      [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n      [showAction]=\"!editFixture\"></lib-verification-feedback>\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;width:345px;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 .block{border:1px solid #98a2b3;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 .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.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.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}::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}.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 .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#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}#header .cus-btn:hover{background:#e2f5ff}.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)}}\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"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], 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"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
+    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 }], 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\">\r\n              <div style=\"margin-top:10px;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            <!-- {{ planoData?.storeName }} -->\r\n            <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n              [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n            </lib-reactive-select>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\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_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\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?.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\" (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              @if(!editFixture && floorData?.isPlanoApproved === false){\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n                  [disabled]=\"layoutForm.enabled\">\r\n                  Approve Layout\r\n                </button>\r\n              }@else{\r\n                <!-- Normal Mode -->\r\n                <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n                  <!-- Publish Buttons -->\r\n                  <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Redo\r\n                  </button>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"publishingState == 'complete'\">\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()\">\r\n                    Publish\r\n                  </button>\r\n                </ng-container>\r\n              }\r\n\r\n\r\n\r\n              <!-- Revoke Button -->\r\n              <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n                class=\"btn btn-red d-flex align-items-center\">\r\n                <svg class=\"me-2\" 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_640_5594)\">\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_5594\">\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              <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\" 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                <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\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\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\r\n              <!-- Visual Merchandise -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                <div class=\"indicator mt-2\" [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            </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 [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 accordion=\"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]=\"i.toString()\" 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\" [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]=\"'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\" class=\"row g-0 mb-5\">\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: 176px\" 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\"\r\n            [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\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\"\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\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"updateLayout(true)\">\r\n            Save\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\" 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\">\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              </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                (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\" [isSubmitted]=\"submitFixture\"\r\n                (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 ? '340px' : '1050px'}\">\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\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n      (isApproved)=\"handleApproverResponse($event)\">\r\n    </app-manage-store-plano-feedback> -->\r\n\r\n    <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n      [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n      [showAction]=\"!editFixture\"></lib-verification-feedback>\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;width:345px;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 .block{border:1px solid #98a2b3;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 .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.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.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}::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}.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 .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#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}#header .cus-btn:hover{background:#e2f5ff}.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)}}\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"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], 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"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, decorators: [{
             type: Component,
-            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\">\r\n              <div style=\"margin-top:10px;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            <!-- {{ planoData?.storeName }} -->\r\n            <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n              [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n            </lib-reactive-select>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\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_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\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?.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\" (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              @if(!editFixture && floorData?.isPlanoApproved === false){\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n                  [disabled]=\"layoutForm.enabled\">\r\n                  Approve Layout\r\n                </button>\r\n              }@else{\r\n                <!-- Normal Mode -->\r\n                <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n                  <!-- Publish Buttons -->\r\n                  <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Redo\r\n                  </button>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"publishingState == 'complete'\">\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()\">\r\n                    Publish\r\n                  </button>\r\n                </ng-container>\r\n              }\r\n\r\n\r\n\r\n              <!-- Revoke Button -->\r\n              <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n                class=\"btn btn-red d-flex align-items-center\">\r\n                <svg class=\"me-2\" 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_640_5594)\">\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_5594\">\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              <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\" 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                <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\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\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\r\n              <!-- Visual Merchandise -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                <div class=\"indicator mt-2\" [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            </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 [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 accordion=\"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]=\"i.toString()\" 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\" [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]=\"'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\" class=\"row g-0 mb-5\">\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: 190px\" 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\"\r\n            [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\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\"\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\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"updateLayout(true)\">\r\n            Submit\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\" 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\">\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              </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                (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\" [isSubmitted]=\"submitFixture\"\r\n                (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 ? '340px' : '1050px'}\">\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\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n      (isApproved)=\"handleApproverResponse($event)\">\r\n    </app-manage-store-plano-feedback> -->\r\n\r\n    <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n      [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n      [showAction]=\"!editFixture\"></lib-verification-feedback>\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;width:345px;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 .block{border:1px solid #98a2b3;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 .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.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.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}::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}.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 .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#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}#header .cus-btn:hover{background:#e2f5ff}.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)}}\n"] }]
+            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\">\r\n              <div style=\"margin-top:10px;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            <!-- {{ planoData?.storeName }} -->\r\n            <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n              [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n            </lib-reactive-select>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\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_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\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?.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\" (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              @if(!editFixture && floorData?.isPlanoApproved === false){\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n                  [disabled]=\"layoutForm.enabled\">\r\n                  Approve Layout\r\n                </button>\r\n              }@else{\r\n                <!-- Normal Mode -->\r\n                <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n                  <!-- Publish Buttons -->\r\n                  <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Layout Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish Fixture Redo\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Verification\r\n                  </button>\r\n                  <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                    (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    Publish VM Redo\r\n                  </button>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"publishingState == 'complete'\">\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()\">\r\n                    Publish\r\n                  </button>\r\n                </ng-container>\r\n              }\r\n\r\n\r\n\r\n              <!-- Revoke Button -->\r\n              <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n                class=\"btn btn-red d-flex align-items-center\">\r\n                <svg class=\"me-2\" 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_640_5594)\">\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_5594\">\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              <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\" 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                <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\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\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\r\n              <!-- Visual Merchandise -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                <div class=\"indicator mt-2\" [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            </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 [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 accordion=\"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]=\"i.toString()\" 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\" [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]=\"'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\" class=\"row g-0 mb-5\">\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: 176px\" 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\"\r\n            [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\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\"\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\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"updateLayout(true)\">\r\n            Save\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\" 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\">\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              </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                (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\" [isSubmitted]=\"submitFixture\"\r\n                (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 ? '340px' : '1050px'}\">\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\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n      (isApproved)=\"handleApproverResponse($event)\">\r\n    </app-manage-store-plano-feedback> -->\r\n\r\n    <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n      [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n      [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n      [showAction]=\"!editFixture\"></lib-verification-feedback>\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;width:345px;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 .block{border:1px solid #98a2b3;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 .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.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.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}::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}.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 .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#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}#header .cus-btn:hover{background:#e2f5ff}.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)}}\n"] }]
         }], 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: [{
                 type: ViewChild,
                 args: ["baseCanvas"]