tango-app-ui-store-builder 1.2.15 → 1.2.16

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, HostListener, Output, forwardRef, Pipe, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
+import { Component, Injectable, inject, ViewChild, Input, EventEmitter, Output, HostListener, ChangeDetectionStrategy, forwardRef, Pipe, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterLink, RouterOutlet, RouterModule } from '@angular/router';
 import * as i2$1 from 'tango-app-ui-global';
 import { GlobalStateService } from 'tango-app-ui-global';
 import * as i5 from '@angular/common';
-import { DatePipe, CommonModule, NgClass, NgStyle, NgFor, NgIf, TitleCasePipe, UpperCasePipe } from '@angular/common';
+import { CommonModule, DatePipe, NgClass, NgStyle, NgFor, NgIf, TitleCasePipe, UpperCasePipe } from '@angular/common';
 import * as i1$2 from '@angular/forms';
 import { FormControl, FormGroup, FormsModule, FormArray, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i7 from '@angular/cdk/drag-drop';
@@ -12994,6 +12994,10 @@ class ZoneEditableFixtureComponent {
     clientId;
     imgCDN;
     shelfColors = SHELF_COLORS;
+    // Zone-verification diff palette: red when store response brands differ from
+    // the current plano for that zone; neutral grey when they match.
+    ZONE_DIFF_COLOR = { bg: "#FEE4E2", border: "#F04438" };
+    ZONE_MATCH_COLOR = { bg: "#F2F4F7", border: "#EAECF0" };
     sectionByZones = [];
     // vmList: VmLibraryList[] = [];
     isPageLoading = true;
@@ -13209,6 +13213,30 @@ class ZoneEditableFixtureComponent {
         this.brandsByZone = { ...this.brandsByZone, [zone]: [] };
         this.applyBrandsToFixture();
     }
+    getZoneBrandsFromConfig(config, zone) {
+        const shelf = (config ?? []).find((s) => s?.zone === zone);
+        return Array.isArray(shelf?.productBrandName) ? shelf.productBrandName : [];
+    }
+    zoneBrandKey(brands) {
+        return [...(brands ?? [])]
+            .filter((b) => typeof b === "string")
+            .map((b) => b.trim())
+            .filter(Boolean)
+            .sort()
+            .join("|");
+    }
+    isZoneBrandsDifferent(zone) {
+        if (!zone)
+            return false;
+        const responseBrands = this.getZoneBrandsFromConfig(this.fixture?.shelfConfig, zone);
+        const planoBrands = this.getZoneBrandsFromConfig(this.planoFixture?.shelfConfig, zone);
+        return this.zoneBrandKey(responseBrands) !== this.zoneBrandKey(planoBrands);
+    }
+    zoneColor(zone) {
+        return this.isZoneBrandsDifferent(zone)
+            ? this.ZONE_DIFF_COLOR
+            : this.ZONE_MATCH_COLOR;
+    }
     snapshotBrandsByZone() {
         const result = {};
         (this.fixture?.shelfConfig ?? []).forEach((shelf) => {
@@ -13452,13 +13480,14 @@ class ZoneEditableFixtureComponent {
                         allSectionShelves.push(...shelfIds);
                         const secDivs = shelves.filter((item) => shelfIds?.includes(item?.id ?? ""));
                         if (this.showColors) {
+                            const color = this.zoneColor(se.zone);
                             secDivs.forEach((d) => {
                                 if (!d)
                                     return;
-                                d.style.backgroundColor = this.shelfColors[i].bg;
+                                d.style.backgroundColor = color.bg;
                                 const cap = d.querySelector(".capacity");
                                 if (cap) {
-                                    cap.style.border = `1px solid ${this.shelfColors[i].border}`;
+                                    cap.style.border = `1px solid ${color.border}`;
                                 }
                             });
                         }
@@ -13483,9 +13512,7 @@ class ZoneEditableFixtureComponent {
                             const currentSectionWidth = sz.section.shelfDivs[0]?.offsetWidth ?? 345;
                             const bc = bodies.querySelector(`#brand-category${i}`);
                             if (bc) {
-                                const secBg = rgbToHex(sz.section.shelfDivs[0]?.style.backgroundColor);
-                                const color = this.shelfColors.find((c) => c.bg === secBg) ??
-                                    this.shelfColors[i];
+                                const color = this.zoneColor(sz.zone);
                                 if (this.showColors) {
                                     bc.style.borderColor = color.border;
                                     bc.style.backgroundColor = "#fff";
@@ -67006,6 +67033,7 @@ class DeleteTaskComponent {
     sbs;
     gs;
     clientId;
+    taskType = 'fixture';
     storeOptions = [];
     initialStores = [];
     selectedStores = [];
@@ -67041,6 +67069,9 @@ class DeleteTaskComponent {
     onStoresSelected(stores) {
         this.selectedStores = stores;
     }
+    onTaskTypeChange() {
+        this.message = '';
+    }
     onSubmit() {
         if (this.selectedStores.length === 0) {
             this.showMessage('Please select at least one store.', 'error');
@@ -67048,6 +67079,7 @@ class DeleteTaskComponent {
         }
         let payload = {
             storeNames: this.selectedStores.map((s) => s.label),
+            taskType: this.taskType,
         };
         this.isSubmitting = true;
         this.sbs.deleteTaskForStores(payload).subscribe({
@@ -67072,11 +67104,11 @@ class DeleteTaskComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteTaskComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DeleteTaskComponent, selector: "lib-delete-task", ngImport: i0, template: "<section class=\"delete-task p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 600px;\">\r\n    <h5 class=\"mb-3\">Delete Task</h5>\r\n\r\n    <!-- Store Select -->\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Store</label>\r\n      <lib-store-select\r\n        [options]=\"storeOptions\"\r\n        [initialSelected]=\"initialStores\"\r\n        (selectedChange)=\"onStoresSelected($event)\">\r\n      </lib-store-select>\r\n    </div>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\"\r\n      [disabled]=\"isSubmitting || selectedStores.length === 0\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Task' }}\r\n    </button>\r\n\r\n    <!-- Message -->\r\n    @if (message) {\r\n      <div class=\"mt-3 alert\" [class.alert-success]=\"messageType === 'success'\"\r\n        [class.alert-danger]=\"messageType === 'error'\">\r\n        {{ message }}\r\n      </div>\r\n    }\r\n  </div>\r\n</section>\r\n", styles: [""], dependencies: [{ kind: "component", type: StoreSelectComponent, selector: "lib-store-select", inputs: ["options", "initialSelected", "singleSelect"], outputs: ["selectedChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DeleteTaskComponent, selector: "lib-delete-task", ngImport: i0, template: "<section class=\"delete-task p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 600px;\">\r\n    <h5 class=\"mb-3\">Delete Task</h5>\r\n\r\n    <!-- Task Type -->\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label d-block\">Task Type</label>\r\n      <div class=\"d-flex gap-3\">\r\n        <div class=\"form-check\">\r\n          <input type=\"radio\" class=\"form-check-input\" id=\"deleteTaskTypeFixture\"\r\n            name=\"deleteTaskType\" value=\"fixture\"\r\n            [(ngModel)]=\"taskType\" (change)=\"onTaskTypeChange()\">\r\n          <label class=\"form-check-label\" for=\"deleteTaskTypeFixture\">Fixture Verification</label>\r\n        </div>\r\n        <div class=\"form-check\">\r\n          <input type=\"radio\" class=\"form-check-input\" id=\"deleteTaskTypeZone\"\r\n            name=\"deleteTaskType\" value=\"zoneVerification\"\r\n            [(ngModel)]=\"taskType\" (change)=\"onTaskTypeChange()\">\r\n          <label class=\"form-check-label\" for=\"deleteTaskTypeZone\">Zone Verification</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Store Select -->\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Store</label>\r\n      <lib-store-select\r\n        [options]=\"storeOptions\"\r\n        [initialSelected]=\"initialStores\"\r\n        (selectedChange)=\"onStoresSelected($event)\">\r\n      </lib-store-select>\r\n    </div>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\"\r\n      [disabled]=\"isSubmitting || selectedStores.length === 0\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Task' }}\r\n    </button>\r\n\r\n    <!-- Message -->\r\n    @if (message) {\r\n      <div class=\"mt-3 alert\" [class.alert-success]=\"messageType === 'success'\"\r\n        [class.alert-danger]=\"messageType === 'error'\">\r\n        {{ message }}\r\n      </div>\r\n    }\r\n  </div>\r\n</section>\r\n", styles: [""], dependencies: [{ 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StoreSelectComponent, selector: "lib-store-select", inputs: ["options", "initialSelected", "singleSelect"], outputs: ["selectedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteTaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-delete-task', template: "<section class=\"delete-task p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 600px;\">\r\n    <h5 class=\"mb-3\">Delete Task</h5>\r\n\r\n    <!-- Store Select -->\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Store</label>\r\n      <lib-store-select\r\n        [options]=\"storeOptions\"\r\n        [initialSelected]=\"initialStores\"\r\n        (selectedChange)=\"onStoresSelected($event)\">\r\n      </lib-store-select>\r\n    </div>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\"\r\n      [disabled]=\"isSubmitting || selectedStores.length === 0\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Task' }}\r\n    </button>\r\n\r\n    <!-- Message -->\r\n    @if (message) {\r\n      <div class=\"mt-3 alert\" [class.alert-success]=\"messageType === 'success'\"\r\n        [class.alert-danger]=\"messageType === 'error'\">\r\n        {{ message }}\r\n      </div>\r\n    }\r\n  </div>\r\n</section>\r\n" }]
+            args: [{ selector: 'lib-delete-task', template: "<section class=\"delete-task p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 600px;\">\r\n    <h5 class=\"mb-3\">Delete Task</h5>\r\n\r\n    <!-- Task Type -->\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label d-block\">Task Type</label>\r\n      <div class=\"d-flex gap-3\">\r\n        <div class=\"form-check\">\r\n          <input type=\"radio\" class=\"form-check-input\" id=\"deleteTaskTypeFixture\"\r\n            name=\"deleteTaskType\" value=\"fixture\"\r\n            [(ngModel)]=\"taskType\" (change)=\"onTaskTypeChange()\">\r\n          <label class=\"form-check-label\" for=\"deleteTaskTypeFixture\">Fixture Verification</label>\r\n        </div>\r\n        <div class=\"form-check\">\r\n          <input type=\"radio\" class=\"form-check-input\" id=\"deleteTaskTypeZone\"\r\n            name=\"deleteTaskType\" value=\"zoneVerification\"\r\n            [(ngModel)]=\"taskType\" (change)=\"onTaskTypeChange()\">\r\n          <label class=\"form-check-label\" for=\"deleteTaskTypeZone\">Zone Verification</label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Store Select -->\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Store</label>\r\n      <lib-store-select\r\n        [options]=\"storeOptions\"\r\n        [initialSelected]=\"initialStores\"\r\n        (selectedChange)=\"onStoresSelected($event)\">\r\n      </lib-store-select>\r\n    </div>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\"\r\n      [disabled]=\"isSubmitting || selectedStores.length === 0\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Task' }}\r\n    </button>\r\n\r\n    <!-- Message -->\r\n    @if (message) {\r\n      <div class=\"mt-3 alert\" [class.alert-success]=\"messageType === 'success'\"\r\n        [class.alert-danger]=\"messageType === 'error'\">\r\n        {{ message }}\r\n      </div>\r\n    }\r\n  </div>\r\n</section>\r\n" }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }] });
 
 class DeleteFloorComponent {
@@ -67314,11 +67346,11 @@ class DeleteFloorComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\r\n    <h5 class=\"mb-1\">Delete Floor</h5>\r\n    <p class=\"text-muted small mb-3\">\r\n      Removes a floor and every row that references it \u2014 fixtures, shelves, task\r\n      compliance, processed tasks, comments, and revisions. If this is the only\r\n      floor, the entire planogram is removed. The store entry is never touched.\r\n    </p>\r\n\r\n    <!-- Store -->\r\n    <div class=\"mb-3\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'storeId'\"\r\n        [nameField]=\"'storeName'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStoreId\"\r\n        (ngModelChange)=\"onStoreSelected($event)\">\r\n      </lib-reactive-select>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\r\n    </div>\r\n\r\n    <!-- Floor -->\r\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\r\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\r\n        <div class=\"text-muted small\">Loading floors...</div>\r\n      </ng-container>\r\n      <ng-template #floorPicker>\r\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\r\n          <lib-reactive-select\r\n            label=\"Floor\"\r\n            [idField]=\"'_id'\"\r\n            [nameField]=\"'displayName'\"\r\n            [data]=\"floors\"\r\n            [search]=\"true\"\r\n            [ngModel]=\"selectedFloorId\"\r\n            (ngModelChange)=\"onFloorSelected($event)\">\r\n          </lib-reactive-select>\r\n        </ng-container>\r\n        <ng-template #noFloors>\r\n          <div class=\"text-muted small\">No floors found for this store.</div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Status + cascade preview -->\r\n    <ng-container *ngIf=\"selectedFloorId\">\r\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\r\n        <div class=\"text-muted small\">Loading floor details...</div>\r\n      </ng-container>\r\n      <ng-template #impactBlock>\r\n        <ng-container *ngIf=\"impact\">\r\n          <div class=\"mb-3 p-3 rounded info-block\">\r\n            <div class=\"row gx-3 gy-2 small\">\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Floor status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Planogram status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Plano approved</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Verification done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Merch rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">VM rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\r\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mb-3 p-3 rounded cascade-block\">\r\n            <div class=\"fw-semibold mb-2\">Will delete</div>\r\n            <ul class=\"small mb-0 ps-3\">\r\n              <li>1 floor (storelayouts)</li>\r\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\r\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\r\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\r\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\r\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\r\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\r\n            </ul>\r\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\r\n          </div>\r\n\r\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\r\n            <strong>This is the only floor in this planogram.</strong>\r\n            Deleting it will also remove the planogram entry \u2014 the plano will\r\n            disappear completely. The store record itself will NOT be deleted.\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\r\n    </button>\r\n\r\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\r\n      [class.alert-success]=\"messageType === 'success'\"\r\n      [class.alert-danger]=\"messageType === 'error'\"\r\n      style=\"white-space: pre-line;\">\r\n      {{ message }}\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\n    <h5 class=\"mb-1\">Delete Floor</h5>\n    <p class=\"text-muted small mb-3\">\n      Removes a floor and every row that references it \u2014 fixtures, shelves, task\n      compliance, processed tasks, comments, and revisions. If this is the only\n      floor, the entire planogram is removed. The store entry is never touched.\n    </p>\n\n    <!-- Store -->\n    <div class=\"mb-3\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'storeId'\"\n        [nameField]=\"'storeName'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStoreId\"\n        (ngModelChange)=\"onStoreSelected($event)\">\n      </lib-reactive-select>\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n    </div>\n\n    <!-- Floor -->\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n          <lib-reactive-select\n            label=\"Floor\"\n            [idField]=\"'_id'\"\n            [nameField]=\"'displayName'\"\n            [data]=\"floors\"\n            [search]=\"true\"\n            [ngModel]=\"selectedFloorId\"\n            (ngModelChange)=\"onFloorSelected($event)\">\n          </lib-reactive-select>\n        </ng-container>\n        <ng-template #noFloors>\n          <div class=\"text-muted small\">No floors found for this store.</div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <!-- Status + cascade preview -->\n    <ng-container *ngIf=\"selectedFloorId\">\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n        <div class=\"text-muted small\">Loading floor details...</div>\n      </ng-container>\n      <ng-template #impactBlock>\n        <ng-container *ngIf=\"impact\">\n          <div class=\"mb-3 p-3 rounded info-block\">\n            <div class=\"row gx-3 gy-2 small\">\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Floor status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Planogram status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Plano approved</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Verification done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Merch rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">VM rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-12\">\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mb-3 p-3 rounded cascade-block\">\n            <div class=\"fw-semibold mb-2\">Will delete</div>\n            <ul class=\"small mb-0 ps-3\">\n              <li>1 floor (storelayouts)</li>\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n            </ul>\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n          </div>\n\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n            <strong>This is the only floor in this planogram.</strong>\n            Deleting it will also remove the planogram entry \u2014 the plano will\n            disappear completely. The store record itself will NOT be deleted.\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <!-- Submit -->\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n    </button>\n\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\n      [class.alert-success]=\"messageType === 'success'\"\n      [class.alert-danger]=\"messageType === 'error'\"\n      style=\"white-space: pre-line;\">\n      {{ message }}\n    </div>\n  </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\r\n    <h5 class=\"mb-1\">Delete Floor</h5>\r\n    <p class=\"text-muted small mb-3\">\r\n      Removes a floor and every row that references it \u2014 fixtures, shelves, task\r\n      compliance, processed tasks, comments, and revisions. If this is the only\r\n      floor, the entire planogram is removed. The store entry is never touched.\r\n    </p>\r\n\r\n    <!-- Store -->\r\n    <div class=\"mb-3\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'storeId'\"\r\n        [nameField]=\"'storeName'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStoreId\"\r\n        (ngModelChange)=\"onStoreSelected($event)\">\r\n      </lib-reactive-select>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\r\n    </div>\r\n\r\n    <!-- Floor -->\r\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\r\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\r\n        <div class=\"text-muted small\">Loading floors...</div>\r\n      </ng-container>\r\n      <ng-template #floorPicker>\r\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\r\n          <lib-reactive-select\r\n            label=\"Floor\"\r\n            [idField]=\"'_id'\"\r\n            [nameField]=\"'displayName'\"\r\n            [data]=\"floors\"\r\n            [search]=\"true\"\r\n            [ngModel]=\"selectedFloorId\"\r\n            (ngModelChange)=\"onFloorSelected($event)\">\r\n          </lib-reactive-select>\r\n        </ng-container>\r\n        <ng-template #noFloors>\r\n          <div class=\"text-muted small\">No floors found for this store.</div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Status + cascade preview -->\r\n    <ng-container *ngIf=\"selectedFloorId\">\r\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\r\n        <div class=\"text-muted small\">Loading floor details...</div>\r\n      </ng-container>\r\n      <ng-template #impactBlock>\r\n        <ng-container *ngIf=\"impact\">\r\n          <div class=\"mb-3 p-3 rounded info-block\">\r\n            <div class=\"row gx-3 gy-2 small\">\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Floor status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Planogram status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Plano approved</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Verification done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Merch rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">VM rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\r\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mb-3 p-3 rounded cascade-block\">\r\n            <div class=\"fw-semibold mb-2\">Will delete</div>\r\n            <ul class=\"small mb-0 ps-3\">\r\n              <li>1 floor (storelayouts)</li>\r\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\r\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\r\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\r\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\r\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\r\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\r\n            </ul>\r\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\r\n          </div>\r\n\r\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\r\n            <strong>This is the only floor in this planogram.</strong>\r\n            Deleting it will also remove the planogram entry \u2014 the plano will\r\n            disappear completely. The store record itself will NOT be deleted.\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\r\n    </button>\r\n\r\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\r\n      [class.alert-success]=\"messageType === 'success'\"\r\n      [class.alert-danger]=\"messageType === 'error'\"\r\n      style=\"white-space: pre-line;\">\r\n      {{ message }}\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"] }]
+            args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\n    <h5 class=\"mb-1\">Delete Floor</h5>\n    <p class=\"text-muted small mb-3\">\n      Removes a floor and every row that references it \u2014 fixtures, shelves, task\n      compliance, processed tasks, comments, and revisions. If this is the only\n      floor, the entire planogram is removed. The store entry is never touched.\n    </p>\n\n    <!-- Store -->\n    <div class=\"mb-3\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'storeId'\"\n        [nameField]=\"'storeName'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStoreId\"\n        (ngModelChange)=\"onStoreSelected($event)\">\n      </lib-reactive-select>\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n    </div>\n\n    <!-- Floor -->\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n          <lib-reactive-select\n            label=\"Floor\"\n            [idField]=\"'_id'\"\n            [nameField]=\"'displayName'\"\n            [data]=\"floors\"\n            [search]=\"true\"\n            [ngModel]=\"selectedFloorId\"\n            (ngModelChange)=\"onFloorSelected($event)\">\n          </lib-reactive-select>\n        </ng-container>\n        <ng-template #noFloors>\n          <div class=\"text-muted small\">No floors found for this store.</div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <!-- Status + cascade preview -->\n    <ng-container *ngIf=\"selectedFloorId\">\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n        <div class=\"text-muted small\">Loading floor details...</div>\n      </ng-container>\n      <ng-template #impactBlock>\n        <ng-container *ngIf=\"impact\">\n          <div class=\"mb-3 p-3 rounded info-block\">\n            <div class=\"row gx-3 gy-2 small\">\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Floor status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Planogram status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Plano approved</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Verification done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Merch rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">VM rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-12\">\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mb-3 p-3 rounded cascade-block\">\n            <div class=\"fw-semibold mb-2\">Will delete</div>\n            <ul class=\"small mb-0 ps-3\">\n              <li>1 floor (storelayouts)</li>\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n            </ul>\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n          </div>\n\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n            <strong>This is the only floor in this planogram.</strong>\n            Deleting it will also remove the planogram entry \u2014 the plano will\n            disappear completely. The store record itself will NOT be deleted.\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <!-- Submit -->\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n    </button>\n\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\n      [class.alert-success]=\"messageType === 'success'\"\n      [class.alert-danger]=\"messageType === 'error'\"\n      style=\"white-space: pre-line;\">\n      {{ message }}\n    </div>\n  </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }] });
 
 class UpdateFixtureTypeComponent {
@@ -68439,7 +68471,9 @@ class SwapTemplateComponent {
         const payload = {
             data: this.rows.map((r) => ({
                 storeName,
+                fixtureId: r.fixture._id,
                 fixtureNumber: r.fixture.fixtureNumber,
+                templateId: r.template._id,
                 templateName: r.template.fixtureName,
             })),
         };
@@ -73601,10 +73635,9 @@ class StorePlanoComponent {
     }
     toggleView(view) {
         this.selectedView = view;
-        if (this.selectedView === "detail") {
+        if (this.selectedView === "detail" && this.floorData) {
             setTimeout(() => {
-                this.resizeCanvas();
-                this.fitCanvasToLayoutAnimated();
+                this.drawInitialContent();
             }, 300);
         }
     }
@@ -73790,6 +73823,11 @@ class StorePlanoComponent {
                 },
             });
         }
+        else if (this.floorData) {
+            setTimeout(() => {
+                this.drawInitialContent();
+            }, 300);
+        }
     }
     buildRevisionSelectItems() {
         this.revisionSelectItems = this.revisionPlanoList.map((r, i) => ({
@@ -74000,6 +74038,27 @@ class StorePlanoComponent {
             }
         }, () => { });
     }
+    toggleStagingFlag(revisionIndex) {
+        const revision = this.revisionPlanoList[revisionIndex];
+        if (!revision || revision.isActive)
+            return;
+        const newValue = !revision.isStaging;
+        this.apiService
+            .setStagingFlag({ revisionId: revision._id, isStaging: newValue })
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    revision.isStaging = newValue;
+                    this.toast.getSuccessToast(res?.message || (newValue ? "Marked for staging" : "Unmarked from staging"));
+                    this.cd.detectChanges();
+                }
+            },
+            error: () => {
+                this.toast.getErrorToast("Failed to update staging flag");
+            },
+        });
+    }
     openEditNameModal(revisionIndex) {
         const revision = this.revisionPlanoList[revisionIndex];
         if (!revision)
@@ -74036,11 +74095,11 @@ class StorePlanoComponent {
         }, () => { });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i5.DatePipe }, { token: i2.ActivatedRoute }, { token: i4.ToastService }, { token: i2$1.PageInfoService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StorePlanoComponent, selector: "app-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe, DatePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], ngImport: i0, template: "<section [ngClass]=\"{ 'd-none': isPageLoading || editFixture }\" id=\"store-plano\">\r\n  <div id=\"header\" [ngClass]=\"{ 'd-none': !planoData }\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div>\r\n        <h4 class=\"title\">\r\n          <a class=\"me-3\" router>{{ planoData?.storeName }}</a>\r\n          <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n            <path\r\n              d=\"M15 11.2894V16.2894C15 16.7314 14.8244 17.1553 14.5118 17.4679C14.1993 17.7805 13.7754 17.9561 13.3333 17.9561H4.16667C3.72464 17.9561 3.30072 17.7805 2.98816 17.4679C2.67559 17.1553 2.5 16.7314 2.5 16.2894V7.12272C2.5 6.68069 2.67559 6.25677 2.98816 5.94421C3.30072 5.63165 3.72464 5.45605 4.16667 5.45605H9.16667M12.5 2.95605H17.5M17.5 2.95605V7.95605M17.5 2.95605L8.33333 12.1227\"\r\n              stroke=\"#008EDF\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg> -->\r\n        </h4>\r\n        <p class=\"subtitle\">Last updated {{ planoData?.lastUpdate | date : \"medium\" }}</p>\r\n      </div>\r\n      <!-- <div class=\"d-flex justify-content-center align-items-center gap-3\">\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M15.7148 6.45605L9.71484 12.4561L15.7148 18.4561\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n        <p class=\"revision-text\">3/3 Revision: Layout assigned</p>\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M9.71484 18.4561L15.7148 12.4561L9.71484 6.45605\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div> -->\r\n    </div>\r\n    <lib-reactive-select style=\"width: fit-content\" *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\"\r\n      [idField]=\"'_id'\" [nameField]=\"'floorName'\" [data]=\"planoData.floors\"></lib-reactive-select>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': !planoData }\" id=\"body\">\r\n    <div class=\"row mx-0 gap-3 mb-4 w-100\">\r\n      <div 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 ? 'bg-warning' : taskInfo?.planoProgress === 75 ? 'bg-primary' : 'bg-success'\r\n                \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.floorCount }}</b> Layout\r\n        </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> </span>{{ taskStyle.layout.name }}\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.fixtureCount }}</b> Fixtures\r\n        </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      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.vmCount }}</b> Visual Merchandise\r\n        </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\r\n    <div id=\"segment-btn\" class=\"w-100 pb-5\">\r\n      <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n        <!-- <button type=\"button\" routerLink=\"/manage/planogram/build-planogram\" class=\"btn btn-primary\">Build</button> -->\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)=\"toggleView('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'\" (click)=\"toggleView('tree')\">\r\n              Tree View\r\n            </button>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"form-check form-switch mt-10\" *ngIf=\"selectedView === 'detail'\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\" [(ngModel)]=\"enableCompare\"  (click)=\"getRevisionDetails($event)\">\r\n        <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n      <div id=\"canvas-card\" class=\"overflow-hidden position-relative overview-canvas\" #canvasContainer [hidden]=\"enableCompare\">\r\n        <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n  \r\n        <!-- Rotate Button -->\r\n        <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n          class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n          (click)=\"rotateCanvas(canvas,90)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" 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        <!-- 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\" stroke=\"#000000\"\r\n            stroke-width=\"0.24000000000000005\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" 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      <div class=\"row\" *ngIf=\"enableCompare\">\r\n        <div class=\"col-md-6\">\r\n            <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"previousSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"previousFloorData\"  *ngIf=\"previousRenderKey && previousFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n                Published: {{previousFloorData?.createdAt || previousFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\">\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-6\">\r\n          <div *ngIf=\"!previousFloorData\" class=\"currentText\">\r\n              Current Plano\r\n          </div>\r\n            <div class=\"d-flex align-items-center revision-header\"\r\n                *ngIf=\"latestFloorData && previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"currentSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"latestFloorData\"  *ngIf=\"latestRenderKey && latestFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n                Published: {{latestFloorData?.createdAt || latestFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\" >\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n      <store-plano-tree-view [allFixture]=\"allFixtures\"\r\n        (selectedInstance)=\"onSelectFixtureInTree($event)\"></store-plano-tree-view>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': planoData }\">\r\n    <div class=\"card-body d-flex justify-content-center align-items-center flex-column h-100 bg-white rounded py-10\">\r\n      <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n      <div class=\"nodatamaintext mt-3\">No data found</div>\r\n      <div class=\"nodatasubtext\">There is no planogram available for this store.</div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<!-----------Edit fixture body----------->\r\n<section [ngClass]=\"{ 'd-none': !editFixture }\">\r\n  <div class=\"header\">\r\n    <div class=\"d-flex align-items-center justify-contents-center gap-5\">\r\n      <button type=\"button\" class=\"btn btn-outline p-3\" (click)=\"onClickBack()\">\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M15.8334 9.99984H4.16675M4.16675 9.99984L10.0001 15.8332M4.16675 9.99984L10.0001 4.1665\"\r\n            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n      <h2 class=\"m-0\">{{ selectedFixtureData?.fixtureName }}</h2>\r\n      <div class=\"badge draft\">{{ selectedFixtureData?.status | titlecase }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"edit-body\" class=\"row w-100\">\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)=\"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)=\"editFixtureSection = 'products'\" [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\"\r\n          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)=\"editFixtureSection = 'vms'\" [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Visual Merchandise\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n      <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-basic-details>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n      <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n      <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-vms>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n\r\n<section [ngClass]=\"{ 'd-none': !isPageLoading }\" id=\"store-plano-skeleton\">\r\n  <div class=\"row\">\r\n    <div class=\"col-12 m-0\"><ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container></div>\r\n    <div class=\"col-12\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n  </div>\r\n</section>\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 class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\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 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      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#store-plano-skeleton .loader .shimmer{height:100%!important}#store-plano #header{border-radius:8px;background:var(--White, #fff);padding:16px 12px;margin-bottom:10px;display:flex;flex-direction:column}#store-plano #header .title{color:var(--Primary-800, #008edf);font-size:16px;font-weight:600;line-height:24px;display:flex;align-items:center}#store-plano #header .subtitle{color:var(--Gray-600, #475467);font-size:14px;font-weight:500;line-height:20px}#store-plano #header .revision-text{color:var(--Gray-800, #1d2939);font-size:14px;font-weight:500;line-height:20px;margin:0}#store-plano #header .btn.btn-outline{padding:10px!important}#store-plano #body{border-radius:8px;background:#fff;padding:24px}#store-plano #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#store-plano .overview-canvas{max-height:calc(100vh - 160px)}#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}.compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: PlanoComparisonComponent, selector: "lib-plano-comparison", inputs: ["floorData", "totalFixtures"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StorePlanoComponent, selector: "app-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe, DatePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], ngImport: i0, template: "<section [ngClass]=\"{ 'd-none': isPageLoading || editFixture }\" id=\"store-plano\">\r\n  <div id=\"header\" [ngClass]=\"{ 'd-none': !planoData }\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div>\r\n        <h4 class=\"title\">\r\n          <a class=\"me-3\" router>{{ planoData?.storeName }}</a>\r\n          <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n            <path\r\n              d=\"M15 11.2894V16.2894C15 16.7314 14.8244 17.1553 14.5118 17.4679C14.1993 17.7805 13.7754 17.9561 13.3333 17.9561H4.16667C3.72464 17.9561 3.30072 17.7805 2.98816 17.4679C2.67559 17.1553 2.5 16.7314 2.5 16.2894V7.12272C2.5 6.68069 2.67559 6.25677 2.98816 5.94421C3.30072 5.63165 3.72464 5.45605 4.16667 5.45605H9.16667M12.5 2.95605H17.5M17.5 2.95605V7.95605M17.5 2.95605L8.33333 12.1227\"\r\n              stroke=\"#008EDF\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg> -->\r\n        </h4>\r\n        <p class=\"subtitle\">Last updated {{ planoData?.lastUpdate | date : \"medium\" }}</p>\r\n      </div>\r\n      <!-- <div class=\"d-flex justify-content-center align-items-center gap-3\">\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M15.7148 6.45605L9.71484 12.4561L15.7148 18.4561\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n        <p class=\"revision-text\">3/3 Revision: Layout assigned</p>\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M9.71484 18.4561L15.7148 12.4561L9.71484 6.45605\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div> -->\r\n    </div>\r\n    <lib-reactive-select style=\"width: fit-content\" *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\"\r\n      [idField]=\"'_id'\" [nameField]=\"'floorName'\" [data]=\"planoData.floors\"></lib-reactive-select>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': !planoData }\" id=\"body\">\r\n    <div class=\"row mx-0 gap-3 mb-4 w-100\">\r\n      <div 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 ? 'bg-warning' : taskInfo?.planoProgress === 75 ? 'bg-primary' : 'bg-success'\r\n                \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.floorCount }}</b> Layout\r\n        </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> </span>{{ taskStyle.layout.name }}\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.fixtureCount }}</b> Fixtures\r\n        </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      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.vmCount }}</b> Visual Merchandise\r\n        </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\r\n    <div id=\"segment-btn\" class=\"w-100 pb-5\">\r\n      <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n        <!-- <button type=\"button\" routerLink=\"/manage/planogram/build-planogram\" class=\"btn btn-primary\">Build</button> -->\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)=\"toggleView('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'\" (click)=\"toggleView('tree')\">\r\n              Tree View\r\n            </button>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"form-check form-switch mt-10\" *ngIf=\"selectedView === 'detail'\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\" [(ngModel)]=\"enableCompare\"  (click)=\"getRevisionDetails($event)\">\r\n        <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n      <div id=\"canvas-card\" class=\"overflow-hidden position-relative overview-canvas\" #canvasContainer [hidden]=\"enableCompare\">\r\n        <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n  \r\n        <!-- Rotate Button -->\r\n        <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n          class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n          (click)=\"rotateCanvas(canvas,90)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" 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        <!-- 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\" stroke=\"#000000\"\r\n            stroke-width=\"0.24000000000000005\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" 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      <div class=\"row\" *ngIf=\"enableCompare\">\r\n        <div class=\"col-md-6\">\r\n            <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"previousSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Staging\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n                        <div class=\"dropdown-item form-check staging-check\"\r\n                             [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n                             (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n                            <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n                                   [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n                                   [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n                                   (click)=\"$event.preventDefault()\">\r\n                            <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"previousFloorData\"  *ngIf=\"previousRenderKey && previousFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n                Published: {{previousFloorData?.createdAt || previousFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\">\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-6\">\r\n          <div *ngIf=\"!previousFloorData\" class=\"currentText\">\r\n              Current Plano\r\n          </div>\r\n            <div class=\"d-flex align-items-center revision-header\"\r\n                *ngIf=\"latestFloorData && previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"currentSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Staging\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n                        <div class=\"dropdown-item form-check staging-check\"\r\n                             [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n                             (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n                            <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n                                   [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n                                   [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n                                   (click)=\"$event.preventDefault()\">\r\n                            <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"latestFloorData\"  *ngIf=\"latestRenderKey && latestFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n                Published: {{latestFloorData?.createdAt || latestFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\" >\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n      <store-plano-tree-view [allFixture]=\"allFixtures\"\r\n        (selectedInstance)=\"onSelectFixtureInTree($event)\"></store-plano-tree-view>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': planoData }\">\r\n    <div class=\"card-body d-flex justify-content-center align-items-center flex-column h-100 bg-white rounded py-10\">\r\n      <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n      <div class=\"nodatamaintext mt-3\">No data found</div>\r\n      <div class=\"nodatasubtext\">There is no planogram available for this store.</div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<!-----------Edit fixture body----------->\r\n<section [ngClass]=\"{ 'd-none': !editFixture }\">\r\n  <div class=\"header\">\r\n    <div class=\"d-flex align-items-center justify-contents-center gap-5\">\r\n      <button type=\"button\" class=\"btn btn-outline p-3\" (click)=\"onClickBack()\">\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M15.8334 9.99984H4.16675M4.16675 9.99984L10.0001 15.8332M4.16675 9.99984L10.0001 4.1665\"\r\n            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n      <h2 class=\"m-0\">{{ selectedFixtureData?.fixtureName }}</h2>\r\n      <div class=\"badge draft\">{{ selectedFixtureData?.status | titlecase }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"edit-body\" class=\"row w-100\">\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)=\"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)=\"editFixtureSection = 'products'\" [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\"\r\n          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)=\"editFixtureSection = 'vms'\" [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Visual Merchandise\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n      <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-basic-details>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n      <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n      <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-vms>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n\r\n<section [ngClass]=\"{ 'd-none': !isPageLoading }\" id=\"store-plano-skeleton\">\r\n  <div class=\"row\">\r\n    <div class=\"col-12 m-0\"><ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container></div>\r\n    <div class=\"col-12\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n  </div>\r\n</section>\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 class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\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 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      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#store-plano-skeleton .loader .shimmer{height:100%!important}#store-plano #header{border-radius:8px;background:var(--White, #fff);padding:16px 12px;margin-bottom:10px;display:flex;flex-direction:column}#store-plano #header .title{color:var(--Primary-800, #008edf);font-size:16px;font-weight:600;line-height:24px;display:flex;align-items:center}#store-plano #header .subtitle{color:var(--Gray-600, #475467);font-size:14px;font-weight:500;line-height:20px}#store-plano #header .revision-text{color:var(--Gray-800, #1d2939);font-size:14px;font-weight:500;line-height:20px;margin:0}#store-plano #header .btn.btn-outline{padding:10px!important}#store-plano #body{border-radius:8px;background:#fff;padding:24px}#store-plano #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#store-plano .overview-canvas{height:calc(100vh - 160px)}#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}.compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: PlanoComparisonComponent, selector: "lib-plano-comparison", inputs: ["floorData", "totalFixtures"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StorePlanoComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-store-plano", providers: [TitleCasePipe, DatePipe], template: "<section [ngClass]=\"{ 'd-none': isPageLoading || editFixture }\" id=\"store-plano\">\r\n  <div id=\"header\" [ngClass]=\"{ 'd-none': !planoData }\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div>\r\n        <h4 class=\"title\">\r\n          <a class=\"me-3\" router>{{ planoData?.storeName }}</a>\r\n          <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n            <path\r\n              d=\"M15 11.2894V16.2894C15 16.7314 14.8244 17.1553 14.5118 17.4679C14.1993 17.7805 13.7754 17.9561 13.3333 17.9561H4.16667C3.72464 17.9561 3.30072 17.7805 2.98816 17.4679C2.67559 17.1553 2.5 16.7314 2.5 16.2894V7.12272C2.5 6.68069 2.67559 6.25677 2.98816 5.94421C3.30072 5.63165 3.72464 5.45605 4.16667 5.45605H9.16667M12.5 2.95605H17.5M17.5 2.95605V7.95605M17.5 2.95605L8.33333 12.1227\"\r\n              stroke=\"#008EDF\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg> -->\r\n        </h4>\r\n        <p class=\"subtitle\">Last updated {{ planoData?.lastUpdate | date : \"medium\" }}</p>\r\n      </div>\r\n      <!-- <div class=\"d-flex justify-content-center align-items-center gap-3\">\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M15.7148 6.45605L9.71484 12.4561L15.7148 18.4561\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n        <p class=\"revision-text\">3/3 Revision: Layout assigned</p>\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M9.71484 18.4561L15.7148 12.4561L9.71484 6.45605\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div> -->\r\n    </div>\r\n    <lib-reactive-select style=\"width: fit-content\" *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\"\r\n      [idField]=\"'_id'\" [nameField]=\"'floorName'\" [data]=\"planoData.floors\"></lib-reactive-select>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': !planoData }\" id=\"body\">\r\n    <div class=\"row mx-0 gap-3 mb-4 w-100\">\r\n      <div 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 ? 'bg-warning' : taskInfo?.planoProgress === 75 ? 'bg-primary' : 'bg-success'\r\n                \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.floorCount }}</b> Layout\r\n        </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> </span>{{ taskStyle.layout.name }}\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.fixtureCount }}</b> Fixtures\r\n        </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      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.vmCount }}</b> Visual Merchandise\r\n        </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\r\n    <div id=\"segment-btn\" class=\"w-100 pb-5\">\r\n      <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n        <!-- <button type=\"button\" routerLink=\"/manage/planogram/build-planogram\" class=\"btn btn-primary\">Build</button> -->\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)=\"toggleView('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'\" (click)=\"toggleView('tree')\">\r\n              Tree View\r\n            </button>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"form-check form-switch mt-10\" *ngIf=\"selectedView === 'detail'\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\" [(ngModel)]=\"enableCompare\"  (click)=\"getRevisionDetails($event)\">\r\n        <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n      <div id=\"canvas-card\" class=\"overflow-hidden position-relative overview-canvas\" #canvasContainer [hidden]=\"enableCompare\">\r\n        <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n  \r\n        <!-- Rotate Button -->\r\n        <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n          class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n          (click)=\"rotateCanvas(canvas,90)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" 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        <!-- 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\" stroke=\"#000000\"\r\n            stroke-width=\"0.24000000000000005\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" 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      <div class=\"row\" *ngIf=\"enableCompare\">\r\n        <div class=\"col-md-6\">\r\n            <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"previousSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"previousFloorData\"  *ngIf=\"previousRenderKey && previousFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n                Published: {{previousFloorData?.createdAt || previousFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\">\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-6\">\r\n          <div *ngIf=\"!previousFloorData\" class=\"currentText\">\r\n              Current Plano\r\n          </div>\r\n            <div class=\"d-flex align-items-center revision-header\"\r\n                *ngIf=\"latestFloorData && previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"currentSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"latestFloorData\"  *ngIf=\"latestRenderKey && latestFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n                Published: {{latestFloorData?.createdAt || latestFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\" >\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n      <store-plano-tree-view [allFixture]=\"allFixtures\"\r\n        (selectedInstance)=\"onSelectFixtureInTree($event)\"></store-plano-tree-view>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': planoData }\">\r\n    <div class=\"card-body d-flex justify-content-center align-items-center flex-column h-100 bg-white rounded py-10\">\r\n      <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n      <div class=\"nodatamaintext mt-3\">No data found</div>\r\n      <div class=\"nodatasubtext\">There is no planogram available for this store.</div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<!-----------Edit fixture body----------->\r\n<section [ngClass]=\"{ 'd-none': !editFixture }\">\r\n  <div class=\"header\">\r\n    <div class=\"d-flex align-items-center justify-contents-center gap-5\">\r\n      <button type=\"button\" class=\"btn btn-outline p-3\" (click)=\"onClickBack()\">\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M15.8334 9.99984H4.16675M4.16675 9.99984L10.0001 15.8332M4.16675 9.99984L10.0001 4.1665\"\r\n            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n      <h2 class=\"m-0\">{{ selectedFixtureData?.fixtureName }}</h2>\r\n      <div class=\"badge draft\">{{ selectedFixtureData?.status | titlecase }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"edit-body\" class=\"row w-100\">\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)=\"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)=\"editFixtureSection = 'products'\" [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\"\r\n          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)=\"editFixtureSection = 'vms'\" [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Visual Merchandise\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n      <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-basic-details>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n      <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n      <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-vms>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n\r\n<section [ngClass]=\"{ 'd-none': !isPageLoading }\" id=\"store-plano-skeleton\">\r\n  <div class=\"row\">\r\n    <div class=\"col-12 m-0\"><ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container></div>\r\n    <div class=\"col-12\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n  </div>\r\n</section>\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 class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\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 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      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#store-plano-skeleton .loader .shimmer{height:100%!important}#store-plano #header{border-radius:8px;background:var(--White, #fff);padding:16px 12px;margin-bottom:10px;display:flex;flex-direction:column}#store-plano #header .title{color:var(--Primary-800, #008edf);font-size:16px;font-weight:600;line-height:24px;display:flex;align-items:center}#store-plano #header .subtitle{color:var(--Gray-600, #475467);font-size:14px;font-weight:500;line-height:20px}#store-plano #header .revision-text{color:var(--Gray-800, #1d2939);font-size:14px;font-weight:500;line-height:20px;margin:0}#store-plano #header .btn.btn-outline{padding:10px!important}#store-plano #body{border-radius:8px;background:#fff;padding:24px}#store-plano #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#store-plano .overview-canvas{max-height:calc(100vh - 160px)}#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}.compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}\n"] }]
+            args: [{ selector: "app-store-plano", providers: [TitleCasePipe, DatePipe], template: "<section [ngClass]=\"{ 'd-none': isPageLoading || editFixture }\" id=\"store-plano\">\r\n  <div id=\"header\" [ngClass]=\"{ 'd-none': !planoData }\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div>\r\n        <h4 class=\"title\">\r\n          <a class=\"me-3\" router>{{ planoData?.storeName }}</a>\r\n          <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n            <path\r\n              d=\"M15 11.2894V16.2894C15 16.7314 14.8244 17.1553 14.5118 17.4679C14.1993 17.7805 13.7754 17.9561 13.3333 17.9561H4.16667C3.72464 17.9561 3.30072 17.7805 2.98816 17.4679C2.67559 17.1553 2.5 16.7314 2.5 16.2894V7.12272C2.5 6.68069 2.67559 6.25677 2.98816 5.94421C3.30072 5.63165 3.72464 5.45605 4.16667 5.45605H9.16667M12.5 2.95605H17.5M17.5 2.95605V7.95605M17.5 2.95605L8.33333 12.1227\"\r\n              stroke=\"#008EDF\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg> -->\r\n        </h4>\r\n        <p class=\"subtitle\">Last updated {{ planoData?.lastUpdate | date : \"medium\" }}</p>\r\n      </div>\r\n      <!-- <div class=\"d-flex justify-content-center align-items-center gap-3\">\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M15.7148 6.45605L9.71484 12.4561L15.7148 18.4561\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n        <p class=\"revision-text\">3/3 Revision: Layout assigned</p>\r\n        <button type=\"button\" class=\"btn btn-outline\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n            <path\r\n              d=\"M9.71484 18.4561L15.7148 12.4561L9.71484 6.45605\"\r\n              stroke=\"#101828\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div> -->\r\n    </div>\r\n    <lib-reactive-select style=\"width: fit-content\" *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\"\r\n      [idField]=\"'_id'\" [nameField]=\"'floorName'\" [data]=\"planoData.floors\"></lib-reactive-select>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': !planoData }\" id=\"body\">\r\n    <div class=\"row mx-0 gap-3 mb-4 w-100\">\r\n      <div 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 ? 'bg-warning' : taskInfo?.planoProgress === 75 ? 'bg-primary' : 'bg-success'\r\n                \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.floorCount }}</b> Layout\r\n        </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> </span>{{ taskStyle.layout.name }}\r\n        </div>\r\n      </div>\r\n      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.fixtureCount }}</b> Fixtures\r\n        </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      <div class=\"col filter-tab\">\r\n        <h3>\r\n          <b>{{ storeMetrics.vmCount }}</b> Visual Merchandise\r\n        </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\r\n    <div id=\"segment-btn\" class=\"w-100 pb-5\">\r\n      <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n        <!-- <button type=\"button\" routerLink=\"/manage/planogram/build-planogram\" class=\"btn btn-primary\">Build</button> -->\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)=\"toggleView('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'\" (click)=\"toggleView('tree')\">\r\n              Tree View\r\n            </button>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"form-check form-switch mt-10\" *ngIf=\"selectedView === 'detail'\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\" [(ngModel)]=\"enableCompare\"  (click)=\"getRevisionDetails($event)\">\r\n        <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n      <div id=\"canvas-card\" class=\"overflow-hidden position-relative overview-canvas\" #canvasContainer [hidden]=\"enableCompare\">\r\n        <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n  \r\n        <!-- Rotate Button -->\r\n        <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n          class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n          (click)=\"rotateCanvas(canvas,90)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" 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        <!-- 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\" stroke=\"#000000\"\r\n            stroke-width=\"0.24000000000000005\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" 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      <div class=\"row\" *ngIf=\"enableCompare\">\r\n        <div class=\"col-md-6\">\r\n            <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"previousSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Staging\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n                        <div class=\"dropdown-item form-check staging-check\"\r\n                             [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n                             (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n                            <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n                                   [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n                                   [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n                                   (click)=\"$event.preventDefault()\">\r\n                            <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"previousFloorData\"  *ngIf=\"previousRenderKey && previousFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n                Published: {{previousFloorData?.createdAt || previousFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\">\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-6\">\r\n          <div *ngIf=\"!previousFloorData\" class=\"currentText\">\r\n              Current Plano\r\n          </div>\r\n            <div class=\"d-flex align-items-center revision-header\"\r\n                *ngIf=\"latestFloorData && previousFloorData\"\r\n                style=\"margin-top: 3%;margin-right: 3%;\">\r\n                <lib-reactive-select\r\n                    class=\"revision-select\"\r\n                    [idField]=\"'_index'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"revisionSelectItems\"\r\n                    [(ngModel)]=\"currentSelect\"\r\n                    (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n                </lib-reactive-select>\r\n                <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Current plano\r\n                </span>\r\n                <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n                        <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                    Staging\r\n                </span>\r\n                <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n                    <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n                            <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n                        </svg>\r\n                    </button>\r\n                    <div ngbDropdownMenu>\r\n                        <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n                        <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n                        <div class=\"dropdown-item form-check staging-check\"\r\n                             [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n                             (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n                            <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n                                   [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n                                   [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n                                   (click)=\"$event.preventDefault()\">\r\n                            <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <lib-plano-comparison [floorData]=\"latestFloorData\"  *ngIf=\"latestRenderKey && latestFloorData\" ></lib-plano-comparison>\r\n            <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n                Published: {{latestFloorData?.createdAt || latestFloorData?.lastUpdate}}\r\n            </div>\r\n            <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n              <div>\r\n                  <div class=\"text-center\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\" >\r\n                          <path d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\" fill=\"#EAECF0\"/>\r\n                          <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\"/>\r\n                          <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\"/>\r\n                          <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\"/>\r\n                          <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\"/>\r\n                          <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"/>\r\n                          </mask>\r\n                          <path d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" fill=\"#6BCAFF\"/>\r\n                          <path d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\" fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\"/>\r\n                          <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\" stroke-width=\"3.98436\" stroke-linecap=\"round\"/>\r\n                          <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\"/>\r\n                          <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\"/>\r\n                          <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\"/>\r\n                          <path d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\" fill=\"white\"/>\r\n                          <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\"/>\r\n                          <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"/>\r\n                          </mask>\r\n                          <path d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\"/>\r\n                          <path d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\" fill=\"#00A3FF\"/>\r\n                      </svg>\r\n                  </div>\r\n                  <div class=\"mainText text-center\">\r\n                      No Previous Revisions\r\n                  </div>\r\n                  <div class=\"subText\">\r\n                      There is no previous revisions available for this planogram\r\n                  </div>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n      <store-plano-tree-view [allFixture]=\"allFixtures\"\r\n        (selectedInstance)=\"onSelectFixtureInTree($event)\"></store-plano-tree-view>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'd-none': planoData }\">\r\n    <div class=\"card-body d-flex justify-content-center align-items-center flex-column h-100 bg-white rounded py-10\">\r\n      <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n      <div class=\"nodatamaintext mt-3\">No data found</div>\r\n      <div class=\"nodatasubtext\">There is no planogram available for this store.</div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<!-----------Edit fixture body----------->\r\n<section [ngClass]=\"{ 'd-none': !editFixture }\">\r\n  <div class=\"header\">\r\n    <div class=\"d-flex align-items-center justify-contents-center gap-5\">\r\n      <button type=\"button\" class=\"btn btn-outline p-3\" (click)=\"onClickBack()\">\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M15.8334 9.99984H4.16675M4.16675 9.99984L10.0001 15.8332M4.16675 9.99984L10.0001 4.1665\"\r\n            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n      <h2 class=\"m-0\">{{ selectedFixtureData?.fixtureName }}</h2>\r\n      <div class=\"badge draft\">{{ selectedFixtureData?.status | titlecase }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"edit-body\" class=\"row w-100\">\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)=\"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)=\"editFixtureSection = 'products'\" [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\"\r\n          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)=\"editFixtureSection = 'vms'\" [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Visual Merchandise\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n      <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-basic-details>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n      <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n      <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"></lib-instance-vms>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n\r\n<section [ngClass]=\"{ 'd-none': !isPageLoading }\" id=\"store-plano-skeleton\">\r\n  <div class=\"row\">\r\n    <div class=\"col-12 m-0\"><ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container></div>\r\n    <div class=\"col-12\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n  </div>\r\n</section>\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 class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\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 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      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#store-plano-skeleton .loader .shimmer{height:100%!important}#store-plano #header{border-radius:8px;background:var(--White, #fff);padding:16px 12px;margin-bottom:10px;display:flex;flex-direction:column}#store-plano #header .title{color:var(--Primary-800, #008edf);font-size:16px;font-weight:600;line-height:24px;display:flex;align-items:center}#store-plano #header .subtitle{color:var(--Gray-600, #475467);font-size:14px;font-weight:500;line-height:20px}#store-plano #header .revision-text{color:var(--Gray-800, #1d2939);font-size:14px;font-weight:500;line-height:20px;margin:0}#store-plano #header .btn.btn-outline{padding:10px!important}#store-plano #body{border-radius:8px;background:#fff;padding:24px}#store-plano #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#store-plano .overview-canvas{height:calc(100vh - 160px)}#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}.compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i5.DatePipe }, { type: i2.ActivatedRoute }, { type: i4.ToastService }, { type: i2$1.PageInfoService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }], propDecorators: { canvasEl: [{
                 type: ViewChild,
                 args: ["baseCanvas", { static: false }]
@@ -74065,6 +74124,7 @@ class TangoStorePlanoModule {
             FormsModule,
             ReactiveFormsModule,
             NgbTooltipModule,
+            NgbDropdownModule,
             InstanceBasicDetailsComponent,
             InstanceProductsComponent,
             InstanceVmsComponent,
@@ -74079,6 +74139,7 @@ class TangoStorePlanoModule {
             FormsModule,
             ReactiveFormsModule,
             NgbTooltipModule,
+            NgbDropdownModule,
             InstanceBasicDetailsComponent,
             InstanceProductsComponent,
             InstanceVmsComponent,
@@ -74095,6 +74156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgbTooltipModule,
+                        NgbDropdownModule,
                         InstanceBasicDetailsComponent,
                         InstanceProductsComponent,
                         InstanceVmsComponent,