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

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

@@ -725,6 +725,11 @@ class StoreBuilderService {
         return this.http.post(`${this.storeBuilderApiUrl}/runVmPlacementQuery`, data);
     }
     // Look Plano Collections
+    /** Whether the current session user may access the Looks feature
+     *  (email present in planostaticdatas `allowedLookUsers`). */
+    getLookAccess() {
+        return this.http.get(`${this.storeBuilderApiUrl}/lookPlanoCollection/access`);
+    }
     getLookPlanoCollectionList(data) {
         return this.http.post(`${this.storeBuilderApiUrl}/lookPlanoCollection/getCollectionList`, data);
     }
@@ -12989,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;
@@ -13204,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) => {
@@ -13447,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}`;
                                 }
                             });
                         }
@@ -13478,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";
@@ -23251,6 +23283,9 @@ class TemplateVmsComponent {
         }
     }
     setPageData() {
+        // When embedded inside the Looks form (looksMode), don't override the parent page's breadcrumb/title.
+        if (this.looksMode)
+            return;
         this.pageInfo.setTitle("Visual Merchandise");
         this.pageInfo.setBreadcrumbs([
             {
@@ -24473,6 +24508,9 @@ class TemplateProductsComponent {
         });
     }
     setPageData() {
+        // When embedded inside the Looks form (looksMode), don't override the parent page's breadcrumb/title.
+        if (this.looksMode)
+            return;
         this.pageInfo.setTitle("Products");
         this.pageInfo.setBreadcrumbs([
             {
@@ -52297,8 +52335,10 @@ class StoreSelectComponent {
                 let hasChanges = false;
                 const valuesToProcess = this.singleSelect ? values.slice(0, 1) : values;
                 valuesToProcess.forEach(val => {
-                    // Find matching option by label (case-insensitive)
-                    const matchedOption = this.options.find(opt => opt.label.toLowerCase() === val.toLowerCase());
+                    // Match by label (store name) OR id (store code), case-insensitive
+                    const needle = val.toLowerCase();
+                    const matchedOption = this.options.find(opt => opt.label.toLowerCase() === needle ||
+                        String(opt.id ?? '').toLowerCase() === needle);
                     if (matchedOption && !this.selectedItems.has(matchedOption.id)) {
                         if (this.singleSelect) {
                             this.selectedItems.clear();
@@ -66993,6 +67033,7 @@ class DeleteTaskComponent {
     sbs;
     gs;
     clientId;
+    taskType = 'fixture';
     storeOptions = [];
     initialStores = [];
     selectedStores = [];
@@ -67028,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');
@@ -67035,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({
@@ -67059,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 {
@@ -67820,6 +67865,8 @@ class StoreExportsComponent {
     storeOptions = [];
     initialStores = [];
     selectedStores = [];
+    selectedRevisionStores = [];
+    revisionName = '';
     starting = null;
     activeJob = null;
     busyInfo = null;
@@ -67832,6 +67879,11 @@ class StoreExportsComponent {
         this.gs = gs;
     }
     ngOnInit() {
+        // Store options come from planograms and don't depend on the client/date filter,
+        // so load them immediately. Previously loadStores() only ran inside the
+        // dataRangeValue subscription, so the list stayed empty (no dropdown, no
+        // type-to-match) whenever that observable didn't emit on this page.
+        this.loadStores();
         this.gs.dataRangeValue
             .pipe(takeUntil(this.destroy$), debounceTime(200), filter$1((data) => !!data), distinctUntilChanged$1())
             .subscribe((data) => {
@@ -67856,6 +67908,12 @@ class StoreExportsComponent {
     onStoresSelected(stores) {
         this.selectedStores = stores;
     }
+    onRevisionStoresSelected(stores) {
+        this.selectedRevisionStores = stores;
+    }
+    get totalSelectedStores() {
+        return this.selectedStores.length + this.selectedRevisionStores.length;
+    }
     onExportMbq() {
         this.runExport('mbq');
     }
@@ -67885,18 +67943,30 @@ class StoreExportsComponent {
     runExport(kind) {
         if (this.isWorking)
             return;
-        if (this.selectedStores.length === 0) {
+        const liveStores = this.selectedStores.map((s) => s.label);
+        const revisionStores = this.selectedRevisionStores.map((s) => s.label);
+        const revisionName = this.revisionName.trim();
+        if (liveStores.length === 0 && revisionStores.length === 0) {
             this.showMessage('Please select at least one store.', 'error');
             return;
         }
-        const storeName = this.selectedStores.map((s) => s.label);
+        if (revisionStores.length > 0 && !revisionName) {
+            this.showMessage('Enter a revision name for the revision stores.', 'error');
+            return;
+        }
+        const payload = { storeName: liveStores };
+        if (revisionStores.length > 0) {
+            payload.revisionStores = revisionStores;
+            payload.revisionName = revisionName;
+        }
+        const totalStores = liveStores.length + revisionStores.length;
         this.busyInfo = null;
         this.activeJob = null;
         this.starting = kind;
         this.message = '';
         const submit$ = kind === 'mbq'
-            ? this.sbs.exportMBQSheetAsync({ storeName })
-            : this.sbs.exportPlanoOrderSheetAsync({ storeName });
+            ? this.sbs.exportMBQSheetAsync(payload)
+            : this.sbs.exportPlanoOrderSheetAsync(payload);
         submit$.subscribe({
             next: (resp) => {
                 this.starting = null;
@@ -67911,7 +67981,7 @@ class StoreExportsComponent {
                     kind,
                     status: 'running',
                     startedAt: new Date().toISOString(),
-                    storeCount: storeName.length,
+                    storeCount: totalStores,
                 };
                 this.startPolling(jobId);
             },
@@ -68005,11 +68075,11 @@ class StoreExportsComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreExportsComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: StoreExportsComponent, selector: "lib-store-exports", ngImport: i0, template: "<section class=\"store-exports p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 700px;\">\r\n    <h5 class=\"mb-1\">Store Exports</h5>\r\n    <p class=\"text-muted small mb-3\">\r\n      Generate per-store fixture exports. Select one or more stores, then choose an export.\r\n      Large exports run in the background and are saved to S3 \u2014 a download link appears here when ready.\r\n    </p>\r\n\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Stores</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    <div class=\"d-flex gap-2 flex-wrap\">\r\n      <button\r\n        class=\"btn btn-primary\"\r\n        (click)=\"onExportMbq()\"\r\n        [disabled]=\"isWorking || selectedStores.length === 0\">\r\n        @if (starting === 'mbq') {\r\n          Starting MBQ...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'mbq') {\r\n          Running MBQ...\r\n        } @else {\r\n          Export MBQ\r\n        }\r\n      </button>\r\n\r\n      <button\r\n        class=\"btn btn-success\"\r\n        (click)=\"onExportOrderSheet()\"\r\n        [disabled]=\"isWorking || selectedStores.length === 0\">\r\n        @if (starting === 'order') {\r\n          Starting Order Sheet...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'order') {\r\n          Running Order Sheet...\r\n        } @else {\r\n          Export Order Sheet\r\n        }\r\n      </button>\r\n    </div>\r\n\r\n    @if (busyInfo) {\r\n      <div class=\"mt-3 alert alert-warning\">\r\n        Another {{ kindLabel(busyInfo.kind) }} export is currently running@if (busyInfo.storeCount) { ({{ busyInfo.storeCount }} store{{ busyInfo.storeCount === 1 ? '' : 's' }}) }@if (busyInfo.startedAt) {, started {{ startedAgo(busyInfo.startedAt) }}}. Please wait until it finishes before starting a new export.\r\n      </div>\r\n    }\r\n\r\n    @if (activeJob) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [class.alert-info]=\"activeJob.status === 'running'\"\r\n        [class.alert-success]=\"activeJob.status === 'succeeded'\"\r\n        [class.alert-danger]=\"activeJob.status === 'failed'\">\r\n        @if (activeJob.status === 'running') {\r\n          <div>\r\n            {{ kindLabel(activeJob.kind) }} export is processing@if (activeJob.storeCount) { ({{ activeJob.storeCount }} store{{ activeJob.storeCount === 1 ? '' : 's' }}) }. Started {{ startedAgo(activeJob.startedAt) }}. Keep this page open \u2014 a download link will appear when it finishes.\r\n          </div>\r\n        } @else if (activeJob.status === 'succeeded' && activeJob.downloadUrl) {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>\r\n              {{ kindLabel(activeJob.kind) }} export ready@if (activeJob.rowCount) { \u2014 {{ activeJob.rowCount }} row{{ activeJob.rowCount === 1 ? '' : 's' }} }.\r\n            </span>\r\n            <div class=\"d-flex gap-2\">\r\n              <a [href]=\"activeJob.downloadUrl\" class=\"btn btn-sm btn-success\" target=\"_blank\" rel=\"noopener\">Download</a>\r\n              <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n            </div>\r\n          </div>\r\n        } @else if (activeJob.status === 'failed') {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>{{ kindLabel(activeJob.kind) }} export failed: {{ activeJob.error || 'Unknown error' }}</span>\r\n            <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (message) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [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: [".store-exports .card{border:1px solid #e0e0e0}\n"], 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: StoreExportsComponent, selector: "lib-store-exports", ngImport: i0, template: "<section class=\"store-exports p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 700px;\">\r\n    <h5 class=\"mb-1\">Store Exports</h5>\r\n    <p class=\"text-muted small mb-3\">\r\n      Generate per-store fixture exports. Select one or more stores, then choose an export.\r\n      Large exports run in the background and are saved to S3 \u2014 a download link appears here when ready.\r\n    </p>\r\n\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Stores \u2014 Manage Planogram (live)</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    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Stores \u2014 from a Revision</label>\r\n      <lib-store-select\r\n        [options]=\"storeOptions\"\r\n        [initialSelected]=\"initialStores\"\r\n        (selectedChange)=\"onRevisionStoresSelected($event)\">\r\n      </lib-store-select>\r\n    </div>\r\n\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Revision name</label>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [(ngModel)]=\"revisionName\"\r\n        name=\"revisionName\"\r\n        autocomplete=\"off\"\r\n        placeholder=\"e.g. Q1-2026 Layout\"\r\n        [disabled]=\"isWorking\" />\r\n      <div class=\"form-text\">\r\n        Applies to the \u201Cfrom a Revision\u201D stores above \u2014 each is exported from its revision with this exact name (stores without it are skipped). Live stores use current data; both sets are combined into one export.\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex gap-2 flex-wrap\">\r\n      <button\r\n        class=\"btn btn-primary\"\r\n        (click)=\"onExportMbq()\"\r\n        [disabled]=\"isWorking || totalSelectedStores === 0\">\r\n        @if (starting === 'mbq') {\r\n          Starting MBQ...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'mbq') {\r\n          Running MBQ...\r\n        } @else {\r\n          Export MBQ\r\n        }\r\n      </button>\r\n\r\n      <button\r\n        class=\"btn btn-success\"\r\n        (click)=\"onExportOrderSheet()\"\r\n        [disabled]=\"isWorking || totalSelectedStores === 0\">\r\n        @if (starting === 'order') {\r\n          Starting Order Sheet...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'order') {\r\n          Running Order Sheet...\r\n        } @else {\r\n          Export Order Sheet\r\n        }\r\n      </button>\r\n    </div>\r\n\r\n    @if (busyInfo) {\r\n      <div class=\"mt-3 alert alert-warning\">\r\n        Another {{ kindLabel(busyInfo.kind) }} export is currently running@if (busyInfo.storeCount) { ({{ busyInfo.storeCount }} store{{ busyInfo.storeCount === 1 ? '' : 's' }}) }@if (busyInfo.startedAt) {, started {{ startedAgo(busyInfo.startedAt) }}}. Please wait until it finishes before starting a new export.\r\n      </div>\r\n    }\r\n\r\n    @if (activeJob) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [class.alert-info]=\"activeJob.status === 'running'\"\r\n        [class.alert-success]=\"activeJob.status === 'succeeded'\"\r\n        [class.alert-danger]=\"activeJob.status === 'failed'\">\r\n        @if (activeJob.status === 'running') {\r\n          <div>\r\n            {{ kindLabel(activeJob.kind) }} export is processing@if (activeJob.storeCount) { ({{ activeJob.storeCount }} store{{ activeJob.storeCount === 1 ? '' : 's' }}) }. Started {{ startedAgo(activeJob.startedAt) }}. Keep this page open \u2014 a download link will appear when it finishes.\r\n          </div>\r\n        } @else if (activeJob.status === 'succeeded' && activeJob.downloadUrl) {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>\r\n              {{ kindLabel(activeJob.kind) }} export ready@if (activeJob.rowCount) { \u2014 {{ activeJob.rowCount }} row{{ activeJob.rowCount === 1 ? '' : 's' }} }.\r\n            </span>\r\n            <div class=\"d-flex gap-2\">\r\n              <a [href]=\"activeJob.downloadUrl\" class=\"btn btn-sm btn-success\" target=\"_blank\" rel=\"noopener\">Download</a>\r\n              <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n            </div>\r\n          </div>\r\n        } @else if (activeJob.status === 'failed') {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>{{ kindLabel(activeJob.kind) }} export failed: {{ activeJob.error || 'Unknown error' }}</span>\r\n            <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (message) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [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: [".store-exports .card{border:1px solid #e0e0e0}\n"], 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.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: StoreExportsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-store-exports', template: "<section class=\"store-exports p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 700px;\">\r\n    <h5 class=\"mb-1\">Store Exports</h5>\r\n    <p class=\"text-muted small mb-3\">\r\n      Generate per-store fixture exports. Select one or more stores, then choose an export.\r\n      Large exports run in the background and are saved to S3 \u2014 a download link appears here when ready.\r\n    </p>\r\n\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Stores</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    <div class=\"d-flex gap-2 flex-wrap\">\r\n      <button\r\n        class=\"btn btn-primary\"\r\n        (click)=\"onExportMbq()\"\r\n        [disabled]=\"isWorking || selectedStores.length === 0\">\r\n        @if (starting === 'mbq') {\r\n          Starting MBQ...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'mbq') {\r\n          Running MBQ...\r\n        } @else {\r\n          Export MBQ\r\n        }\r\n      </button>\r\n\r\n      <button\r\n        class=\"btn btn-success\"\r\n        (click)=\"onExportOrderSheet()\"\r\n        [disabled]=\"isWorking || selectedStores.length === 0\">\r\n        @if (starting === 'order') {\r\n          Starting Order Sheet...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'order') {\r\n          Running Order Sheet...\r\n        } @else {\r\n          Export Order Sheet\r\n        }\r\n      </button>\r\n    </div>\r\n\r\n    @if (busyInfo) {\r\n      <div class=\"mt-3 alert alert-warning\">\r\n        Another {{ kindLabel(busyInfo.kind) }} export is currently running@if (busyInfo.storeCount) { ({{ busyInfo.storeCount }} store{{ busyInfo.storeCount === 1 ? '' : 's' }}) }@if (busyInfo.startedAt) {, started {{ startedAgo(busyInfo.startedAt) }}}. Please wait until it finishes before starting a new export.\r\n      </div>\r\n    }\r\n\r\n    @if (activeJob) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [class.alert-info]=\"activeJob.status === 'running'\"\r\n        [class.alert-success]=\"activeJob.status === 'succeeded'\"\r\n        [class.alert-danger]=\"activeJob.status === 'failed'\">\r\n        @if (activeJob.status === 'running') {\r\n          <div>\r\n            {{ kindLabel(activeJob.kind) }} export is processing@if (activeJob.storeCount) { ({{ activeJob.storeCount }} store{{ activeJob.storeCount === 1 ? '' : 's' }}) }. Started {{ startedAgo(activeJob.startedAt) }}. Keep this page open \u2014 a download link will appear when it finishes.\r\n          </div>\r\n        } @else if (activeJob.status === 'succeeded' && activeJob.downloadUrl) {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>\r\n              {{ kindLabel(activeJob.kind) }} export ready@if (activeJob.rowCount) { \u2014 {{ activeJob.rowCount }} row{{ activeJob.rowCount === 1 ? '' : 's' }} }.\r\n            </span>\r\n            <div class=\"d-flex gap-2\">\r\n              <a [href]=\"activeJob.downloadUrl\" class=\"btn btn-sm btn-success\" target=\"_blank\" rel=\"noopener\">Download</a>\r\n              <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n            </div>\r\n          </div>\r\n        } @else if (activeJob.status === 'failed') {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>{{ kindLabel(activeJob.kind) }} export failed: {{ activeJob.error || 'Unknown error' }}</span>\r\n            <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (message) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [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: [".store-exports .card{border:1px solid #e0e0e0}\n"] }]
+            args: [{ selector: 'lib-store-exports', template: "<section class=\"store-exports p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 700px;\">\r\n    <h5 class=\"mb-1\">Store Exports</h5>\r\n    <p class=\"text-muted small mb-3\">\r\n      Generate per-store fixture exports. Select one or more stores, then choose an export.\r\n      Large exports run in the background and are saved to S3 \u2014 a download link appears here when ready.\r\n    </p>\r\n\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Stores \u2014 Manage Planogram (live)</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    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Stores \u2014 from a Revision</label>\r\n      <lib-store-select\r\n        [options]=\"storeOptions\"\r\n        [initialSelected]=\"initialStores\"\r\n        (selectedChange)=\"onRevisionStoresSelected($event)\">\r\n      </lib-store-select>\r\n    </div>\r\n\r\n    <div class=\"mb-3\">\r\n      <label class=\"form-label\">Revision name</label>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [(ngModel)]=\"revisionName\"\r\n        name=\"revisionName\"\r\n        autocomplete=\"off\"\r\n        placeholder=\"e.g. Q1-2026 Layout\"\r\n        [disabled]=\"isWorking\" />\r\n      <div class=\"form-text\">\r\n        Applies to the \u201Cfrom a Revision\u201D stores above \u2014 each is exported from its revision with this exact name (stores without it are skipped). Live stores use current data; both sets are combined into one export.\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex gap-2 flex-wrap\">\r\n      <button\r\n        class=\"btn btn-primary\"\r\n        (click)=\"onExportMbq()\"\r\n        [disabled]=\"isWorking || totalSelectedStores === 0\">\r\n        @if (starting === 'mbq') {\r\n          Starting MBQ...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'mbq') {\r\n          Running MBQ...\r\n        } @else {\r\n          Export MBQ\r\n        }\r\n      </button>\r\n\r\n      <button\r\n        class=\"btn btn-success\"\r\n        (click)=\"onExportOrderSheet()\"\r\n        [disabled]=\"isWorking || totalSelectedStores === 0\">\r\n        @if (starting === 'order') {\r\n          Starting Order Sheet...\r\n        } @else if (activeJob?.status === 'running' && activeJob?.kind === 'order') {\r\n          Running Order Sheet...\r\n        } @else {\r\n          Export Order Sheet\r\n        }\r\n      </button>\r\n    </div>\r\n\r\n    @if (busyInfo) {\r\n      <div class=\"mt-3 alert alert-warning\">\r\n        Another {{ kindLabel(busyInfo.kind) }} export is currently running@if (busyInfo.storeCount) { ({{ busyInfo.storeCount }} store{{ busyInfo.storeCount === 1 ? '' : 's' }}) }@if (busyInfo.startedAt) {, started {{ startedAgo(busyInfo.startedAt) }}}. Please wait until it finishes before starting a new export.\r\n      </div>\r\n    }\r\n\r\n    @if (activeJob) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [class.alert-info]=\"activeJob.status === 'running'\"\r\n        [class.alert-success]=\"activeJob.status === 'succeeded'\"\r\n        [class.alert-danger]=\"activeJob.status === 'failed'\">\r\n        @if (activeJob.status === 'running') {\r\n          <div>\r\n            {{ kindLabel(activeJob.kind) }} export is processing@if (activeJob.storeCount) { ({{ activeJob.storeCount }} store{{ activeJob.storeCount === 1 ? '' : 's' }}) }. Started {{ startedAgo(activeJob.startedAt) }}. Keep this page open \u2014 a download link will appear when it finishes.\r\n          </div>\r\n        } @else if (activeJob.status === 'succeeded' && activeJob.downloadUrl) {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>\r\n              {{ kindLabel(activeJob.kind) }} export ready@if (activeJob.rowCount) { \u2014 {{ activeJob.rowCount }} row{{ activeJob.rowCount === 1 ? '' : 's' }} }.\r\n            </span>\r\n            <div class=\"d-flex gap-2\">\r\n              <a [href]=\"activeJob.downloadUrl\" class=\"btn btn-sm btn-success\" target=\"_blank\" rel=\"noopener\">Download</a>\r\n              <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n            </div>\r\n          </div>\r\n        } @else if (activeJob.status === 'failed') {\r\n          <div class=\"d-flex align-items-center justify-content-between gap-2 flex-wrap\">\r\n            <span>{{ kindLabel(activeJob.kind) }} export failed: {{ activeJob.error || 'Unknown error' }}</span>\r\n            <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"dismissResult()\">Dismiss</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (message) {\r\n      <div\r\n        class=\"mt-3 alert\"\r\n        [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: [".store-exports .card{border:1px solid #e0e0e0}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }] });
 
 class ModifyFixtureNumbersComponent {
@@ -68401,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,
             })),
         };
@@ -68796,6 +68868,11 @@ class LookPlanoCollectionComponent {
     loading = false;
     items = [];
     totalItems = 0;
+    // Access control — only emails in planostaticdatas `allowedLookUsers` may
+    // use the Looks feature. accessChecked gates the initial render so we don't
+    // flash the list before the check resolves.
+    accessChecked = false;
+    allowed = false;
     searchTerm = '';
     limit = 10;
     offset = 1;
@@ -68811,8 +68888,12 @@ class LookPlanoCollectionComponent {
         this.toast = toast;
         this.pageInfo = pageInfo;
     }
-    ngOnInit() {
+    async ngOnInit() {
         this.setPageData();
+        // Gate the whole page on the allowlist before wiring any data loads.
+        await this.checkAccess();
+        if (!this.allowed)
+            return;
         this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             const headerFilters = JSON.parse(localStorage.getItem('header-filters') || '{}');
             this.clientId = data?.client || headerFilters?.client;
@@ -68829,6 +68910,20 @@ class LookPlanoCollectionComponent {
             }
         });
     }
+    /** Resolve whether the session user may access Looks. Never throws. */
+    async checkAccess() {
+        try {
+            const res = await lastValueFrom(this.builderService.getLookAccess());
+            this.allowed = !!res?.data?.allowed;
+        }
+        catch (err) {
+            console.log('@@ ~ checkAccess [ERR]:', err);
+            this.allowed = false;
+        }
+        finally {
+            this.accessChecked = true;
+        }
+    }
     setPageData() {
         this.pageInfo.setTitle('Looks');
         this.pageInfo.setBreadcrumbs([
@@ -68839,7 +68934,6 @@ class LookPlanoCollectionComponent {
                 isSeparator: false,
             },
             { title: '', path: '', isActive: false, isSeparator: true },
-            { title: 'Looks', path: '/manage/planogram/looks', isActive: true, isSeparator: false },
         ]);
     }
     async loadList() {
@@ -68922,11 +69016,11 @@ class LookPlanoCollectionComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LookPlanoCollectionComponent, deps: [{ token: i2.Router }, { token: i1$1.NgbModal }, { token: i2$1.GlobalStateService }, { token: StoreBuilderService }, { token: i4.ToastService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LookPlanoCollectionComponent, selector: "lib-look-plano-collection", ngImport: i0, template: "<section class=\"looks-wrapper\">\r\n  <div class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n        <div>\r\n          <h4>Looks</h4>\r\n          <span>{{ totalItems }} - Total Look Collections</span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <div style=\"position: relative\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"searchTerm\"\r\n              (change)=\"onSearch()\"\r\n              style=\"padding-left: 3rem; padding-right: 3rem\"\r\n              class=\"form-control\"\r\n              name=\"search\"\r\n              autocomplete=\"off\"\r\n              placeholder=\"Search by name\"\r\n            />\r\n            <span class=\"search-icon\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n              </svg>\r\n            </span>\r\n            <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></circle>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"createNew()\">+ New Look Collection</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Loading -->\r\n      <div *ngIf=\"loading\" class=\"text-center text-muted py-10\">Loading\u2026</div>\r\n\r\n      <!-- Empty state -->\r\n      <div *ngIf=\"!loading && items.length === 0\" class=\"text-center text-muted py-10\">\r\n        <div class=\"mb-3\">No Look collections yet.</div>\r\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"createNew()\">Create your first Look collection</button>\r\n      </div>\r\n\r\n      <!-- Table -->\r\n      <div class=\"table-responsive\" *ngIf=\"!loading && items.length > 0\">\r\n        <table class=\"table table-row-dashed align-middle gs-0 gy-3\">\r\n          <thead>\r\n            <tr class=\"fw-bolder text-muted text-uppercase fs-7\">\r\n              <th>Name</th>\r\n              <th>Description</th>\r\n              <th class=\"text-end\">Looks</th>\r\n              <th>Created By</th>\r\n              <th>Created At</th>\r\n              <th class=\"text-end\">Action</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of items; trackBy: trackById\">\r\n              <td>\r\n                <a class=\"text-dark fw-bold text-hover-primary cursor-pointer\" (click)=\"edit(item)\">{{ item.name }}</a>\r\n              </td>\r\n              <td>{{ item.description || '\u2014' }}</td>\r\n              <td class=\"text-end\">{{ item.looksCount || 0 }}</td>\r\n              <td>{{ item.createdByName || '\u2014' }}</td>\r\n              <td>{{ item.createdAt | date: 'mediumDate' }}</td>\r\n              <td class=\"text-end\">\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-primary me-2\" (click)=\"edit(item)\">Edit</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light me-2\" (click)=\"duplicate(item)\">Duplicate</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger\" (click)=\"confirmDelete(item)\">Delete</button>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".looks-wrapper .search-icon{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:#667085;pointer-events:none}.looks-wrapper .clear-search{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);background:transparent;border:0;padding:0;line-height:0}.looks-wrapper .table-responsive{min-height:420px}.looks-wrapper .cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LookPlanoCollectionComponent, selector: "lib-look-plano-collection", ngImport: i0, template: "<section class=\"looks-wrapper\">\r\n  <!-- Checking access -->\r\n  <div *ngIf=\"!accessChecked\" class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12 text-center text-muted py-10\">Checking access\u2026</div>\r\n  </div>\r\n\r\n  <!-- Access denied -->\r\n  <div *ngIf=\"accessChecked && !allowed\" class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"access-denied text-center py-10\">\r\n        <div class=\"access-denied-icon mb-4\">\r\n          <i class=\"bi bi-shield-lock\"></i>\r\n        </div>\r\n        <h3 class=\"mb-2\">Access denied</h3>\r\n        <p class=\"text-muted mb-0\">\r\n          You don't have permission to access Looks. Contact your administrator\r\n          to be added to the allowed users list.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"accessChecked && allowed\" class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n        <div>\r\n          <h4>Looks</h4>\r\n          <span>{{ totalItems }} - Total Look Collections</span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <div style=\"position: relative\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"searchTerm\"\r\n              (change)=\"onSearch()\"\r\n              style=\"padding-left: 3rem; padding-right: 3rem\"\r\n              class=\"form-control\"\r\n              name=\"search\"\r\n              autocomplete=\"off\"\r\n              placeholder=\"Search by name\"\r\n            />\r\n            <span class=\"search-icon\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n              </svg>\r\n            </span>\r\n            <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></circle>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"createNew()\">+ New Look Collection</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Loading -->\r\n      <div *ngIf=\"loading\" class=\"text-center text-muted py-10\">Loading\u2026</div>\r\n\r\n      <!-- Empty state -->\r\n      <div *ngIf=\"!loading && items.length === 0\" class=\"text-center text-muted py-10\">\r\n        <div class=\"mb-3\">No Look collections yet.</div>\r\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"createNew()\">Create your first Look collection</button>\r\n      </div>\r\n\r\n      <!-- Table -->\r\n      <div class=\"table-responsive\" *ngIf=\"!loading && items.length > 0\">\r\n        <table class=\"table table-row-dashed align-middle gs-0 gy-3\">\r\n          <thead>\r\n            <tr class=\"fw-bolder text-muted text-uppercase fs-7\">\r\n              <th>Name</th>\r\n              <th>Description</th>\r\n              <th class=\"text-end\">Looks</th>\r\n              <th>Created By</th>\r\n              <th>Created At</th>\r\n              <th class=\"text-end\">Action</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of items; trackBy: trackById\">\r\n              <td>\r\n                <a class=\"text-dark fw-bold text-hover-primary cursor-pointer\" (click)=\"edit(item)\">{{ item.name }}</a>\r\n                <span *ngIf=\"item.isActive\" class=\"badge badge-light-success ms-2 active-look-badge\">\r\n                  <span class=\"active-dot\"></span>Active\r\n                </span>\r\n              </td>\r\n              <td>{{ item.description || '\u2014' }}</td>\r\n              <td class=\"text-end\">{{ item.looksCount || 0 }}</td>\r\n              <td>{{ item.createdByName || '\u2014' }}</td>\r\n              <td>{{ item.createdAt | date: 'mediumDate' }}</td>\r\n              <td class=\"text-end\">\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-primary me-2\" (click)=\"edit(item)\">Edit</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light me-2\" (click)=\"duplicate(item)\">Duplicate</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger\" (click)=\"confirmDelete(item)\">Delete</button>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".looks-wrapper .search-icon{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:#667085;pointer-events:none}.looks-wrapper .clear-search{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);background:transparent;border:0;padding:0;line-height:0}.looks-wrapper .table-responsive{min-height:420px}.looks-wrapper .cursor-pointer{cursor:pointer}.looks-wrapper .access-denied .access-denied-icon i{font-size:48px;color:#ef4444;line-height:1}.looks-wrapper .active-look-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:16px;color:#15803d;background:#dcfce7;border:1px solid #86efac;vertical-align:middle}.looks-wrapper .active-look-badge .active-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LookPlanoCollectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-look-plano-collection', template: "<section class=\"looks-wrapper\">\r\n  <div class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n        <div>\r\n          <h4>Looks</h4>\r\n          <span>{{ totalItems }} - Total Look Collections</span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <div style=\"position: relative\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"searchTerm\"\r\n              (change)=\"onSearch()\"\r\n              style=\"padding-left: 3rem; padding-right: 3rem\"\r\n              class=\"form-control\"\r\n              name=\"search\"\r\n              autocomplete=\"off\"\r\n              placeholder=\"Search by name\"\r\n            />\r\n            <span class=\"search-icon\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n              </svg>\r\n            </span>\r\n            <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></circle>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"createNew()\">+ New Look Collection</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Loading -->\r\n      <div *ngIf=\"loading\" class=\"text-center text-muted py-10\">Loading\u2026</div>\r\n\r\n      <!-- Empty state -->\r\n      <div *ngIf=\"!loading && items.length === 0\" class=\"text-center text-muted py-10\">\r\n        <div class=\"mb-3\">No Look collections yet.</div>\r\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"createNew()\">Create your first Look collection</button>\r\n      </div>\r\n\r\n      <!-- Table -->\r\n      <div class=\"table-responsive\" *ngIf=\"!loading && items.length > 0\">\r\n        <table class=\"table table-row-dashed align-middle gs-0 gy-3\">\r\n          <thead>\r\n            <tr class=\"fw-bolder text-muted text-uppercase fs-7\">\r\n              <th>Name</th>\r\n              <th>Description</th>\r\n              <th class=\"text-end\">Looks</th>\r\n              <th>Created By</th>\r\n              <th>Created At</th>\r\n              <th class=\"text-end\">Action</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of items; trackBy: trackById\">\r\n              <td>\r\n                <a class=\"text-dark fw-bold text-hover-primary cursor-pointer\" (click)=\"edit(item)\">{{ item.name }}</a>\r\n              </td>\r\n              <td>{{ item.description || '\u2014' }}</td>\r\n              <td class=\"text-end\">{{ item.looksCount || 0 }}</td>\r\n              <td>{{ item.createdByName || '\u2014' }}</td>\r\n              <td>{{ item.createdAt | date: 'mediumDate' }}</td>\r\n              <td class=\"text-end\">\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-primary me-2\" (click)=\"edit(item)\">Edit</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light me-2\" (click)=\"duplicate(item)\">Duplicate</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger\" (click)=\"confirmDelete(item)\">Delete</button>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".looks-wrapper .search-icon{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:#667085;pointer-events:none}.looks-wrapper .clear-search{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);background:transparent;border:0;padding:0;line-height:0}.looks-wrapper .table-responsive{min-height:420px}.looks-wrapper .cursor-pointer{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-look-plano-collection', template: "<section class=\"looks-wrapper\">\r\n  <!-- Checking access -->\r\n  <div *ngIf=\"!accessChecked\" class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12 text-center text-muted py-10\">Checking access\u2026</div>\r\n  </div>\r\n\r\n  <!-- Access denied -->\r\n  <div *ngIf=\"accessChecked && !allowed\" class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"access-denied text-center py-10\">\r\n        <div class=\"access-denied-icon mb-4\">\r\n          <i class=\"bi bi-shield-lock\"></i>\r\n        </div>\r\n        <h3 class=\"mb-2\">Access denied</h3>\r\n        <p class=\"text-muted mb-0\">\r\n          You don't have permission to access Looks. Contact your administrator\r\n          to be added to the allowed users list.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"accessChecked && allowed\" class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n        <div>\r\n          <h4>Looks</h4>\r\n          <span>{{ totalItems }} - Total Look Collections</span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <div style=\"position: relative\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"searchTerm\"\r\n              (change)=\"onSearch()\"\r\n              style=\"padding-left: 3rem; padding-right: 3rem\"\r\n              class=\"form-control\"\r\n              name=\"search\"\r\n              autocomplete=\"off\"\r\n              placeholder=\"Search by name\"\r\n            />\r\n            <span class=\"search-icon\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n              </svg>\r\n            </span>\r\n            <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></circle>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"createNew()\">+ New Look Collection</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Loading -->\r\n      <div *ngIf=\"loading\" class=\"text-center text-muted py-10\">Loading\u2026</div>\r\n\r\n      <!-- Empty state -->\r\n      <div *ngIf=\"!loading && items.length === 0\" class=\"text-center text-muted py-10\">\r\n        <div class=\"mb-3\">No Look collections yet.</div>\r\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"createNew()\">Create your first Look collection</button>\r\n      </div>\r\n\r\n      <!-- Table -->\r\n      <div class=\"table-responsive\" *ngIf=\"!loading && items.length > 0\">\r\n        <table class=\"table table-row-dashed align-middle gs-0 gy-3\">\r\n          <thead>\r\n            <tr class=\"fw-bolder text-muted text-uppercase fs-7\">\r\n              <th>Name</th>\r\n              <th>Description</th>\r\n              <th class=\"text-end\">Looks</th>\r\n              <th>Created By</th>\r\n              <th>Created At</th>\r\n              <th class=\"text-end\">Action</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of items; trackBy: trackById\">\r\n              <td>\r\n                <a class=\"text-dark fw-bold text-hover-primary cursor-pointer\" (click)=\"edit(item)\">{{ item.name }}</a>\r\n                <span *ngIf=\"item.isActive\" class=\"badge badge-light-success ms-2 active-look-badge\">\r\n                  <span class=\"active-dot\"></span>Active\r\n                </span>\r\n              </td>\r\n              <td>{{ item.description || '\u2014' }}</td>\r\n              <td class=\"text-end\">{{ item.looksCount || 0 }}</td>\r\n              <td>{{ item.createdByName || '\u2014' }}</td>\r\n              <td>{{ item.createdAt | date: 'mediumDate' }}</td>\r\n              <td class=\"text-end\">\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-primary me-2\" (click)=\"edit(item)\">Edit</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light me-2\" (click)=\"duplicate(item)\">Duplicate</button>\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger\" (click)=\"confirmDelete(item)\">Delete</button>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".looks-wrapper .search-icon{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:#667085;pointer-events:none}.looks-wrapper .clear-search{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);background:transparent;border:0;padding:0;line-height:0}.looks-wrapper .table-responsive{min-height:420px}.looks-wrapper .cursor-pointer{cursor:pointer}.looks-wrapper .access-denied .access-denied-icon i{font-size:48px;color:#ef4444;line-height:1}.looks-wrapper .active-look-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:16px;color:#15803d;background:#dcfce7;border:1px solid #86efac;vertical-align:middle}.looks-wrapper .active-look-badge .active-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0}\n"] }]
         }], ctorParameters: () => [{ type: i2.Router }, { type: i1$1.NgbModal }, { type: i2$1.GlobalStateService }, { type: StoreBuilderService }, { type: i4.ToastService }, { type: i2$1.PageInfoService }] });
 
 class SearchableSelectComponent {
@@ -69297,6 +69391,10 @@ class LookPlanoCollectionFormComponent {
     isNew = true;
     loading = false;
     saving = false;
+    // Access control — mirrors the Looks list page. Only emails in
+    // planostaticdatas `allowedLookUsers` may open the form.
+    accessChecked = false;
+    allowed = false;
     form;
     selectedLookIndex = -1;
     selectedSlotIndex = -1;
@@ -69773,9 +69871,13 @@ class LookPlanoCollectionFormComponent {
         this.pageInfo = pageInfo;
         this.planoDataService = planoDataService;
     }
-    ngOnInit() {
+    async ngOnInit() {
         this.setPageData();
         this.initForm();
+        // Gate on the allowlist before wiring any data loads / subscriptions.
+        await this.checkAccess();
+        if (!this.allowed)
+            return;
         // Listen to the shared fixtureTemplateDetails — when the embedded
         // TemplateProducts/TemplateVms components push edits back into the
         // BehaviorSubject, persist a snapshot under the active slot + library.
@@ -69822,6 +69924,20 @@ class LookPlanoCollectionFormComponent {
             replaceUrl: true,
         });
     }
+    /** Resolve whether the session user may access Looks. Never throws. */
+    async checkAccess() {
+        try {
+            const res = await lastValueFrom(this.builderService.getLookAccess());
+            this.allowed = !!res?.data?.allowed;
+        }
+        catch (err) {
+            console.log('@@ ~ checkAccess [ERR]:', err);
+            this.allowed = false;
+        }
+        finally {
+            this.accessChecked = true;
+        }
+    }
     setPageData() {
         this.pageInfo.setTitle('Look Collection');
         this.pageInfo.setBreadcrumbs([
@@ -69829,7 +69945,6 @@ class LookPlanoCollectionFormComponent {
             { title: '', path: '', isActive: false, isSeparator: true },
             { title: 'Looks', path: '/manage/planogram/looks', isActive: false, isSeparator: false },
             { title: '', path: '', isActive: false, isSeparator: true },
-            { title: 'Edit', path: '', isActive: true, isSeparator: false },
         ]);
     }
     initForm() {
@@ -70706,11 +70821,11 @@ class LookPlanoCollectionFormComponent {
         this.planoDataService.fixtureTemplateDetails.next(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LookPlanoCollectionFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i2$1.GlobalStateService }, { token: StoreBuilderService }, { token: i4.ToastService }, { token: i2$1.PageInfoService }, { token: PlanoDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LookPlanoCollectionFormComponent, selector: "lib-look-plano-collection-form", ngImport: i0, template: "<section class=\"look-form\">\r\n  <!-- Top bar (bound to the outer form) -->\r\n  <div class=\"card p-4 mb-4\" [formGroup]=\"form\">\r\n    <div class=\"row align-items-end\">\r\n      <div class=\"col-md-4\">\r\n        <label class=\"form-label fw-bold\">Name *</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"e.g. Master Look Plan FY26\" />\r\n      </div>\r\n      <div class=\"col-md-5\">\r\n        <label class=\"form-label fw-bold\">Description</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"description\" placeholder=\"Optional description\" />\r\n      </div>\r\n      <div class=\"col-md-1 text-center\">\r\n        <label class=\"form-label fw-bold d-block\">Active</label>\r\n        <input type=\"checkbox\" class=\"form-check-input\" formControlName=\"isActive\" />\r\n      </div>\r\n      <div class=\"col-md-2 text-end\">\r\n        <button type=\"button\" class=\"btn btn-light me-2\" (click)=\"cancel()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"saving\" (click)=\"save()\">\r\n          {{ saving ? 'Saving\u2026' : 'Save' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Three-pane editor -->\r\n  <div class=\"row mx-0 g-3\">\r\n    <!-- Left: Looks list (no form binding needed \u2014 just navigation) -->\r\n    <div class=\"col-md-3\">\r\n      <div class=\"card p-3 h-100\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n          <h6 class=\"m-0\">MBQ Bucket - Fixture Combinations</h6>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"addLook()\">+ Add Look</button>\r\n        </div>\r\n        <div *ngIf=\"looks.length === 0\" class=\"text-muted small\">No looks yet. Add one to start.</div>\r\n        <div class=\"looks-tree\">\r\n          <div\r\n            *ngFor=\"let look of looks.controls; let i = index; trackBy: trackByIndex\"\r\n            class=\"look-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n            [class.selected]=\"selectedLookIndex === i\"\r\n            [style.background-color]=\"bucketColor($any(look))\"\r\n            (click)=\"selectLook(i)\"\r\n          >\r\n            <span class=\"d-flex align-items-center gap-2 text-truncate\">\r\n              <span class=\"bucket-dot\" [style.background-color]=\"bucketColor($any(look))\"></span>\r\n              <span class=\"text-truncate\">{{ lookTitle($any(look)) }}</span>\r\n              <ng-container *ngIf=\"fixtureTypeBadge($any(look)) as ftb\">\r\n                <span class=\"fixture-type-badge\" [ngClass]=\"ftb.cls\">{{ ftb.label }}</span>\r\n              </ng-container>\r\n            </span>\r\n            <span class=\"look-row-actions\">\r\n              <button type=\"button\" class=\"row-action-btn duplicate\" title=\"Duplicate look\"\r\n                (click)=\"$event.stopPropagation(); duplicateLook(i)\">\r\n                <i class=\"bi bi-files\"></i>\r\n              </button>\r\n              <button type=\"button\" class=\"row-action-btn remove\" title=\"Remove look\"\r\n                (click)=\"$event.stopPropagation(); removeLook(i)\">\r\n                <i class=\"bi bi-trash3\"></i>\r\n              </button>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Centre: selected Look metadata + slots -->\r\n    <div class=\"col-md-3\">\r\n      <ng-container *ngIf=\"selectedLookGroup as lookGroup; else noLook\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"lookGroup\">\r\n          <h6 class=\"mb-3\">Fixture Combination Details</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">MBQ bucket</label>\r\n              <lib-searchable-select\r\n                [items]=\"mbqBucketItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select MBQ bucket\"\r\n                formControlName=\"mbqBucket\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture count *</label>\r\n              <input type=\"number\" min=\"0\" max=\"30\" class=\"form-control form-control-sm\" formControlName=\"fixtureCount\" />\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">CAD Header Varients</label>\r\n              <lib-chips-input\r\n                class=\"cad-header-variants-input\"\r\n                formControlName=\"cadHeaderVariants\"\r\n                placeholder=\"Type a variant and press Enter\">\r\n              </lib-chips-input>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Positions</label>\r\n              <multiselect-chip-dropdown\r\n                [items]=\"fixtureTypeOptions\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                placeholder=\"Select fixture position\"\r\n                formControlName=\"fixtureType\">\r\n              </multiselect-chip-dropdown>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Fixtures</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addSlot()\">+ Add Fixture</button>\r\n          </div>\r\n          <div class=\"slots-list\">\r\n            <div\r\n              *ngFor=\"let slot of (selectedSlotsArray?.controls || []); let s = index; trackBy: trackByIndex\"\r\n              class=\"slot-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n              [class.selected]=\"selectedSlotIndex === s\"\r\n              (click)=\"selectSlot(s)\"\r\n            >\r\n              <div class=\"d-flex flex-column\">\r\n                <span class=\"fw-bold small\">\r\n                  Fixture {{ $any(slot).get('slotIndex')?.value }} \u2014 {{ $any(slot).get('slotType')?.value }}\r\n                </span>\r\n                <span class=\"text-muted small\">\r\n                  {{ $any(slot).get('brand')?.value || '(no brand)' }} \u00B7\r\n                  {{ $any(slot).get('fixtureLevelZone')?.value || '(no zone)' }}\r\n                </span>\r\n              </div>\r\n              <button type=\"button\" class=\"btn btn-sm btn-light-danger ms-2\" (click)=\"$event.stopPropagation(); removeSlot(s)\">\u00D7</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noLook>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select or add a Look to edit it.</div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Right: selected slot \u2014 placements editor -->\r\n    <div class=\"col-md-6\">\r\n      <ng-container *ngIf=\"selectedSlotGroup as slotGroup; else noSlot\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"slotGroup\">\r\n          <h6 class=\"mb-3\">Fixture {{ selectedSlotIndex + 1 }} - Definition</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small text-muted\">Slot index (auto)</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [value]=\"selectedSlotIndex + 1\" readonly disabled />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture Type</label>\r\n              <select class=\"form-select form-select-sm\" formControlName=\"slotType\">\r\n                <option *ngFor=\"let opt of availableSlotTypes\" [value]=\"opt.id\">{{ opt.name }}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Brand</label>\r\n              <lib-searchable-select\r\n                [items]=\"brandItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select brand\"\r\n                formControlName=\"brand\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Header</label>\r\n              <lib-searchable-select\r\n                [items]=\"fixtureHeaderItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select fixture header\"\r\n                formControlName=\"fixtureLevelZone\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Templates</label>\r\n              <multiselect-chip-dropdown\r\n                class=\"fixture-libraries-select\"\r\n                [items]=\"fixtureLibraryItemsForSlot\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                [search]=\"true\"\r\n                searchField=\"name\"\r\n                placeholder=\"Select fixture templates\"\r\n                formControlName=\"fixtureLibraryRefs\">\r\n              </multiselect-chip-dropdown>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value === 'eurocenter'\">\r\n                Showing floor fixtures (eurocenter slot).\r\n              </small>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value !== 'eurocenter'\">\r\n                Showing wall fixtures (shelf slot).\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Look and Visual Merchandising Placements</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addPlacement()\">+ Add placement</button>\r\n          </div>\r\n          <div *ngIf=\"(selectedPlacements?.length || 0) === 0\" class=\"text-muted small mb-2\">\r\n            No placements yet. Click <strong>+ Add placement</strong> to add one.\r\n          </div>\r\n          <div class=\"placements-scroll\" formArrayName=\"placements\">\r\n            <div\r\n              *ngFor=\"let p of (selectedPlacements?.controls || []); let pi = index; trackBy: trackByIndex\"\r\n              class=\"placement-row mb-2\"\r\n              [formGroupName]=\"pi\"\r\n            >\r\n              <div class=\"d-flex align-items-start gap-2 placement-fields\">\r\n                <div class=\"ph-field\">\r\n                  <select class=\"form-select form-select-sm\" formControlName=\"kind\">\r\n                    <option value=\"pid\">Product Merchandising</option>\r\n                    <option value=\"vm\">Visual Merchandising</option>\r\n                  </select>\r\n                </div>\r\n\r\n                <!-- Visual Merchandising rows: VM Type (single) + VM Artwork (single) -->\r\n                <ng-container *ngIf=\"$any(p).get('kind')?.value === 'vm'; else pidInputs\">\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmTypeOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Type\"\r\n                      formControlName=\"position\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmArtworkOptionsFor($any(p).get('position')?.value)\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Artwork\"\r\n                      formControlName=\"rawValue\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- Product Merchandising rows: Top/Mid/Bottom position + multi-select product/SKU -->\r\n                <ng-template #pidInputs>\r\n                  <div class=\"ph-field\">\r\n                    <select class=\"form-select form-select-sm\" formControlName=\"position\">\r\n                      <option value=\"\">Position</option>\r\n                      <option value=\"Top\">Top</option>\r\n                      <option value=\"Mid\">Mid</option>\r\n                      <option value=\"Bottom\">Bottom</option>\r\n                    </select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"productOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      [multiple]=\"true\"\r\n                      placeholder=\"Product / SKU\"\r\n                      formControlName=\"rawValues\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger ph-remove\" (click)=\"removePlacement(pi)\">\u00D7</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSlot>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select a fixture slot to edit placements.</div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Per-slot Fixture Library Configuration card -->\r\n  <ng-container *ngIf=\"selectedSlotGroup as slotGroupForMap\">\r\n    <div class=\"card p-4 mt-4 library-config-card\" [formGroup]=\"slotGroupForMap\">\r\n      <div class=\"mb-4\">\r\n        <h5 class=\"form-label d-block mb-3\">Fixture library</h5>\r\n        <div class=\"library-chips\">\r\n          <button\r\n            *ngFor=\"let lib of selectedSlotLibrariesForDropdown\"\r\n            type=\"button\"\r\n            class=\"library-chip\"\r\n            [class.active]=\"selectedLibraryIdInMap === lib.id\"\r\n            (click)=\"onLibraryMapSelect(selectedLibraryIdInMap === lib.id ? '' : lib.id)\">\r\n            {{ lib.name }}\r\n          </button>\r\n        </div>\r\n        <small *ngIf=\"selectedSlotLibrariesForDropdown.length === 0\" class=\"text-muted\">\r\n          No libraries linked to this slot yet. Add some in the \"Fixture libraries\" multiselect above.\r\n        </small>\r\n      </div>\r\n\r\n      <div *ngIf=\"loadingLibraryDetails\" class=\"text-muted\">Loading fixture details\u2026</div>\r\n\r\n      <!--\r\n        Use *ngFor + trackBy keyed on (look, slot, library) so Angular treats\r\n        a switch as a new item \u2014 that forces the embedded template-products\r\n        / template-vms components to remount and rerun their ngOnInit\r\n        (otherwise their `isPageLoading` guard skips the form rebuild).\r\n      -->\r\n      <ng-container *ngFor=\"let _ of embeddedHostKeys; trackBy: trackByEmbeddedKey\">\r\n        <ul class=\"nav nav-tabs custom-tabs mb-3\">\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'products'\"\r\n              (click)=\"embeddedTab = 'products'\">Product Merchandising</button>\r\n          </li>\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'vms'\"\r\n              (click)=\"embeddedTab = 'vms'\">Visual Merchandising</button>\r\n          </li>\r\n        </ul>\r\n\r\n        <div *ngIf=\"embeddedTab === 'products'\">\r\n          <lib-template-products [looksMode]=\"true\"></lib-template-products>\r\n        </div>\r\n        <div *ngIf=\"embeddedTab === 'vms'\">\r\n          <lib-template-vms [looksMode]=\"true\"></lib-template-vms>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</section>\r\n", styles: [".look-form .col-md-3>.card,.look-form .col-md-6>.card{display:flex!important;flex-direction:column;height:85vh!important;min-height:720px}.look-form .looks-tree,.look-form .slots-list,.look-form .placements-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.look-form .look-row,.look-form .slot-row{cursor:pointer;border:1px solid transparent;background:#f9fafb;transition:filter .15s ease,box-shadow .15s ease,border-color .15s ease}.look-form .look-row:hover,.look-form .slot-row:hover{filter:brightness(.96)}.look-form .look-row.selected,.look-form .slot-row.selected{filter:brightness(.96);outline:1px solid rgba(14,165,233,.55);outline-offset:-1px}.look-form .bucket-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}.look-form .look-row-actions{flex-shrink:0;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s ease}.look-form .look-row-actions .row-action-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;transition:background-color .15s ease,color .15s ease}.look-form .look-row-actions .row-action-btn i{font-size:13px;line-height:1}.look-form .look-row-actions .row-action-btn:hover{background:#fff}.look-form .look-row-actions .row-action-btn.duplicate:hover{color:#0ea5e9}.look-form .look-row-actions .row-action-btn.remove:hover{color:#ef4444}.look-form .look-row:hover .look-row-actions,.look-form .look-row.selected .look-row-actions{opacity:1}.look-form .fixture-type-badge{display:inline-block;flex-shrink:0;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:600;line-height:14px;letter-spacing:.2px;border:1px solid transparent;white-space:nowrap}.look-form .fixture-type-badge.badge-wall{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.look-form .fixture-type-badge.badge-floor{background:#fed7aa;color:#9a3412;border-color:#fdba74}.look-form .fixture-type-badge.badge-mixed{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}.look-form .fixture-libraries-select{display:block}.look-form .fixture-libraries-select ::ng-deep .multiselect-container{align-items:flex-start}.look-form .fixture-libraries-select ::ng-deep .chip-list{max-height:84px;overflow-y:auto;padding-right:4px}.look-form .cad-header-variants-input{display:block}.look-form .cad-header-variants-input ::ng-deep .chips-input{max-height:84px;overflow-y:auto;align-content:flex-start;padding-right:4px}.look-form .placement-row .placement-fields .ph-field{flex:1 1 0;min-width:0}.look-form .placement-row .placement-fields .ph-remove{flex:0 0 auto}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multiselect-container{padding:4px 10px;min-height:31px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .chip-list{min-height:21px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multi-placeholder{font-size:13px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.look-form .library-config-card .library-chips{display:flex;flex-wrap:wrap;gap:8px}.look-form .library-config-card .library-chip{background:#f1f5f9;border:1px solid #cbd5e1;color:#1e293b;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.look-form .library-config-card .library-chip:hover{background:#e2e8f0;border-color:#94a3b8}.look-form .library-config-card .library-chip.active{background:#0ea5e9;border-color:#0284c7;color:#fff}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col-8>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products input[readonly]{background-color:var(--bs-gray-200, #e9ecef);cursor:not-allowed}.look-form .library-config-card .fixture-preview{border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:12px}.look-form .library-config-card .fixture-preview .fx-header,.look-form .library-config-card .fixture-preview .fx-footer{background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px;padding:6px 10px;font-size:12px;color:#475569;text-align:center;margin:4px 0}.look-form .library-config-card .fixture-preview .fx-body{display:flex;flex-direction:column;gap:4px;padding:4px 0}.look-form .library-config-card .fixture-preview .fx-shelf{background:linear-gradient(180deg,#f8fafc,#eef2f7);border:1px solid #cbd5e1;border-radius:4px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px;min-height:36px}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-badge{background:#0ea5e9;color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;font-size:11px;flex-shrink:0}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-label{font-weight:500;color:#1e293b}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-meta{color:#64748b;font-size:11px;margin-left:auto}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray{background:linear-gradient(180deg,#fef3c7,#fde68a);border-color:#f59e0b}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray .fx-shelf-badge{background:#d97706}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly{background:linear-gradient(180deg,#ede9fe,#ddd6fe);border-color:#8b5cf6}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly .fx-shelf-badge{background:#7c3aed}.look-form .library-config-card .fixture-preview .fx-dims{text-align:center}.look-form .library-config-card .shelf-mappings{max-height:70vh;overflow-y:auto;padding-right:4px}.look-form .library-config-card .shelf-mappings .shelf-mapping{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#f9fafb}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: MultiselectChipDropdownComponent, selector: "multiselect-chip-dropdown", inputs: ["idField", "nameField", "placeholder", "items", "search", "searchField", "maxSelection", "compact", "extraActionLabel", "extraActionActive", "disabled"], outputs: ["extraActionClick"] }, { kind: "component", type: TemplateProductsComponent, selector: "lib-template-products", inputs: ["looksMode"] }, { kind: "component", type: SearchableSelectComponent, selector: "lib-searchable-select", inputs: ["items", "idField", "nameField", "searchField", "placeholder", "multiple", "compact"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "allowDuplicates"] }, { kind: "component", type: TemplateVmsComponent, selector: "lib-template-vms", inputs: ["looksMode"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LookPlanoCollectionFormComponent, selector: "lib-look-plano-collection-form", ngImport: i0, template: "<div *ngIf=\"!accessChecked\" class=\"card p-5 m-4 text-center text-muted\">Checking access\u2026</div>\r\n\r\n<div *ngIf=\"accessChecked && !allowed\" class=\"card p-5 m-4\">\r\n  <div class=\"access-denied text-center py-10\">\r\n    <div class=\"access-denied-icon mb-4\"><i class=\"bi bi-shield-lock\"></i></div>\r\n    <h3 class=\"mb-2\">Access denied</h3>\r\n    <p class=\"text-muted mb-0\">\r\n      You don't have permission to access Looks. Contact your administrator\r\n      to be added to the allowed users list.\r\n    </p>\r\n  </div>\r\n</div>\r\n\r\n<section class=\"look-form\" *ngIf=\"accessChecked && allowed\">\r\n  <!-- Top bar (bound to the outer form) -->\r\n  <div class=\"card p-4 mb-4\" [formGroup]=\"form\">\r\n    <div class=\"row align-items-end\">\r\n      <div class=\"col-md-4\">\r\n        <label class=\"form-label fw-bold\">Name *</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"e.g. Master Look Plan FY26\" />\r\n      </div>\r\n      <div class=\"col-md-5\">\r\n        <label class=\"form-label fw-bold\">Description</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"description\" placeholder=\"Optional description\" />\r\n      </div>\r\n      <div class=\"col-md-1 text-center\">\r\n        <label class=\"form-label fw-bold d-block\">Active</label>\r\n        <input type=\"checkbox\" class=\"form-check-input\" formControlName=\"isActive\" />\r\n      </div>\r\n      <div class=\"col-md-2 text-end\">\r\n        <button type=\"button\" class=\"btn btn-light me-2\" (click)=\"cancel()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"saving\" (click)=\"save()\">\r\n          {{ saving ? 'Saving\u2026' : 'Save' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Three-pane editor -->\r\n  <div class=\"row mx-0 g-3\">\r\n    <!-- Left: Looks list (no form binding needed \u2014 just navigation) -->\r\n    <div class=\"col-md-3\">\r\n      <div class=\"card p-3 h-100\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n          <h6 class=\"m-0\">MBQ Bucket - Fixture Combinations</h6>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"addLook()\">+ Add Look</button>\r\n        </div>\r\n        <div *ngIf=\"looks.length === 0\" class=\"text-muted small\">No looks yet. Add one to start.</div>\r\n        <div class=\"looks-tree\">\r\n          <div\r\n            *ngFor=\"let look of looks.controls; let i = index; trackBy: trackByIndex\"\r\n            class=\"look-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n            [class.selected]=\"selectedLookIndex === i\"\r\n            [style.background-color]=\"bucketColor($any(look))\"\r\n            (click)=\"selectLook(i)\"\r\n          >\r\n            <span class=\"d-flex align-items-center gap-2 text-truncate\">\r\n              <span class=\"bucket-dot\" [style.background-color]=\"bucketColor($any(look))\"></span>\r\n              <span class=\"text-truncate\">{{ lookTitle($any(look)) }}</span>\r\n              <ng-container *ngIf=\"fixtureTypeBadge($any(look)) as ftb\">\r\n                <span class=\"fixture-type-badge\" [ngClass]=\"ftb.cls\">{{ ftb.label }}</span>\r\n              </ng-container>\r\n            </span>\r\n            <span class=\"look-row-actions\">\r\n              <button type=\"button\" class=\"row-action-btn duplicate\" title=\"Duplicate look\"\r\n                (click)=\"$event.stopPropagation(); duplicateLook(i)\">\r\n                <i class=\"bi bi-files\"></i>\r\n              </button>\r\n              <button type=\"button\" class=\"row-action-btn remove\" title=\"Remove look\"\r\n                (click)=\"$event.stopPropagation(); removeLook(i)\">\r\n                <i class=\"bi bi-trash3\"></i>\r\n              </button>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Centre: selected Look metadata + slots -->\r\n    <div class=\"col-md-3\">\r\n      <ng-container *ngIf=\"selectedLookGroup as lookGroup; else noLook\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"lookGroup\">\r\n          <h6 class=\"mb-3\">Fixture Combination Details</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">MBQ bucket</label>\r\n              <lib-searchable-select\r\n                [items]=\"mbqBucketItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select MBQ bucket\"\r\n                formControlName=\"mbqBucket\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture count *</label>\r\n              <input type=\"number\" min=\"0\" max=\"30\" class=\"form-control form-control-sm\" formControlName=\"fixtureCount\" />\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">CAD Header Varients</label>\r\n              <lib-chips-input\r\n                class=\"cad-header-variants-input\"\r\n                formControlName=\"cadHeaderVariants\"\r\n                placeholder=\"Type a variant and press Enter\">\r\n              </lib-chips-input>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Positions</label>\r\n              <multiselect-chip-dropdown\r\n                [items]=\"fixtureTypeOptions\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                placeholder=\"Select fixture position\"\r\n                formControlName=\"fixtureType\">\r\n              </multiselect-chip-dropdown>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Fixtures</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addSlot()\">+ Add Fixture</button>\r\n          </div>\r\n          <div class=\"slots-list\">\r\n            <div\r\n              *ngFor=\"let slot of (selectedSlotsArray?.controls || []); let s = index; trackBy: trackByIndex\"\r\n              class=\"slot-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n              [class.selected]=\"selectedSlotIndex === s\"\r\n              (click)=\"selectSlot(s)\"\r\n            >\r\n              <div class=\"d-flex flex-column\">\r\n                <span class=\"fw-bold small\">\r\n                  Fixture {{ $any(slot).get('slotIndex')?.value }} \u2014 {{ $any(slot).get('slotType')?.value }}\r\n                </span>\r\n                <span class=\"text-muted small\">\r\n                  {{ $any(slot).get('brand')?.value || '(no brand)' }} \u00B7\r\n                  {{ $any(slot).get('fixtureLevelZone')?.value || '(no zone)' }}\r\n                </span>\r\n              </div>\r\n              <button type=\"button\" class=\"btn btn-sm btn-light-danger ms-2\" (click)=\"$event.stopPropagation(); removeSlot(s)\">\u00D7</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noLook>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select or add a Look to edit it.</div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Right: selected slot \u2014 placements editor -->\r\n    <div class=\"col-md-6\">\r\n      <ng-container *ngIf=\"selectedSlotGroup as slotGroup; else noSlot\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"slotGroup\">\r\n          <h6 class=\"mb-3\">Fixture {{ selectedSlotIndex + 1 }} - Definition</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small text-muted\">Slot index (auto)</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [value]=\"selectedSlotIndex + 1\" readonly disabled />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture Type</label>\r\n              <select class=\"form-select form-select-sm\" formControlName=\"slotType\">\r\n                <option *ngFor=\"let opt of availableSlotTypes\" [value]=\"opt.id\">{{ opt.name }}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Brand</label>\r\n              <lib-searchable-select\r\n                [items]=\"brandItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select brand\"\r\n                formControlName=\"brand\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Header</label>\r\n              <lib-searchable-select\r\n                [items]=\"fixtureHeaderItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select fixture header\"\r\n                formControlName=\"fixtureLevelZone\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Templates</label>\r\n              <multiselect-chip-dropdown\r\n                class=\"fixture-libraries-select\"\r\n                [items]=\"fixtureLibraryItemsForSlot\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                [search]=\"true\"\r\n                searchField=\"name\"\r\n                placeholder=\"Select fixture templates\"\r\n                formControlName=\"fixtureLibraryRefs\">\r\n              </multiselect-chip-dropdown>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value === 'eurocenter'\">\r\n                Showing floor fixtures (eurocenter slot).\r\n              </small>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value !== 'eurocenter'\">\r\n                Showing wall fixtures (shelf slot).\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Look and Visual Merchandising Placements</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addPlacement()\">+ Add placement</button>\r\n          </div>\r\n          <div *ngIf=\"(selectedPlacements?.length || 0) === 0\" class=\"text-muted small mb-2\">\r\n            No placements yet. Click <strong>+ Add placement</strong> to add one.\r\n          </div>\r\n          <div class=\"placements-scroll\" formArrayName=\"placements\">\r\n            <div\r\n              *ngFor=\"let p of (selectedPlacements?.controls || []); let pi = index; trackBy: trackByIndex\"\r\n              class=\"placement-row mb-2\"\r\n              [formGroupName]=\"pi\"\r\n            >\r\n              <div class=\"d-flex align-items-start gap-2 placement-fields\">\r\n                <div class=\"ph-field\">\r\n                  <select class=\"form-select form-select-sm\" formControlName=\"kind\">\r\n                    <option value=\"pid\">Product Merchandising</option>\r\n                    <option value=\"vm\">Visual Merchandising</option>\r\n                  </select>\r\n                </div>\r\n\r\n                <!-- Visual Merchandising rows: VM Type (single) + VM Artwork (single) -->\r\n                <ng-container *ngIf=\"$any(p).get('kind')?.value === 'vm'; else pidInputs\">\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmTypeOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Type\"\r\n                      formControlName=\"position\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmArtworkOptionsFor($any(p).get('position')?.value)\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Artwork\"\r\n                      formControlName=\"rawValue\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- Product Merchandising rows: Top/Mid/Bottom position + multi-select product/SKU -->\r\n                <ng-template #pidInputs>\r\n                  <div class=\"ph-field\">\r\n                    <select class=\"form-select form-select-sm\" formControlName=\"position\">\r\n                      <option value=\"\">Position</option>\r\n                      <option value=\"Top\">Top</option>\r\n                      <option value=\"Mid\">Mid</option>\r\n                      <option value=\"Bottom\">Bottom</option>\r\n                    </select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"productOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      [multiple]=\"true\"\r\n                      placeholder=\"Product / SKU\"\r\n                      formControlName=\"rawValues\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger ph-remove\" (click)=\"removePlacement(pi)\">\u00D7</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSlot>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select a fixture slot to edit placements.</div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Per-slot Fixture Library Configuration card -->\r\n  <ng-container *ngIf=\"selectedSlotGroup as slotGroupForMap\">\r\n    <div class=\"card p-4 mt-4 library-config-card\" [formGroup]=\"slotGroupForMap\">\r\n      <div class=\"mb-4\">\r\n        <h5 class=\"form-label d-block mb-3\">Fixture library</h5>\r\n        <div class=\"library-chips\">\r\n          <button\r\n            *ngFor=\"let lib of selectedSlotLibrariesForDropdown\"\r\n            type=\"button\"\r\n            class=\"library-chip\"\r\n            [class.active]=\"selectedLibraryIdInMap === lib.id\"\r\n            (click)=\"onLibraryMapSelect(selectedLibraryIdInMap === lib.id ? '' : lib.id)\">\r\n            {{ lib.name }}\r\n          </button>\r\n        </div>\r\n        <small *ngIf=\"selectedSlotLibrariesForDropdown.length === 0\" class=\"text-muted\">\r\n          No libraries linked to this slot yet. Add some in the \"Fixture libraries\" multiselect above.\r\n        </small>\r\n      </div>\r\n\r\n      <div *ngIf=\"loadingLibraryDetails\" class=\"text-muted\">Loading fixture details\u2026</div>\r\n\r\n      <!--\r\n        Use *ngFor + trackBy keyed on (look, slot, library) so Angular treats\r\n        a switch as a new item \u2014 that forces the embedded template-products\r\n        / template-vms components to remount and rerun their ngOnInit\r\n        (otherwise their `isPageLoading` guard skips the form rebuild).\r\n      -->\r\n      <ng-container *ngFor=\"let _ of embeddedHostKeys; trackBy: trackByEmbeddedKey\">\r\n        <ul class=\"nav nav-tabs custom-tabs mb-3\">\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'products'\"\r\n              (click)=\"embeddedTab = 'products'\">Product Merchandising</button>\r\n          </li>\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'vms'\"\r\n              (click)=\"embeddedTab = 'vms'\">Visual Merchandising</button>\r\n          </li>\r\n        </ul>\r\n\r\n        <div *ngIf=\"embeddedTab === 'products'\">\r\n          <lib-template-products [looksMode]=\"true\"></lib-template-products>\r\n        </div>\r\n        <div *ngIf=\"embeddedTab === 'vms'\">\r\n          <lib-template-vms [looksMode]=\"true\"></lib-template-vms>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</section>\r\n", styles: [".access-denied .access-denied-icon i{font-size:48px;color:#ef4444;line-height:1}.look-form .col-md-3>.card,.look-form .col-md-6>.card{display:flex!important;flex-direction:column;height:85vh!important;min-height:720px}.look-form .looks-tree,.look-form .slots-list,.look-form .placements-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.look-form .look-row,.look-form .slot-row{cursor:pointer;border:1px solid transparent;background:#f9fafb;transition:filter .15s ease,box-shadow .15s ease,border-color .15s ease}.look-form .look-row:hover,.look-form .slot-row:hover{filter:brightness(.96)}.look-form .look-row.selected,.look-form .slot-row.selected{filter:brightness(.96);outline:1px solid rgba(14,165,233,.55);outline-offset:-1px}.look-form .bucket-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}.look-form .look-row-actions{flex-shrink:0;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s ease}.look-form .look-row-actions .row-action-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;transition:background-color .15s ease,color .15s ease}.look-form .look-row-actions .row-action-btn i{font-size:13px;line-height:1}.look-form .look-row-actions .row-action-btn:hover{background:#fff}.look-form .look-row-actions .row-action-btn.duplicate:hover{color:#0ea5e9}.look-form .look-row-actions .row-action-btn.remove:hover{color:#ef4444}.look-form .look-row:hover .look-row-actions,.look-form .look-row.selected .look-row-actions{opacity:1}.look-form .fixture-type-badge{display:inline-block;flex-shrink:0;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:600;line-height:14px;letter-spacing:.2px;border:1px solid transparent;white-space:nowrap}.look-form .fixture-type-badge.badge-wall{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.look-form .fixture-type-badge.badge-floor{background:#fed7aa;color:#9a3412;border-color:#fdba74}.look-form .fixture-type-badge.badge-mixed{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}.look-form .fixture-libraries-select{display:block}.look-form .fixture-libraries-select ::ng-deep .multiselect-container{align-items:flex-start}.look-form .fixture-libraries-select ::ng-deep .chip-list{max-height:84px;overflow-y:auto;padding-right:4px}.look-form .cad-header-variants-input{display:block}.look-form .cad-header-variants-input ::ng-deep .chips-input{max-height:84px;overflow-y:auto;align-content:flex-start;padding-right:4px}.look-form .placement-row .placement-fields .ph-field{flex:1 1 0;min-width:0}.look-form .placement-row .placement-fields .ph-remove{flex:0 0 auto}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multiselect-container{padding:4px 10px;min-height:31px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .chip-list{min-height:21px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multi-placeholder{font-size:13px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.look-form .library-config-card .library-chips{display:flex;flex-wrap:wrap;gap:8px}.look-form .library-config-card .library-chip{background:#f1f5f9;border:1px solid #cbd5e1;color:#1e293b;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.look-form .library-config-card .library-chip:hover{background:#e2e8f0;border-color:#94a3b8}.look-form .library-config-card .library-chip.active{background:#0ea5e9;border-color:#0284c7;color:#fff}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col-8>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products input[readonly]{background-color:var(--bs-gray-200, #e9ecef);cursor:not-allowed}.look-form .library-config-card .fixture-preview{border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:12px}.look-form .library-config-card .fixture-preview .fx-header,.look-form .library-config-card .fixture-preview .fx-footer{background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px;padding:6px 10px;font-size:12px;color:#475569;text-align:center;margin:4px 0}.look-form .library-config-card .fixture-preview .fx-body{display:flex;flex-direction:column;gap:4px;padding:4px 0}.look-form .library-config-card .fixture-preview .fx-shelf{background:linear-gradient(180deg,#f8fafc,#eef2f7);border:1px solid #cbd5e1;border-radius:4px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px;min-height:36px}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-badge{background:#0ea5e9;color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;font-size:11px;flex-shrink:0}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-label{font-weight:500;color:#1e293b}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-meta{color:#64748b;font-size:11px;margin-left:auto}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray{background:linear-gradient(180deg,#fef3c7,#fde68a);border-color:#f59e0b}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray .fx-shelf-badge{background:#d97706}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly{background:linear-gradient(180deg,#ede9fe,#ddd6fe);border-color:#8b5cf6}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly .fx-shelf-badge{background:#7c3aed}.look-form .library-config-card .fixture-preview .fx-dims{text-align:center}.look-form .library-config-card .shelf-mappings{max-height:70vh;overflow-y:auto;padding-right:4px}.look-form .library-config-card .shelf-mappings .shelf-mapping{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#f9fafb}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: MultiselectChipDropdownComponent, selector: "multiselect-chip-dropdown", inputs: ["idField", "nameField", "placeholder", "items", "search", "searchField", "maxSelection", "compact", "extraActionLabel", "extraActionActive", "disabled"], outputs: ["extraActionClick"] }, { kind: "component", type: TemplateProductsComponent, selector: "lib-template-products", inputs: ["looksMode"] }, { kind: "component", type: SearchableSelectComponent, selector: "lib-searchable-select", inputs: ["items", "idField", "nameField", "searchField", "placeholder", "multiple", "compact"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "allowDuplicates"] }, { kind: "component", type: TemplateVmsComponent, selector: "lib-template-vms", inputs: ["looksMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LookPlanoCollectionFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-look-plano-collection-form', template: "<section class=\"look-form\">\r\n  <!-- Top bar (bound to the outer form) -->\r\n  <div class=\"card p-4 mb-4\" [formGroup]=\"form\">\r\n    <div class=\"row align-items-end\">\r\n      <div class=\"col-md-4\">\r\n        <label class=\"form-label fw-bold\">Name *</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"e.g. Master Look Plan FY26\" />\r\n      </div>\r\n      <div class=\"col-md-5\">\r\n        <label class=\"form-label fw-bold\">Description</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"description\" placeholder=\"Optional description\" />\r\n      </div>\r\n      <div class=\"col-md-1 text-center\">\r\n        <label class=\"form-label fw-bold d-block\">Active</label>\r\n        <input type=\"checkbox\" class=\"form-check-input\" formControlName=\"isActive\" />\r\n      </div>\r\n      <div class=\"col-md-2 text-end\">\r\n        <button type=\"button\" class=\"btn btn-light me-2\" (click)=\"cancel()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"saving\" (click)=\"save()\">\r\n          {{ saving ? 'Saving\u2026' : 'Save' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Three-pane editor -->\r\n  <div class=\"row mx-0 g-3\">\r\n    <!-- Left: Looks list (no form binding needed \u2014 just navigation) -->\r\n    <div class=\"col-md-3\">\r\n      <div class=\"card p-3 h-100\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n          <h6 class=\"m-0\">MBQ Bucket - Fixture Combinations</h6>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"addLook()\">+ Add Look</button>\r\n        </div>\r\n        <div *ngIf=\"looks.length === 0\" class=\"text-muted small\">No looks yet. Add one to start.</div>\r\n        <div class=\"looks-tree\">\r\n          <div\r\n            *ngFor=\"let look of looks.controls; let i = index; trackBy: trackByIndex\"\r\n            class=\"look-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n            [class.selected]=\"selectedLookIndex === i\"\r\n            [style.background-color]=\"bucketColor($any(look))\"\r\n            (click)=\"selectLook(i)\"\r\n          >\r\n            <span class=\"d-flex align-items-center gap-2 text-truncate\">\r\n              <span class=\"bucket-dot\" [style.background-color]=\"bucketColor($any(look))\"></span>\r\n              <span class=\"text-truncate\">{{ lookTitle($any(look)) }}</span>\r\n              <ng-container *ngIf=\"fixtureTypeBadge($any(look)) as ftb\">\r\n                <span class=\"fixture-type-badge\" [ngClass]=\"ftb.cls\">{{ ftb.label }}</span>\r\n              </ng-container>\r\n            </span>\r\n            <span class=\"look-row-actions\">\r\n              <button type=\"button\" class=\"row-action-btn duplicate\" title=\"Duplicate look\"\r\n                (click)=\"$event.stopPropagation(); duplicateLook(i)\">\r\n                <i class=\"bi bi-files\"></i>\r\n              </button>\r\n              <button type=\"button\" class=\"row-action-btn remove\" title=\"Remove look\"\r\n                (click)=\"$event.stopPropagation(); removeLook(i)\">\r\n                <i class=\"bi bi-trash3\"></i>\r\n              </button>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Centre: selected Look metadata + slots -->\r\n    <div class=\"col-md-3\">\r\n      <ng-container *ngIf=\"selectedLookGroup as lookGroup; else noLook\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"lookGroup\">\r\n          <h6 class=\"mb-3\">Fixture Combination Details</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">MBQ bucket</label>\r\n              <lib-searchable-select\r\n                [items]=\"mbqBucketItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select MBQ bucket\"\r\n                formControlName=\"mbqBucket\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture count *</label>\r\n              <input type=\"number\" min=\"0\" max=\"30\" class=\"form-control form-control-sm\" formControlName=\"fixtureCount\" />\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">CAD Header Varients</label>\r\n              <lib-chips-input\r\n                class=\"cad-header-variants-input\"\r\n                formControlName=\"cadHeaderVariants\"\r\n                placeholder=\"Type a variant and press Enter\">\r\n              </lib-chips-input>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Positions</label>\r\n              <multiselect-chip-dropdown\r\n                [items]=\"fixtureTypeOptions\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                placeholder=\"Select fixture position\"\r\n                formControlName=\"fixtureType\">\r\n              </multiselect-chip-dropdown>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Fixtures</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addSlot()\">+ Add Fixture</button>\r\n          </div>\r\n          <div class=\"slots-list\">\r\n            <div\r\n              *ngFor=\"let slot of (selectedSlotsArray?.controls || []); let s = index; trackBy: trackByIndex\"\r\n              class=\"slot-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n              [class.selected]=\"selectedSlotIndex === s\"\r\n              (click)=\"selectSlot(s)\"\r\n            >\r\n              <div class=\"d-flex flex-column\">\r\n                <span class=\"fw-bold small\">\r\n                  Fixture {{ $any(slot).get('slotIndex')?.value }} \u2014 {{ $any(slot).get('slotType')?.value }}\r\n                </span>\r\n                <span class=\"text-muted small\">\r\n                  {{ $any(slot).get('brand')?.value || '(no brand)' }} \u00B7\r\n                  {{ $any(slot).get('fixtureLevelZone')?.value || '(no zone)' }}\r\n                </span>\r\n              </div>\r\n              <button type=\"button\" class=\"btn btn-sm btn-light-danger ms-2\" (click)=\"$event.stopPropagation(); removeSlot(s)\">\u00D7</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noLook>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select or add a Look to edit it.</div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Right: selected slot \u2014 placements editor -->\r\n    <div class=\"col-md-6\">\r\n      <ng-container *ngIf=\"selectedSlotGroup as slotGroup; else noSlot\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"slotGroup\">\r\n          <h6 class=\"mb-3\">Fixture {{ selectedSlotIndex + 1 }} - Definition</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small text-muted\">Slot index (auto)</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [value]=\"selectedSlotIndex + 1\" readonly disabled />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture Type</label>\r\n              <select class=\"form-select form-select-sm\" formControlName=\"slotType\">\r\n                <option *ngFor=\"let opt of availableSlotTypes\" [value]=\"opt.id\">{{ opt.name }}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Brand</label>\r\n              <lib-searchable-select\r\n                [items]=\"brandItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select brand\"\r\n                formControlName=\"brand\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Header</label>\r\n              <lib-searchable-select\r\n                [items]=\"fixtureHeaderItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select fixture header\"\r\n                formControlName=\"fixtureLevelZone\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Templates</label>\r\n              <multiselect-chip-dropdown\r\n                class=\"fixture-libraries-select\"\r\n                [items]=\"fixtureLibraryItemsForSlot\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                [search]=\"true\"\r\n                searchField=\"name\"\r\n                placeholder=\"Select fixture templates\"\r\n                formControlName=\"fixtureLibraryRefs\">\r\n              </multiselect-chip-dropdown>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value === 'eurocenter'\">\r\n                Showing floor fixtures (eurocenter slot).\r\n              </small>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value !== 'eurocenter'\">\r\n                Showing wall fixtures (shelf slot).\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Look and Visual Merchandising Placements</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addPlacement()\">+ Add placement</button>\r\n          </div>\r\n          <div *ngIf=\"(selectedPlacements?.length || 0) === 0\" class=\"text-muted small mb-2\">\r\n            No placements yet. Click <strong>+ Add placement</strong> to add one.\r\n          </div>\r\n          <div class=\"placements-scroll\" formArrayName=\"placements\">\r\n            <div\r\n              *ngFor=\"let p of (selectedPlacements?.controls || []); let pi = index; trackBy: trackByIndex\"\r\n              class=\"placement-row mb-2\"\r\n              [formGroupName]=\"pi\"\r\n            >\r\n              <div class=\"d-flex align-items-start gap-2 placement-fields\">\r\n                <div class=\"ph-field\">\r\n                  <select class=\"form-select form-select-sm\" formControlName=\"kind\">\r\n                    <option value=\"pid\">Product Merchandising</option>\r\n                    <option value=\"vm\">Visual Merchandising</option>\r\n                  </select>\r\n                </div>\r\n\r\n                <!-- Visual Merchandising rows: VM Type (single) + VM Artwork (single) -->\r\n                <ng-container *ngIf=\"$any(p).get('kind')?.value === 'vm'; else pidInputs\">\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmTypeOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Type\"\r\n                      formControlName=\"position\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmArtworkOptionsFor($any(p).get('position')?.value)\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Artwork\"\r\n                      formControlName=\"rawValue\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- Product Merchandising rows: Top/Mid/Bottom position + multi-select product/SKU -->\r\n                <ng-template #pidInputs>\r\n                  <div class=\"ph-field\">\r\n                    <select class=\"form-select form-select-sm\" formControlName=\"position\">\r\n                      <option value=\"\">Position</option>\r\n                      <option value=\"Top\">Top</option>\r\n                      <option value=\"Mid\">Mid</option>\r\n                      <option value=\"Bottom\">Bottom</option>\r\n                    </select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"productOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      [multiple]=\"true\"\r\n                      placeholder=\"Product / SKU\"\r\n                      formControlName=\"rawValues\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger ph-remove\" (click)=\"removePlacement(pi)\">\u00D7</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSlot>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select a fixture slot to edit placements.</div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Per-slot Fixture Library Configuration card -->\r\n  <ng-container *ngIf=\"selectedSlotGroup as slotGroupForMap\">\r\n    <div class=\"card p-4 mt-4 library-config-card\" [formGroup]=\"slotGroupForMap\">\r\n      <div class=\"mb-4\">\r\n        <h5 class=\"form-label d-block mb-3\">Fixture library</h5>\r\n        <div class=\"library-chips\">\r\n          <button\r\n            *ngFor=\"let lib of selectedSlotLibrariesForDropdown\"\r\n            type=\"button\"\r\n            class=\"library-chip\"\r\n            [class.active]=\"selectedLibraryIdInMap === lib.id\"\r\n            (click)=\"onLibraryMapSelect(selectedLibraryIdInMap === lib.id ? '' : lib.id)\">\r\n            {{ lib.name }}\r\n          </button>\r\n        </div>\r\n        <small *ngIf=\"selectedSlotLibrariesForDropdown.length === 0\" class=\"text-muted\">\r\n          No libraries linked to this slot yet. Add some in the \"Fixture libraries\" multiselect above.\r\n        </small>\r\n      </div>\r\n\r\n      <div *ngIf=\"loadingLibraryDetails\" class=\"text-muted\">Loading fixture details\u2026</div>\r\n\r\n      <!--\r\n        Use *ngFor + trackBy keyed on (look, slot, library) so Angular treats\r\n        a switch as a new item \u2014 that forces the embedded template-products\r\n        / template-vms components to remount and rerun their ngOnInit\r\n        (otherwise their `isPageLoading` guard skips the form rebuild).\r\n      -->\r\n      <ng-container *ngFor=\"let _ of embeddedHostKeys; trackBy: trackByEmbeddedKey\">\r\n        <ul class=\"nav nav-tabs custom-tabs mb-3\">\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'products'\"\r\n              (click)=\"embeddedTab = 'products'\">Product Merchandising</button>\r\n          </li>\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'vms'\"\r\n              (click)=\"embeddedTab = 'vms'\">Visual Merchandising</button>\r\n          </li>\r\n        </ul>\r\n\r\n        <div *ngIf=\"embeddedTab === 'products'\">\r\n          <lib-template-products [looksMode]=\"true\"></lib-template-products>\r\n        </div>\r\n        <div *ngIf=\"embeddedTab === 'vms'\">\r\n          <lib-template-vms [looksMode]=\"true\"></lib-template-vms>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</section>\r\n", styles: [".look-form .col-md-3>.card,.look-form .col-md-6>.card{display:flex!important;flex-direction:column;height:85vh!important;min-height:720px}.look-form .looks-tree,.look-form .slots-list,.look-form .placements-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.look-form .look-row,.look-form .slot-row{cursor:pointer;border:1px solid transparent;background:#f9fafb;transition:filter .15s ease,box-shadow .15s ease,border-color .15s ease}.look-form .look-row:hover,.look-form .slot-row:hover{filter:brightness(.96)}.look-form .look-row.selected,.look-form .slot-row.selected{filter:brightness(.96);outline:1px solid rgba(14,165,233,.55);outline-offset:-1px}.look-form .bucket-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}.look-form .look-row-actions{flex-shrink:0;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s ease}.look-form .look-row-actions .row-action-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;transition:background-color .15s ease,color .15s ease}.look-form .look-row-actions .row-action-btn i{font-size:13px;line-height:1}.look-form .look-row-actions .row-action-btn:hover{background:#fff}.look-form .look-row-actions .row-action-btn.duplicate:hover{color:#0ea5e9}.look-form .look-row-actions .row-action-btn.remove:hover{color:#ef4444}.look-form .look-row:hover .look-row-actions,.look-form .look-row.selected .look-row-actions{opacity:1}.look-form .fixture-type-badge{display:inline-block;flex-shrink:0;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:600;line-height:14px;letter-spacing:.2px;border:1px solid transparent;white-space:nowrap}.look-form .fixture-type-badge.badge-wall{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.look-form .fixture-type-badge.badge-floor{background:#fed7aa;color:#9a3412;border-color:#fdba74}.look-form .fixture-type-badge.badge-mixed{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}.look-form .fixture-libraries-select{display:block}.look-form .fixture-libraries-select ::ng-deep .multiselect-container{align-items:flex-start}.look-form .fixture-libraries-select ::ng-deep .chip-list{max-height:84px;overflow-y:auto;padding-right:4px}.look-form .cad-header-variants-input{display:block}.look-form .cad-header-variants-input ::ng-deep .chips-input{max-height:84px;overflow-y:auto;align-content:flex-start;padding-right:4px}.look-form .placement-row .placement-fields .ph-field{flex:1 1 0;min-width:0}.look-form .placement-row .placement-fields .ph-remove{flex:0 0 auto}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multiselect-container{padding:4px 10px;min-height:31px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .chip-list{min-height:21px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multi-placeholder{font-size:13px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.look-form .library-config-card .library-chips{display:flex;flex-wrap:wrap;gap:8px}.look-form .library-config-card .library-chip{background:#f1f5f9;border:1px solid #cbd5e1;color:#1e293b;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.look-form .library-config-card .library-chip:hover{background:#e2e8f0;border-color:#94a3b8}.look-form .library-config-card .library-chip.active{background:#0ea5e9;border-color:#0284c7;color:#fff}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col-8>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products input[readonly]{background-color:var(--bs-gray-200, #e9ecef);cursor:not-allowed}.look-form .library-config-card .fixture-preview{border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:12px}.look-form .library-config-card .fixture-preview .fx-header,.look-form .library-config-card .fixture-preview .fx-footer{background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px;padding:6px 10px;font-size:12px;color:#475569;text-align:center;margin:4px 0}.look-form .library-config-card .fixture-preview .fx-body{display:flex;flex-direction:column;gap:4px;padding:4px 0}.look-form .library-config-card .fixture-preview .fx-shelf{background:linear-gradient(180deg,#f8fafc,#eef2f7);border:1px solid #cbd5e1;border-radius:4px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px;min-height:36px}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-badge{background:#0ea5e9;color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;font-size:11px;flex-shrink:0}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-label{font-weight:500;color:#1e293b}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-meta{color:#64748b;font-size:11px;margin-left:auto}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray{background:linear-gradient(180deg,#fef3c7,#fde68a);border-color:#f59e0b}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray .fx-shelf-badge{background:#d97706}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly{background:linear-gradient(180deg,#ede9fe,#ddd6fe);border-color:#8b5cf6}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly .fx-shelf-badge{background:#7c3aed}.look-form .library-config-card .fixture-preview .fx-dims{text-align:center}.look-form .library-config-card .shelf-mappings{max-height:70vh;overflow-y:auto;padding-right:4px}.look-form .library-config-card .shelf-mappings .shelf-mapping{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#f9fafb}\n"] }]
+            args: [{ selector: 'lib-look-plano-collection-form', template: "<div *ngIf=\"!accessChecked\" class=\"card p-5 m-4 text-center text-muted\">Checking access\u2026</div>\r\n\r\n<div *ngIf=\"accessChecked && !allowed\" class=\"card p-5 m-4\">\r\n  <div class=\"access-denied text-center py-10\">\r\n    <div class=\"access-denied-icon mb-4\"><i class=\"bi bi-shield-lock\"></i></div>\r\n    <h3 class=\"mb-2\">Access denied</h3>\r\n    <p class=\"text-muted mb-0\">\r\n      You don't have permission to access Looks. Contact your administrator\r\n      to be added to the allowed users list.\r\n    </p>\r\n  </div>\r\n</div>\r\n\r\n<section class=\"look-form\" *ngIf=\"accessChecked && allowed\">\r\n  <!-- Top bar (bound to the outer form) -->\r\n  <div class=\"card p-4 mb-4\" [formGroup]=\"form\">\r\n    <div class=\"row align-items-end\">\r\n      <div class=\"col-md-4\">\r\n        <label class=\"form-label fw-bold\">Name *</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"e.g. Master Look Plan FY26\" />\r\n      </div>\r\n      <div class=\"col-md-5\">\r\n        <label class=\"form-label fw-bold\">Description</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"description\" placeholder=\"Optional description\" />\r\n      </div>\r\n      <div class=\"col-md-1 text-center\">\r\n        <label class=\"form-label fw-bold d-block\">Active</label>\r\n        <input type=\"checkbox\" class=\"form-check-input\" formControlName=\"isActive\" />\r\n      </div>\r\n      <div class=\"col-md-2 text-end\">\r\n        <button type=\"button\" class=\"btn btn-light me-2\" (click)=\"cancel()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"saving\" (click)=\"save()\">\r\n          {{ saving ? 'Saving\u2026' : 'Save' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Three-pane editor -->\r\n  <div class=\"row mx-0 g-3\">\r\n    <!-- Left: Looks list (no form binding needed \u2014 just navigation) -->\r\n    <div class=\"col-md-3\">\r\n      <div class=\"card p-3 h-100\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n          <h6 class=\"m-0\">MBQ Bucket - Fixture Combinations</h6>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"addLook()\">+ Add Look</button>\r\n        </div>\r\n        <div *ngIf=\"looks.length === 0\" class=\"text-muted small\">No looks yet. Add one to start.</div>\r\n        <div class=\"looks-tree\">\r\n          <div\r\n            *ngFor=\"let look of looks.controls; let i = index; trackBy: trackByIndex\"\r\n            class=\"look-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n            [class.selected]=\"selectedLookIndex === i\"\r\n            [style.background-color]=\"bucketColor($any(look))\"\r\n            (click)=\"selectLook(i)\"\r\n          >\r\n            <span class=\"d-flex align-items-center gap-2 text-truncate\">\r\n              <span class=\"bucket-dot\" [style.background-color]=\"bucketColor($any(look))\"></span>\r\n              <span class=\"text-truncate\">{{ lookTitle($any(look)) }}</span>\r\n              <ng-container *ngIf=\"fixtureTypeBadge($any(look)) as ftb\">\r\n                <span class=\"fixture-type-badge\" [ngClass]=\"ftb.cls\">{{ ftb.label }}</span>\r\n              </ng-container>\r\n            </span>\r\n            <span class=\"look-row-actions\">\r\n              <button type=\"button\" class=\"row-action-btn duplicate\" title=\"Duplicate look\"\r\n                (click)=\"$event.stopPropagation(); duplicateLook(i)\">\r\n                <i class=\"bi bi-files\"></i>\r\n              </button>\r\n              <button type=\"button\" class=\"row-action-btn remove\" title=\"Remove look\"\r\n                (click)=\"$event.stopPropagation(); removeLook(i)\">\r\n                <i class=\"bi bi-trash3\"></i>\r\n              </button>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Centre: selected Look metadata + slots -->\r\n    <div class=\"col-md-3\">\r\n      <ng-container *ngIf=\"selectedLookGroup as lookGroup; else noLook\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"lookGroup\">\r\n          <h6 class=\"mb-3\">Fixture Combination Details</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">MBQ bucket</label>\r\n              <lib-searchable-select\r\n                [items]=\"mbqBucketItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select MBQ bucket\"\r\n                formControlName=\"mbqBucket\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture count *</label>\r\n              <input type=\"number\" min=\"0\" max=\"30\" class=\"form-control form-control-sm\" formControlName=\"fixtureCount\" />\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">CAD Header Varients</label>\r\n              <lib-chips-input\r\n                class=\"cad-header-variants-input\"\r\n                formControlName=\"cadHeaderVariants\"\r\n                placeholder=\"Type a variant and press Enter\">\r\n              </lib-chips-input>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Positions</label>\r\n              <multiselect-chip-dropdown\r\n                [items]=\"fixtureTypeOptions\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                placeholder=\"Select fixture position\"\r\n                formControlName=\"fixtureType\">\r\n              </multiselect-chip-dropdown>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Fixtures</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addSlot()\">+ Add Fixture</button>\r\n          </div>\r\n          <div class=\"slots-list\">\r\n            <div\r\n              *ngFor=\"let slot of (selectedSlotsArray?.controls || []); let s = index; trackBy: trackByIndex\"\r\n              class=\"slot-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n              [class.selected]=\"selectedSlotIndex === s\"\r\n              (click)=\"selectSlot(s)\"\r\n            >\r\n              <div class=\"d-flex flex-column\">\r\n                <span class=\"fw-bold small\">\r\n                  Fixture {{ $any(slot).get('slotIndex')?.value }} \u2014 {{ $any(slot).get('slotType')?.value }}\r\n                </span>\r\n                <span class=\"text-muted small\">\r\n                  {{ $any(slot).get('brand')?.value || '(no brand)' }} \u00B7\r\n                  {{ $any(slot).get('fixtureLevelZone')?.value || '(no zone)' }}\r\n                </span>\r\n              </div>\r\n              <button type=\"button\" class=\"btn btn-sm btn-light-danger ms-2\" (click)=\"$event.stopPropagation(); removeSlot(s)\">\u00D7</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noLook>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select or add a Look to edit it.</div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Right: selected slot \u2014 placements editor -->\r\n    <div class=\"col-md-6\">\r\n      <ng-container *ngIf=\"selectedSlotGroup as slotGroup; else noSlot\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"slotGroup\">\r\n          <h6 class=\"mb-3\">Fixture {{ selectedSlotIndex + 1 }} - Definition</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small text-muted\">Slot index (auto)</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [value]=\"selectedSlotIndex + 1\" readonly disabled />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture Type</label>\r\n              <select class=\"form-select form-select-sm\" formControlName=\"slotType\">\r\n                <option *ngFor=\"let opt of availableSlotTypes\" [value]=\"opt.id\">{{ opt.name }}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Brand</label>\r\n              <lib-searchable-select\r\n                [items]=\"brandItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select brand\"\r\n                formControlName=\"brand\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Header</label>\r\n              <lib-searchable-select\r\n                [items]=\"fixtureHeaderItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select fixture header\"\r\n                formControlName=\"fixtureLevelZone\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Templates</label>\r\n              <multiselect-chip-dropdown\r\n                class=\"fixture-libraries-select\"\r\n                [items]=\"fixtureLibraryItemsForSlot\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                [search]=\"true\"\r\n                searchField=\"name\"\r\n                placeholder=\"Select fixture templates\"\r\n                formControlName=\"fixtureLibraryRefs\">\r\n              </multiselect-chip-dropdown>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value === 'eurocenter'\">\r\n                Showing floor fixtures (eurocenter slot).\r\n              </small>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value !== 'eurocenter'\">\r\n                Showing wall fixtures (shelf slot).\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Look and Visual Merchandising Placements</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addPlacement()\">+ Add placement</button>\r\n          </div>\r\n          <div *ngIf=\"(selectedPlacements?.length || 0) === 0\" class=\"text-muted small mb-2\">\r\n            No placements yet. Click <strong>+ Add placement</strong> to add one.\r\n          </div>\r\n          <div class=\"placements-scroll\" formArrayName=\"placements\">\r\n            <div\r\n              *ngFor=\"let p of (selectedPlacements?.controls || []); let pi = index; trackBy: trackByIndex\"\r\n              class=\"placement-row mb-2\"\r\n              [formGroupName]=\"pi\"\r\n            >\r\n              <div class=\"d-flex align-items-start gap-2 placement-fields\">\r\n                <div class=\"ph-field\">\r\n                  <select class=\"form-select form-select-sm\" formControlName=\"kind\">\r\n                    <option value=\"pid\">Product Merchandising</option>\r\n                    <option value=\"vm\">Visual Merchandising</option>\r\n                  </select>\r\n                </div>\r\n\r\n                <!-- Visual Merchandising rows: VM Type (single) + VM Artwork (single) -->\r\n                <ng-container *ngIf=\"$any(p).get('kind')?.value === 'vm'; else pidInputs\">\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmTypeOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Type\"\r\n                      formControlName=\"position\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmArtworkOptionsFor($any(p).get('position')?.value)\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Artwork\"\r\n                      formControlName=\"rawValue\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- Product Merchandising rows: Top/Mid/Bottom position + multi-select product/SKU -->\r\n                <ng-template #pidInputs>\r\n                  <div class=\"ph-field\">\r\n                    <select class=\"form-select form-select-sm\" formControlName=\"position\">\r\n                      <option value=\"\">Position</option>\r\n                      <option value=\"Top\">Top</option>\r\n                      <option value=\"Mid\">Mid</option>\r\n                      <option value=\"Bottom\">Bottom</option>\r\n                    </select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"productOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      [multiple]=\"true\"\r\n                      placeholder=\"Product / SKU\"\r\n                      formControlName=\"rawValues\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger ph-remove\" (click)=\"removePlacement(pi)\">\u00D7</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSlot>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select a fixture slot to edit placements.</div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Per-slot Fixture Library Configuration card -->\r\n  <ng-container *ngIf=\"selectedSlotGroup as slotGroupForMap\">\r\n    <div class=\"card p-4 mt-4 library-config-card\" [formGroup]=\"slotGroupForMap\">\r\n      <div class=\"mb-4\">\r\n        <h5 class=\"form-label d-block mb-3\">Fixture library</h5>\r\n        <div class=\"library-chips\">\r\n          <button\r\n            *ngFor=\"let lib of selectedSlotLibrariesForDropdown\"\r\n            type=\"button\"\r\n            class=\"library-chip\"\r\n            [class.active]=\"selectedLibraryIdInMap === lib.id\"\r\n            (click)=\"onLibraryMapSelect(selectedLibraryIdInMap === lib.id ? '' : lib.id)\">\r\n            {{ lib.name }}\r\n          </button>\r\n        </div>\r\n        <small *ngIf=\"selectedSlotLibrariesForDropdown.length === 0\" class=\"text-muted\">\r\n          No libraries linked to this slot yet. Add some in the \"Fixture libraries\" multiselect above.\r\n        </small>\r\n      </div>\r\n\r\n      <div *ngIf=\"loadingLibraryDetails\" class=\"text-muted\">Loading fixture details\u2026</div>\r\n\r\n      <!--\r\n        Use *ngFor + trackBy keyed on (look, slot, library) so Angular treats\r\n        a switch as a new item \u2014 that forces the embedded template-products\r\n        / template-vms components to remount and rerun their ngOnInit\r\n        (otherwise their `isPageLoading` guard skips the form rebuild).\r\n      -->\r\n      <ng-container *ngFor=\"let _ of embeddedHostKeys; trackBy: trackByEmbeddedKey\">\r\n        <ul class=\"nav nav-tabs custom-tabs mb-3\">\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'products'\"\r\n              (click)=\"embeddedTab = 'products'\">Product Merchandising</button>\r\n          </li>\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'vms'\"\r\n              (click)=\"embeddedTab = 'vms'\">Visual Merchandising</button>\r\n          </li>\r\n        </ul>\r\n\r\n        <div *ngIf=\"embeddedTab === 'products'\">\r\n          <lib-template-products [looksMode]=\"true\"></lib-template-products>\r\n        </div>\r\n        <div *ngIf=\"embeddedTab === 'vms'\">\r\n          <lib-template-vms [looksMode]=\"true\"></lib-template-vms>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</section>\r\n", styles: [".access-denied .access-denied-icon i{font-size:48px;color:#ef4444;line-height:1}.look-form .col-md-3>.card,.look-form .col-md-6>.card{display:flex!important;flex-direction:column;height:85vh!important;min-height:720px}.look-form .looks-tree,.look-form .slots-list,.look-form .placements-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.look-form .look-row,.look-form .slot-row{cursor:pointer;border:1px solid transparent;background:#f9fafb;transition:filter .15s ease,box-shadow .15s ease,border-color .15s ease}.look-form .look-row:hover,.look-form .slot-row:hover{filter:brightness(.96)}.look-form .look-row.selected,.look-form .slot-row.selected{filter:brightness(.96);outline:1px solid rgba(14,165,233,.55);outline-offset:-1px}.look-form .bucket-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}.look-form .look-row-actions{flex-shrink:0;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s ease}.look-form .look-row-actions .row-action-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;transition:background-color .15s ease,color .15s ease}.look-form .look-row-actions .row-action-btn i{font-size:13px;line-height:1}.look-form .look-row-actions .row-action-btn:hover{background:#fff}.look-form .look-row-actions .row-action-btn.duplicate:hover{color:#0ea5e9}.look-form .look-row-actions .row-action-btn.remove:hover{color:#ef4444}.look-form .look-row:hover .look-row-actions,.look-form .look-row.selected .look-row-actions{opacity:1}.look-form .fixture-type-badge{display:inline-block;flex-shrink:0;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:600;line-height:14px;letter-spacing:.2px;border:1px solid transparent;white-space:nowrap}.look-form .fixture-type-badge.badge-wall{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.look-form .fixture-type-badge.badge-floor{background:#fed7aa;color:#9a3412;border-color:#fdba74}.look-form .fixture-type-badge.badge-mixed{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}.look-form .fixture-libraries-select{display:block}.look-form .fixture-libraries-select ::ng-deep .multiselect-container{align-items:flex-start}.look-form .fixture-libraries-select ::ng-deep .chip-list{max-height:84px;overflow-y:auto;padding-right:4px}.look-form .cad-header-variants-input{display:block}.look-form .cad-header-variants-input ::ng-deep .chips-input{max-height:84px;overflow-y:auto;align-content:flex-start;padding-right:4px}.look-form .placement-row .placement-fields .ph-field{flex:1 1 0;min-width:0}.look-form .placement-row .placement-fields .ph-remove{flex:0 0 auto}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multiselect-container{padding:4px 10px;min-height:31px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .chip-list{min-height:21px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multi-placeholder{font-size:13px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.look-form .library-config-card .library-chips{display:flex;flex-wrap:wrap;gap:8px}.look-form .library-config-card .library-chip{background:#f1f5f9;border:1px solid #cbd5e1;color:#1e293b;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.look-form .library-config-card .library-chip:hover{background:#e2e8f0;border-color:#94a3b8}.look-form .library-config-card .library-chip.active{background:#0ea5e9;border-color:#0284c7;color:#fff}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col-8>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products input[readonly]{background-color:var(--bs-gray-200, #e9ecef);cursor:not-allowed}.look-form .library-config-card .fixture-preview{border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:12px}.look-form .library-config-card .fixture-preview .fx-header,.look-form .library-config-card .fixture-preview .fx-footer{background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px;padding:6px 10px;font-size:12px;color:#475569;text-align:center;margin:4px 0}.look-form .library-config-card .fixture-preview .fx-body{display:flex;flex-direction:column;gap:4px;padding:4px 0}.look-form .library-config-card .fixture-preview .fx-shelf{background:linear-gradient(180deg,#f8fafc,#eef2f7);border:1px solid #cbd5e1;border-radius:4px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px;min-height:36px}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-badge{background:#0ea5e9;color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;font-size:11px;flex-shrink:0}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-label{font-weight:500;color:#1e293b}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-meta{color:#64748b;font-size:11px;margin-left:auto}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray{background:linear-gradient(180deg,#fef3c7,#fde68a);border-color:#f59e0b}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray .fx-shelf-badge{background:#d97706}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly{background:linear-gradient(180deg,#ede9fe,#ddd6fe);border-color:#8b5cf6}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly .fx-shelf-badge{background:#7c3aed}.look-form .library-config-card .fixture-preview .fx-dims{text-align:center}.look-form .library-config-card .shelf-mappings{max-height:70vh;overflow-y:auto;padding-right:4px}.look-form .library-config-card .shelf-mappings .shelf-mapping{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#f9fafb}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i2$1.GlobalStateService }, { type: StoreBuilderService }, { type: i4.ToastService }, { type: i2$1.PageInfoService }, { type: PlanoDataService }] });
 
 const routes$1 = [
@@ -73520,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);
         }
     }
@@ -73709,6 +73823,11 @@ class StorePlanoComponent {
                 },
             });
         }
+        else if (this.floorData) {
+            setTimeout(() => {
+                this.drawInitialContent();
+            }, 300);
+        }
     }
     buildRevisionSelectItems() {
         this.revisionSelectItems = this.revisionPlanoList.map((r, i) => ({
@@ -73919,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)
@@ -73955,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 }]
@@ -73984,6 +74124,7 @@ class TangoStorePlanoModule {
             FormsModule,
             ReactiveFormsModule,
             NgbTooltipModule,
+            NgbDropdownModule,
             InstanceBasicDetailsComponent,
             InstanceProductsComponent,
             InstanceVmsComponent,
@@ -73998,6 +74139,7 @@ class TangoStorePlanoModule {
             FormsModule,
             ReactiveFormsModule,
             NgbTooltipModule,
+            NgbDropdownModule,
             InstanceBasicDetailsComponent,
             InstanceProductsComponent,
             InstanceVmsComponent,
@@ -74014,6 +74156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgbTooltipModule,
+                        NgbDropdownModule,
                         InstanceBasicDetailsComponent,
                         InstanceProductsComponent,
                         InstanceVmsComponent,