npm - tango-app-ui-store-builder - Versions diffs - 1.2.2 → 1.2.5 - Mend

tango-app-ui-store-builder 1.2.2 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

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

@@ -10,7 +10,7 @@ import * as i1$2 from '@angular/forms';
 import { FormControl, FormGroup, FormsModule, NG_VALUE_ACCESSOR, FormArray, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i7 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { BehaviorSubject, Subject, takeUntil, debounceTime, finalize, lastValueFrom, firstValueFrom, fromEvent, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, map as map$1, timer, tap, catchError } from 'rxjs';
+import { BehaviorSubject, Subject, takeUntil, debounceTime, finalize, lastValueFrom, firstValueFrom, fromEvent, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, map as map$1, timer, tap, catchError, switchMap, of, shareReplay } from 'rxjs';
 import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbActiveOffcanvas, NgbTooltipModule, NgbTooltip, NgbActiveModal, NgbAccordionModule, NgbDropdownModule, NgbOffcanvasModule } from '@ng-bootstrap/ng-bootstrap';
 import dayjs from 'dayjs';
@@ -663,9 +663,23 @@ class StoreBuilderService {
     deleteTaskForStores(data) {
         return this.http.post(`${this.storeBuilderApiUrl}/task/deleteTaskForStores`, data);
     }
+    getFloorsWithStatus(storeName, clientId) {
+        return this.http.get(`${this.storeBuilderApiUrl}/task/getFloorsWithStatus`, { params: { storeName, clientId } });
+    }
+    moveStoreBucket(data) {
+        return this.http.post(`${this.storeBuilderApiUrl}/task/moveStoreBucket`, data);
+    }
+    swapFixtureTemplate(data) {
+        return this.http.post(`${this.storeBuilderApiUrl}/script/swapFixtureTemplate`, data);
+    }
     getPlanoDataSchema() {
         return this.http.get(`${this.storeBuilderApiUrl}/getPlanoDataSchema`);
     }
+    getCadFiles(storeName) {
+        return this.http.get(`${this.storeBuilderApiUrl}/onboardPlano/cadFiles`, {
+            params: { storeName },
+        });
+    }
     runPlanoDataQuery(data) {
         return this.http.post(`${this.storeBuilderApiUrl}/runPlanoDataQuery`, data);
     }
@@ -834,6 +848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class CustomSelectComponent {
     cd;
     authService;
+    destroy$ = new Subject();
     onClick(event) {
         const target = event.target;
         if (!target.closest('.dropdown')) {
@@ -853,19 +868,26 @@ class CustomSelectComponent {
     showDropdown;
     searchValue;
     instanceId;
+    trackByItem = (_, item) => this.idField && item ? item[this.idField] : item;
     constructor(cd, authService) {
         this.cd = cd;
         this.authService = authService;
     }
     ngOnInit() {
         this.instanceId = crypto.randomUUID();
-        this.authService.dropDownTrigger.subscribe((e) => {
-            if (e !== this.instanceId) {
+        this.authService.dropDownTrigger
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((e) => {
+            if (e && e !== this.instanceId && this.showDropdown) {
                 this.showDropdown = false;
                 this.cd.detectChanges();
             }
         });
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
     ngOnChanges(changes) {
         if (changes['items'] && this.items?.length) {
             this.initializeItems();
@@ -956,11 +978,11 @@ class CustomSelectComponent {
         return this.filteredValues.every((item) => item.isSelected);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: StoreBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomSelectComponent, selector: "lib-select-plano", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label", compact: "compact" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\" [class.compact]=\"compact\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" for=\"selectAll\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container.compact{min-width:0}.outer-container.compact .form-select{height:30px;font-size:13px;font-weight:500;padding:4px 10px;display:flex;align-items:center}.outer-container.compact .input-container .input-wrapper{padding:6px}.outer-container.compact .input-container .input-wrapper input{padding:6px 10px 6px 28px;font-size:12px}.outer-container.compact .input-container .input-wrapper .search-icon{left:14px;top:14px}.outer-container.compact .input-container ul{max-height:180px}.outer-container.compact .input-container ul li{padding:4px 10px}.outer-container.compact .input-container ul li .form-check-label{font-size:12px;line-height:16px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\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.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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomSelectComponent, selector: "lib-select-plano", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label", compact: "compact" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\" [class.compact]=\"compact\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div *ngIf=\"showDropdown\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" for=\"selectAll\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; trackBy: trackByItem\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container.compact{min-width:0}.outer-container.compact .form-select{height:30px;font-size:13px;font-weight:500;padding:4px 10px;display:flex;align-items:center}.outer-container.compact .input-container .input-wrapper{padding:6px}.outer-container.compact .input-container .input-wrapper input{padding:6px 10px 6px 28px;font-size:12px}.outer-container.compact .input-container .input-wrapper .search-icon{left:14px;top:14px}.outer-container.compact .input-container ul{max-height:180px}.outer-container.compact .input-container ul li{padding:4px 10px}.outer-container.compact .input-container ul li .form-check-label{font-size:12px;line-height:16px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\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.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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-select-plano', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\" [class.compact]=\"compact\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" for=\"selectAll\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container.compact{min-width:0}.outer-container.compact .form-select{height:30px;font-size:13px;font-weight:500;padding:4px 10px;display:flex;align-items:center}.outer-container.compact .input-container .input-wrapper{padding:6px}.outer-container.compact .input-container .input-wrapper input{padding:6px 10px 6px 28px;font-size:12px}.outer-container.compact .input-container .input-wrapper .search-icon{left:14px;top:14px}.outer-container.compact .input-container ul{max-height:180px}.outer-container.compact .input-container ul li{padding:4px 10px}.outer-container.compact .input-container ul li .form-check-label{font-size:12px;line-height:16px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
+            args: [{ selector: 'lib-select-plano', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\" [class.compact]=\"compact\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div *ngIf=\"showDropdown\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" for=\"selectAll\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; trackBy: trackByItem\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container.compact{min-width:0}.outer-container.compact .form-select{height:30px;font-size:13px;font-weight:500;padding:4px 10px;display:flex;align-items:center}.outer-container.compact .input-container .input-wrapper{padding:6px}.outer-container.compact .input-container .input-wrapper input{padding:6px 10px 6px 28px;font-size:12px}.outer-container.compact .input-container .input-wrapper .search-icon{left:14px;top:14px}.outer-container.compact .input-container ul{max-height:180px}.outer-container.compact .input-container ul li{padding:4px 10px}.outer-container.compact .input-container ul li .form-check-label{font-size:12px;line-height:16px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: StoreBuilderService }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -6971,6 +6993,8 @@ class DeleteConfirmationComponent {
     activeModal;
     title = 'Delete action';
     description = 'Are you sure you want to delete this item?';
+    confirmLabel = 'Delete';
+    confirmClass = 'btn-danger';
     constructor(activeModal) {
         this.activeModal = activeModal;
     }
@@ -6981,15 +7005,19 @@ class DeleteConfirmationComponent {
         this.activeModal.close('ok');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteConfirmationComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteConfirmationComponent, selector: "app-delete-confirmation", inputs: { title: "title", description: "description" }, ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n  <div class=\"d-flex flex-start mb-5\">\r\n    <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n      <path\r\n        d=\"M27.9998 24.0002V28.0002M27.9998 32.0002H28.0098M26.2898 18.8602L17.8198 33.0002C17.6451 33.3026 17.5527 33.6455 17.5518 33.9947C17.5508 34.3439 17.6413 34.6873 17.8142 34.9907C17.9871 35.2941 18.2365 35.547 18.5375 35.7241C18.8385 35.9012 19.1806 35.9964 19.5298 36.0002H36.4698C36.819 35.9964 37.1611 35.9012 37.4621 35.7241C37.7631 35.547 38.0124 35.2941 38.1854 34.9907C38.3583 34.6873 38.4488 34.3439 38.4478 33.9947C38.4468 33.6455 38.3544 33.3026 38.1798 33.0002L29.7098 18.8602C29.5315 18.5663 29.2805 18.3233 28.981 18.1547C28.6814 17.9861 28.3435 17.8975 27.9998 17.8975C27.656 17.8975 27.3181 17.9861 27.0186 18.1547C26.7191 18.3233 26.468 18.5663 26.2898 18.8602Z\"\r\n        stroke=\"#DC6803\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  </div>\r\n\r\n  <h3 class=\"mb-4\">{{ title }}</h3>\r\n\r\n  <p>{{ description }}</p>\r\n\r\n  <div class=\"modal-actions mt-5\">\r\n    <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n    <button type=\"button\" class=\"btn btn-danger px-4\" (click)=\"onDelete()\">Delete</button>\r\n  </div>\r\n</div>\r\n", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteConfirmationComponent, selector: "app-delete-confirmation", inputs: { title: "title", description: "description", confirmLabel: "confirmLabel", confirmClass: "confirmClass" }, ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n  <div class=\"d-flex flex-start mb-5\">\r\n    <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n      <path\r\n        d=\"M27.9998 24.0002V28.0002M27.9998 32.0002H28.0098M26.2898 18.8602L17.8198 33.0002C17.6451 33.3026 17.5527 33.6455 17.5518 33.9947C17.5508 34.3439 17.6413 34.6873 17.8142 34.9907C17.9871 35.2941 18.2365 35.547 18.5375 35.7241C18.8385 35.9012 19.1806 35.9964 19.5298 36.0002H36.4698C36.819 35.9964 37.1611 35.9012 37.4621 35.7241C37.7631 35.547 38.0124 35.2941 38.1854 34.9907C38.3583 34.6873 38.4488 34.3439 38.4478 33.9947C38.4468 33.6455 38.3544 33.3026 38.1798 33.0002L29.7098 18.8602C29.5315 18.5663 29.2805 18.3233 28.981 18.1547C28.6814 17.9861 28.3435 17.8975 27.9998 17.8975C27.656 17.8975 27.3181 17.9861 27.0186 18.1547C26.7191 18.3233 26.468 18.5663 26.2898 18.8602Z\"\r\n        stroke=\"#DC6803\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  </div>\r\n\r\n  <h3 class=\"mb-4\">{{ title }}</h3>\r\n\r\n  <p>{{ description }}</p>\r\n\r\n  <div class=\"modal-actions mt-5\">\r\n    <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n    <button type=\"button\" class=\"btn px-4\" [ngClass]=\"confirmClass\" (click)=\"onDelete()\">{{ confirmLabel }}</button>\r\n  </div>\r\n</div>\r\n", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-delete-confirmation', template: "<div class=\"modal-wrapper\">\r\n  <div class=\"d-flex flex-start mb-5\">\r\n    <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n      <path\r\n        d=\"M27.9998 24.0002V28.0002M27.9998 32.0002H28.0098M26.2898 18.8602L17.8198 33.0002C17.6451 33.3026 17.5527 33.6455 17.5518 33.9947C17.5508 34.3439 17.6413 34.6873 17.8142 34.9907C17.9871 35.2941 18.2365 35.547 18.5375 35.7241C18.8385 35.9012 19.1806 35.9964 19.5298 36.0002H36.4698C36.819 35.9964 37.1611 35.9012 37.4621 35.7241C37.7631 35.547 38.0124 35.2941 38.1854 34.9907C38.3583 34.6873 38.4488 34.3439 38.4478 33.9947C38.4468 33.6455 38.3544 33.3026 38.1798 33.0002L29.7098 18.8602C29.5315 18.5663 29.2805 18.3233 28.981 18.1547C28.6814 17.9861 28.3435 17.8975 27.9998 17.8975C27.656 17.8975 27.3181 17.9861 27.0186 18.1547C26.7191 18.3233 26.468 18.5663 26.2898 18.8602Z\"\r\n        stroke=\"#DC6803\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  </div>\r\n\r\n  <h3 class=\"mb-4\">{{ title }}</h3>\r\n\r\n  <p>{{ description }}</p>\r\n\r\n  <div class=\"modal-actions mt-5\">\r\n    <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n    <button type=\"button\" class=\"btn btn-danger px-4\" (click)=\"onDelete()\">Delete</button>\r\n  </div>\r\n</div>\r\n", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}\n"] }]
+            args: [{ selector: 'app-delete-confirmation', template: "<div class=\"modal-wrapper\">\r\n  <div class=\"d-flex flex-start mb-5\">\r\n    <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n      <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n      <path\r\n        d=\"M27.9998 24.0002V28.0002M27.9998 32.0002H28.0098M26.2898 18.8602L17.8198 33.0002C17.6451 33.3026 17.5527 33.6455 17.5518 33.9947C17.5508 34.3439 17.6413 34.6873 17.8142 34.9907C17.9871 35.2941 18.2365 35.547 18.5375 35.7241C18.8385 35.9012 19.1806 35.9964 19.5298 36.0002H36.4698C36.819 35.9964 37.1611 35.9012 37.4621 35.7241C37.7631 35.547 38.0124 35.2941 38.1854 34.9907C38.3583 34.6873 38.4488 34.3439 38.4478 33.9947C38.4468 33.6455 38.3544 33.3026 38.1798 33.0002L29.7098 18.8602C29.5315 18.5663 29.2805 18.3233 28.981 18.1547C28.6814 17.9861 28.3435 17.8975 27.9998 17.8975C27.656 17.8975 27.3181 17.9861 27.0186 18.1547C26.7191 18.3233 26.468 18.5663 26.2898 18.8602Z\"\r\n        stroke=\"#DC6803\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  </div>\r\n\r\n  <h3 class=\"mb-4\">{{ title }}</h3>\r\n\r\n  <p>{{ description }}</p>\r\n\r\n  <div class=\"modal-actions mt-5\">\r\n    <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n    <button type=\"button\" class=\"btn px-4\" [ngClass]=\"confirmClass\" (click)=\"onDelete()\">{{ confirmLabel }}</button>\r\n  </div>\r\n</div>\r\n", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }], propDecorators: { title: [{
                 type: Input
             }], description: [{
                 type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], confirmClass: [{
+                type: Input
             }] } });
 class PublishPlanoModalComponent {
@@ -13408,7 +13436,12 @@ class ZoneVerificationFeedbackComponent {
         return this.isApproved || this.currentUserAction === "redo";
     }
     get isClFixture() {
-        return this.planoFixture?.header?.label === "CL";
+        // Match the compliance-side CL rule: header.label === 'CL' OR templateGroupName
+        // === 'CL'. planoFixture is the live store fixture record so templateGroupName
+        // is always populated; this catches CL fixtures whose mobile-side header was
+        // reported with a brand-specific label.
+        return (this.planoFixture?.header?.label === "CL" ||
+            this.planoFixture?.templateGroupName === "CL");
     }
     get zoneImageUrl() {
         const rel = this.zoneFixture?.fixtureImage ??
@@ -13673,6 +13706,16 @@ class ManageStorePlanoComponent {
     storeFeedback;
     zoneFeedback;
     selectedZoneFeedback;
+    // CL detection: header.label null/missing or 'CL' (legacy mobile clients), OR the
+    // newer templateGroupName snapshot === 'CL' (mobile started writing this onto
+    // answers[0] for zone submissions to catch brand-labeled CL fixtures). Older zone
+    // rows without templateGroupName still fall back to the header-label check.
+    isClComplianceAnswer(ans) {
+        const label = ans?.header?.label;
+        if (label == null || label === "CL")
+            return true;
+        return ans?.templateGroupName === "CL";
+    }
     get zonePendingCount() {
         const task = this.zoneFeedback?.zoneVerificationTask;
         if (!task)
@@ -13683,9 +13726,7 @@ class ManageStorePlanoComponent {
             const ans = row?.answers?.[0];
             if (!ans)
                 continue;
-            const label = ans?.header?.label;
-            // CL on compliance side: header.label null/missing or 'CL'
-            if (label == null || label === "CL")
+            if (this.isClComplianceAnswer(ans))
                 continue;
             const hasResponse = Array.isArray(ans?.shelfConfig) && ans.shelfConfig.length > 0;
             if (hasResponse && !ans?.userAction)
@@ -13695,16 +13736,15 @@ class ManageStorePlanoComponent {
     }
     get zoneRedoCount() {
         // Iterate compliance rows directly so a redo flag is detected even if the floor
-        // data isn't refreshed yet. CL skip mirrors the BE rollup: compliance docs leave
-        // header.label null/missing for CL (and 'CL' is a legacy fallback).
+        // data isn't refreshed yet. CL skip uses isClComplianceAnswer (header label OR
+        // templateGroupName snapshot) — same rule as the BE rollup.
         const rows = this.zoneFeedback?.zoneVerificationData ?? [];
         let count = 0;
         for (const row of rows) {
             const ans = row?.answers?.[0];
             if (!ans)
                 continue;
-            const label = ans?.header?.label;
-            if (label == null || label === "CL")
+            if (this.isClComplianceAnswer(ans))
                 continue;
             if (ans.userAction === "redo")
                 count++;
@@ -13745,6 +13785,33 @@ class ManageStorePlanoComponent {
         }
         return { name: "Review Pending", class: "reviewPending" };
     }
+    // Top "Publish" button visibility: appears once layout+fixture+vm are Approved,
+    // regardless of zone state. Supports legacy stores (no zone task) by enabling
+    // immediately, and gates active zone tasks via topPublishDisabled below.
+    get showTopPublish() {
+        return (this.taskStyle.layout.name === "Approved" &&
+            this.taskStyle.fixture.name === "Approved" &&
+            this.taskStyle.vm.name === "Approved");
+    }
+    // Top "Publish" button disabled when a zone task exists and isn't Approved yet.
+    // Keeps the disabledPublish signal from BE (taskInfo.disabled / editing) intact.
+    get topPublishDisabled() {
+        const zoneTaskExists = !!this.zoneFeedback?.zoneVerificationTask;
+        const zoneApproved = !zoneTaskExists || this.zoneTaskStyle.name === "Approved";
+        return this.disabledPublish || !zoneApproved;
+    }
+    // Tells inside-fixture editors whether to ask the BE to revert downstream
+    // verifications on save. True whenever any verification (fixture / vm / zone) is
+    // past YetToAssign, mirroring updateStorePlano's always-on revertOnEdit. AI
+    // verification flows (keepPlano / modifyPlano / modifyAiResponse / zone editAccepted)
+    // and rollout edits are filtered earlier by the children's `!fixtureData?.taskType
+    // && !isRollout` gate, so widening this here only affects normal layout-edit-mode
+    // fixture saves — which is exactly the case that should invalidate downstream tasks.
+    get shouldRevertOnEdit() {
+        return (this.taskStyle.fixture.class !== "yetToAssign" ||
+            this.taskStyle.vm.class !== "yetToAssign" ||
+            this.zoneTaskStyle.class !== "yetToAssign");
+    }
     selectedFixture;
     selectedFixtureData;
     selectedFixtureFeedback;
@@ -17909,19 +17976,24 @@ class ManageStorePlanoComponent {
         }
         if (result?.status !== "submit")
             return;
-        if (result?.comments) {
-            this.apiService
-                .updateGlobalComment({
-                floorId: this.floorData._id,
-                planoId: this.floorData.planoId,
-                taskType: "zoneVerification",
-                comment: result.comments,
-            })
-                .subscribe({ next: () => { } });
-        }
+        // Create the task first so we have the new taskId to attach to the global
+        // comment — otherwise the comment would be saved with taskId: undefined and
+        // would never be picked up by the zone task's commentLookup join.
         this.apiService.createTask(payload).subscribe({
             next: (res) => {
                 if (res?.status === "success") {
+                    const newTaskId = res?.data?.taskId;
+                    if (result?.comments) {
+                        this.apiService
+                            .updateGlobalComment({
+                            floorId: this.floorData._id,
+                            planoId: this.floorData.planoId,
+                            taskType: "zoneVerification",
+                            taskId: newTaskId,
+                            comment: result.comments,
+                        })
+                            .subscribe({ next: () => { } });
+                    }
                     this.taskDetails(this.floorData.planoId, this.floorData._id);
                     this.getZoneVerificationFeedback(this.floorData.planoId, this.floorData._id);
                     this.toastService.getSuccessToast(res?.data?.message);
@@ -17970,6 +18042,7 @@ class ManageStorePlanoComponent {
                 floorId: this.floorData._id,
                 planoId: this.floorData.planoId,
                 taskType: "zoneVerification",
+                taskId,
                 comment: result.comments,
             })
                 .subscribe({ next: () => { } });
@@ -18455,11 +18528,11 @@ class ManageStorePlanoComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n  <!-- Loading State -->\r\n  <div *ngIf=\"isPageLoading\" class=\"row\">\r\n    <div class=\"col-12 m-0\">\r\n      <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-6\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n    <!-- Header Accordion -->\r\n    <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n      <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n        <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n          <div class=\"d-flex gap-4 align-items-center\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n                <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n              </div>\r\n              <div>\r\n                <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n                  [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n                </lib-select-plano>\r\n              </div>\r\n            </div>\r\n\r\n            <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n              [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n            </lib-reactive-select>\r\n\r\n            <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\r\n\r\n              <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_408_16498)\">\r\n                  <path\r\n                    d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n                    stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_408_16498\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n              <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n                aria-hidden=\"true\"></span>\r\n\r\n            </div>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n              View camera\r\n\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_422_36321)\">\r\n                  <path\r\n                    d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_422_36321\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-4\">\r\n            <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.lastUpdate}}</div>\r\n\r\n            <div class=\"d-flex gap-4 align-items-center\">\r\n              <!-- Edit Fixture Mode -->\r\n              <ng-container *ngIf=\"editFixture\">\r\n                <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                  Save & Close\r\n                </button>\r\n              </ng-container>\r\n\r\n              <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n                   Top-right shows only the final overall \"Publish\" once everything is approved. -->\r\n              <ng-container *ngIf=\"publishingState == 'complete'\">\r\n                <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n                <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                  (click)=\"publish()\" [disabled]=\"disabledPublish\">\r\n                  Publish\r\n                </button>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n              <button ngbAccordionButton></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div ngbAccordionCollapse>\r\n          <div ngbAccordionBody>\r\n            <ng-template>\r\n            <div id=\"header\" class=\"row mx-0 gap-3\">\r\n              <!-- Plano Completion -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3 class=\"d-flex align-items-center gap-2\">\r\n                  Plano Completion %\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n                    ngbTooltip=\"% of overall planogram completion\">\r\n                    <g clip-path=\"url(#clip0_1517_129805)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1517_129805\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </h3>\r\n                <div class=\"row align-items-center mt-2\">\r\n                  <div class=\"col-9\">\r\n                    <div class=\"progress\" style=\"height: 4px\">\r\n                      <div class=\"progress-bar\" [ngClass]=\"\r\n                          taskInfo?.planoProgress <= 50\r\n                            ? 'bg-warning'\r\n                            : taskInfo?.planoProgress === 75\r\n                            ? 'bg-primary'\r\n                            : 'bg-success'\r\n                        \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                        [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Layout -->\r\n              <div style=\"cursor: unset;\" class=\"col-auto filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n                  </div>\r\n                  <div class=\"indicator\" [ngClass]=\"taskStyle.layout.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.layout.name }}\r\n                  </div>\r\n                  <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594lay)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594lay\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                  -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n                    <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                      type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                      {{ publishingState === 'fixture-redo' ? 'Publish Fixture Redo' : 'Publish Fixture Verification' }}\r\n                    </button>\r\n                    <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n                      class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_640_5594fix)\">\r\n                          <path\r\n                            d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                          <clipPath id=\"clip0_640_5594fix\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                          </clipPath>\r\n                        </defs>\r\n                      </svg>\r\n                      Revoke\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"indicator\" [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>\r\n\r\n              <!-- Visual Merchandise -->\r\n              <!--\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                    <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.vm.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594vm)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594vm\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              -->\r\n\r\n              <!-- Zone Verification -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n                    <h3 class=\"m-0\">Zone Verification</h3>\r\n                    <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n                      class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n                      Publish Zone Verification\r\n                    </button>\r\n                    <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n                      class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n                      Publish Zone Redo\r\n                    </button>\r\n                    <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n                      class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_640_5594z)\">\r\n                          <path\r\n                            d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                          <clipPath id=\"clip0_640_5594z\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                          </clipPath>\r\n                        </defs>\r\n                      </svg>\r\n                      Revoke\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"indicator\" [ngClass]=\"zoneTaskStyle.class\">\r\n                    <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_4984_27569)\">\r\n                          <path\r\n                            d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                            stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                          <clipPath id=\"clip0_4984_27569\">\r\n                            <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                          </clipPath>\r\n                        </defs>\r\n                      </svg>\r\n                    </span>\r\n                    {{ zoneTaskStyle.name }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div id=\"body\" class=\"row\">\r\n      <!-- Left Column -->\r\n      <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n        <div class=\"s-card\">\r\n          <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n            <div ngbAccordion accordion=\"NgbAccordion\">\r\n              <!-- Walls Section -->\r\n              <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                <ng-container formArrayName=\"walls\">\r\n                  <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                    <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                      <div class=\"d-flex\" ngbAccordionHeader>\r\n                        <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                          <div class=\"d-flex align-items-center\">\r\n                            <span class=\"me-2 wall-label\">\r\n                              {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n                            </span>\r\n\r\n                            @if(layoutForm.enabled){\r\n                              <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                    fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_62_8)\">\r\n                                    <path\r\n                                      d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                      fill=\"#475467\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_62_8\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_63_25)\">\r\n                                    <path\r\n                                      d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                      fill=\"#F32B2B\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_63_25\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                            }\r\n                          </div>\r\n                          <div class=\"divider\"></div>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <div ngbAccordionCollapse>\r\n                        <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                          <ng-template>\r\n                            <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n                              <!-- Fixtures -->\r\n                              <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                <div formArrayName=\"fixtures\">\r\n                                  <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                    <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n                                      [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                      class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                          <svg dndDragImageRef\r\n                                            [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                            width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                              d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                              fill=\"grey\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-10\">\r\n                                        <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                          [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                          [subTextField]=\"'subtext'\" [search]=\"true\">\r\n                                        </lib-reactive-select>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewFixture('wall', i)\">\r\n                                  Add fixture\r\n                                </a>\r\n                              </div>\r\n\r\n                              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                              <!-- Other Elements -->\r\n                              <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                <div formArrayName=\"otherElements\">\r\n                                  <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                    <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                      <div class=\"col-11\">\r\n                                        <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                        <!-- Dropdown bound to 'type' -->\r\n                                        <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                          [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n                                        </lib-reactive-select>\r\n\r\n                                        <!-- Show custom text input only when 'Others' is selected -->\r\n                                        <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                          class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                          placeholder=\"Enter custom element name\" />\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewOtherElements('wall', i)\">\r\n                                  Add element\r\n                                </a>\r\n                              </div>\r\n                            </div>\r\n                          </ng-template>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-template #addWallAction>\r\n                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                  class=\"btn btn-secondary w-100 p-2\">\r\n                  Insert new wall\r\n                </button>\r\n              </ng-template>\r\n\r\n              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n              <!-- Floor Section -->\r\n              <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                  <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                    <span class=\"me-2 wall-label\">Floor</span>\r\n                    <div class=\"divider\"></div>\r\n                  </button>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                  <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                    <ng-template>\r\n                      <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n                        <!-- Floor Fixtures -->\r\n                        <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                          <div formArrayName=\"floorFixtures\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                              <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                    <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n                                      viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                      <path\r\n                                        d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                        fill=\"grey\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"col-10\">\r\n                                  <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                    [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                    [search]=\"true\" [subTextField]=\"'subtext'\">\r\n                                  </lib-reactive-select>\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"deleteFixture('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewFixture('floor')\">\r\n                            Add fixture\r\n                          </a>\r\n                        </div>\r\n\r\n                        <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                        <!-- Floor Other Elements -->\r\n                        <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                          <div formArrayName=\"floorOtherElements\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                              <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                <div class=\"col-11\">\r\n                                  <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                  <!-- Dropdown for type -->\r\n                                  <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                    [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n                                  </lib-reactive-select>\r\n\r\n                                  <!-- Conditional input for custom name -->\r\n                                  <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                    class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                    placeholder=\"Enter custom element name\" />\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewOtherElements('floor')\">\r\n                            Add element\r\n                          </a>\r\n                        </div>\r\n                      </div>\r\n                    </ng-template>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Center Column -->\r\n      <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n        <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n          <!-- Canvas View -->\r\n          <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n            <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n          </div>\r\n\r\n          <!-- Tree View -->\r\n          <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n            <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n          </div>\r\n\r\n          <!-- Top Controls -->\r\n          <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n            <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n              <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n                    (click)=\"selectedView = 'detail'\">\r\n                    Detail View\r\n                  </button>\r\n                </li>\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n                    (click)=\"selectedView = 'tree'\">\r\n                    Tree View\r\n                  </button>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- PID Allocation -->\r\n          <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n              Apply Logics\r\n            </button>\r\n          </div> -->\r\n\r\n          <!-- Entrance Button -->\r\n          <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n              class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n              Add Entrance\r\n            </button>\r\n          </div>\r\n\r\n          <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n            <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              (click)=\"cancelEdit()\">\r\n              Cancel\r\n            </button>\r\n          </div>\r\n\r\n\r\n          <!-- Edit Button -->\r\n          <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n            style=\"top: 24px; right: 164px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"onClickEdit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <g clip-path=\"url(#clip0_1322_5325)\">\r\n                <path\r\n                  d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </g>\r\n              <defs>\r\n                <clipPath id=\"clip0_1322_5325\">\r\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                </clipPath>\r\n              </defs>\r\n            </svg>\r\n            Edit\r\n          </button>\r\n\r\n          <!-- Rotate Button -->\r\n          <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"rotateCanvas(canvas,90)\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n              <path\r\n                d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                fill=\"#1D2939\" />\r\n              <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </button>\r\n\r\n          <!-- Submit Button -->\r\n          <button *ngIf=\"!layoutForm.disabled\"\r\n            style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n            [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n            <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n              aria-hidden=\"true\"></span>\r\n            Save\r\n          </button>\r\n\r\n          <!-- Download Button -->\r\n          <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"downloadCanvas()\">\r\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n                stroke-width=\"0.384\"></g>\r\n              <g id=\"SVGRepo_iconCarrier\">\r\n                <path\r\n                  d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                  fill=\"#1D2939\"></path>\r\n                <path\r\n                  d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                  fill=\"#1D2939\"></path>\r\n              </g>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Panel Collapse Handlers -->\r\n        <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n          <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n          <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Edit Fixture Body -->\r\n      <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n        <div id=\"edit-body\" class=\"row\">\r\n          <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Basic details\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Products\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Visual Merchandise\r\n              </a>\r\n            </li>\r\n          </ul>\r\n\r\n          <div class=\"col\">\r\n            <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n              <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"publishingState === 'complete'\"\r\n                [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-basic-details>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n              <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"publishingState === 'complete'\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n                (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-products>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n              <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"publishingState === 'complete'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-vms>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n        [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n        <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n  <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n      <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n    } -->\r\n\r\n    <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n      [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Fixture Verification\r\n        </a>\r\n      </li>\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n          class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n          Zone Verification\r\n          <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n            {{ zonePendingCount }}\r\n          </span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <div class=\"feedback-tab-content\">\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n        <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n          <div class=\"card-body\">\r\n\r\n            <!-- Title -->\r\n            <div class=\"storeTitle mb-3\">Store response</div>\r\n            <hr>\r\n\r\n            <!-- Section Header -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n              <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n              <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n              <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n            </div>\r\n            <div class=\"smallText text-muted d-block mb-4\">\r\n              Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"toggle\" class=\"mt-10\">\r\n              <!-- Column Headings -->\r\n              <div class=\"row text-muted small fw-semibold mb-5\">\r\n                <div class=\"col-6\"></div>\r\n                <div class=\"col-3 text-center lightText\">Before</div>\r\n                <div class=\"col-3 text-center lightText\">After</div>\r\n              </div>\r\n\r\n              <!-- Wall Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Wall Fixtures</div>\r\n                <div class=\"col-3 text-center\">\r\n                  {{wallCount - clCount}}\r\n                </div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Euro Centre Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Euro Centre Fixtures</div>\r\n                <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Lenses -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Contact Lenses</div>\r\n                <div class=\"col-3 text-center\">{{clCount}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n                </div>\r\n              </div>\r\n\r\n              <hr>\r\n\r\n              <!-- Total Section -->\r\n              <div class=\"row align-items-center\">\r\n                <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n                </div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\"\r\n                    [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n                    {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n                <div id=\"fixture-comments\" class=\"mt-10\">\r\n                  <h5 class=\"mb-2\">Comments</h5>\r\n\r\n                  <div class=\"log-block\"\r\n                    *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n                    <!-- User avatar -->\r\n                    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                      <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                      <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                      </div>\r\n\r\n                      @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <lib-verification-feedback [floorData]=\"floorData\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n          [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n          *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n        <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n          [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n  <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer w-100 p-4 rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke mt-0 animate title\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n  <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">No Store Video Found</h2>\r\n      <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n      <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n      <p>\r\n        Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n      </p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n        <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n        <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n          <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "component", type: ZoneVerificationFeedbackComponent, selector: "lib-zone-verification-feedback", inputs: ["floorData", "feedbackDetails", "zoneTask", "zoneFeedback", "totalFixtures", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n  <!-- Loading State -->\r\n  <div *ngIf=\"isPageLoading\" class=\"row\">\r\n    <div class=\"col-12 m-0\">\r\n      <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-6\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n    <!-- Header Accordion -->\r\n    <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n      <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n        <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n          <div class=\"d-flex gap-4 align-items-center\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n                <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n              </div>\r\n              <div>\r\n                <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n                  [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n                </lib-select-plano>\r\n              </div>\r\n            </div>\r\n\r\n            <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n              [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n            </lib-reactive-select>\r\n\r\n            <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\r\n\r\n              <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_408_16498)\">\r\n                  <path\r\n                    d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n                    stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_408_16498\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n              <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n                aria-hidden=\"true\"></span>\r\n\r\n            </div>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n              View camera\r\n\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_422_36321)\">\r\n                  <path\r\n                    d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_422_36321\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-4\">\r\n            <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.lastUpdate}}</div>\r\n\r\n            <div class=\"d-flex gap-4 align-items-center\">\r\n              <!-- Edit Fixture Mode -->\r\n              <ng-container *ngIf=\"editFixture\">\r\n                <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                  Save & Close\r\n                </button>\r\n              </ng-container>\r\n\r\n              <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n                   Top-right shows the final overall \"Publish\" once layout+fixture+vm are approved.\r\n                   When a zone task exists and isn't Approved yet, the button stays visible but\r\n                   disabled (so the store can't be published until zone verification completes).\r\n                   Legacy stores without a zone task are unblocked immediately. -->\r\n              <ng-container *ngIf=\"showTopPublish\">\r\n                <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n                <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                  (click)=\"publish()\" [disabled]=\"topPublishDisabled\">\r\n                  Publish\r\n                </button>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n              <button ngbAccordionButton></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div ngbAccordionCollapse>\r\n          <div ngbAccordionBody>\r\n            <ng-template>\r\n            <div id=\"header\" class=\"row mx-0 gap-3\">\r\n              <!-- Plano Completion -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3 class=\"d-flex align-items-center gap-2\">\r\n                  Plano Completion %\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n                    ngbTooltip=\"% of overall planogram completion\">\r\n                    <g clip-path=\"url(#clip0_1517_129805)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1517_129805\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </h3>\r\n                <div class=\"row align-items-center mt-2\">\r\n                  <div class=\"col-9\">\r\n                    <div class=\"progress\" style=\"height: 4px\">\r\n                      <div class=\"progress-bar\" [ngClass]=\"\r\n                          taskInfo?.planoProgress <= 50\r\n                            ? 'bg-warning'\r\n                            : taskInfo?.planoProgress === 75\r\n                            ? 'bg-primary'\r\n                            : 'bg-success'\r\n                        \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                        [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Layout -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                  <div class=\"flex-grow-1\">\r\n                    <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n                    <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.layout.name }}\r\n                    </div>\r\n                  </div>\r\n                  <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594lay)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594lay\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                  -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                  <div class=\"flex-grow-1\">\r\n                    <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n                    <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.fixture.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'fixture-redo' ? 'Publish Redo' : 'Publish Task' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594fix)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594fix\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Visual Merchandise -->\r\n              <!--\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                    <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.vm.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594vm)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594vm\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              -->\r\n\r\n              <!-- Zone Verification -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                  <div class=\"flex-grow-1\">\r\n                    <h3>Zone Verification</h3>\r\n                    <div class=\"indicator mt-2\" [ngClass]=\"zoneTaskStyle.class\">\r\n                      <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      {{ zoneTaskStyle.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n                    class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n                    Publish Task\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n                    class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n                    Publish Redo\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594z)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594z\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div id=\"body\" class=\"row\">\r\n      <!-- Left Column -->\r\n      <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n        <div class=\"s-card\">\r\n          <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n            <div ngbAccordion accordion=\"NgbAccordion\">\r\n              <!-- Walls Section -->\r\n              <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                <ng-container formArrayName=\"walls\">\r\n                  <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                    <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                      <div class=\"d-flex\" ngbAccordionHeader>\r\n                        <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                          <div class=\"d-flex align-items-center\">\r\n                            <span class=\"me-2 wall-label\">\r\n                              {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n                            </span>\r\n\r\n                            @if(layoutForm.enabled){\r\n                              <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                    fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_62_8)\">\r\n                                    <path\r\n                                      d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                      fill=\"#475467\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_62_8\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_63_25)\">\r\n                                    <path\r\n                                      d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                      fill=\"#F32B2B\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_63_25\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                            }\r\n                          </div>\r\n                          <div class=\"divider\"></div>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <div ngbAccordionCollapse>\r\n                        <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                          <ng-template>\r\n                            <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n                              <!-- Fixtures -->\r\n                              <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                <div formArrayName=\"fixtures\">\r\n                                  <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                    <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n                                      [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                      class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                          <svg dndDragImageRef\r\n                                            [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                            width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                              d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                              fill=\"grey\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-10\">\r\n                                        <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                          [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                          [subTextField]=\"'subtext'\" [search]=\"true\">\r\n                                        </lib-reactive-select>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewFixture('wall', i)\">\r\n                                  Add fixture\r\n                                </a>\r\n                              </div>\r\n\r\n                              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                              <!-- Other Elements -->\r\n                              <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                <div formArrayName=\"otherElements\">\r\n                                  <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                    <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                      <div class=\"col-11\">\r\n                                        <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                        <!-- Dropdown bound to 'type' -->\r\n                                        <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                          [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n                                        </lib-reactive-select>\r\n\r\n                                        <!-- Show custom text input only when 'Others' is selected -->\r\n                                        <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                          class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                          placeholder=\"Enter custom element name\" />\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewOtherElements('wall', i)\">\r\n                                  Add element\r\n                                </a>\r\n                              </div>\r\n                            </div>\r\n                          </ng-template>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-template #addWallAction>\r\n                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                  class=\"btn btn-secondary w-100 p-2\">\r\n                  Insert new wall\r\n                </button>\r\n              </ng-template>\r\n\r\n              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n              <!-- Floor Section -->\r\n              <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                  <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                    <span class=\"me-2 wall-label\">Floor</span>\r\n                    <div class=\"divider\"></div>\r\n                  </button>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                  <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                    <ng-template>\r\n                      <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n                        <!-- Floor Fixtures -->\r\n                        <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                          <div formArrayName=\"floorFixtures\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                              <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                    <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n                                      viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                      <path\r\n                                        d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                        fill=\"grey\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"col-10\">\r\n                                  <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                    [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                    [search]=\"true\" [subTextField]=\"'subtext'\">\r\n                                  </lib-reactive-select>\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"deleteFixture('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewFixture('floor')\">\r\n                            Add fixture\r\n                          </a>\r\n                        </div>\r\n\r\n                        <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                        <!-- Floor Other Elements -->\r\n                        <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                          <div formArrayName=\"floorOtherElements\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                              <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                <div class=\"col-11\">\r\n                                  <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                  <!-- Dropdown for type -->\r\n                                  <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                    [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n                                  </lib-reactive-select>\r\n\r\n                                  <!-- Conditional input for custom name -->\r\n                                  <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                    class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                    placeholder=\"Enter custom element name\" />\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewOtherElements('floor')\">\r\n                            Add element\r\n                          </a>\r\n                        </div>\r\n                      </div>\r\n                    </ng-template>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Center Column -->\r\n      <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n        <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n          <!-- Canvas View -->\r\n          <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n            <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n          </div>\r\n\r\n          <!-- Tree View -->\r\n          <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n            <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n          </div>\r\n\r\n          <!-- Top Controls -->\r\n          <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n            <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n              <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n                    (click)=\"selectedView = 'detail'\">\r\n                    Detail View\r\n                  </button>\r\n                </li>\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n                    (click)=\"selectedView = 'tree'\">\r\n                    Tree View\r\n                  </button>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- PID Allocation -->\r\n          <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n              Apply Logics\r\n            </button>\r\n          </div> -->\r\n\r\n          <!-- Entrance Button -->\r\n          <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n              class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n              Add Entrance\r\n            </button>\r\n          </div>\r\n\r\n          <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n            <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              (click)=\"cancelEdit()\">\r\n              Cancel\r\n            </button>\r\n          </div>\r\n\r\n\r\n          <!-- Edit Button -->\r\n          <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n            style=\"top: 24px; right: 164px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"onClickEdit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <g clip-path=\"url(#clip0_1322_5325)\">\r\n                <path\r\n                  d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </g>\r\n              <defs>\r\n                <clipPath id=\"clip0_1322_5325\">\r\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                </clipPath>\r\n              </defs>\r\n            </svg>\r\n            Edit\r\n          </button>\r\n\r\n          <!-- Rotate Button -->\r\n          <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"rotateCanvas(canvas,90)\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n              <path\r\n                d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                fill=\"#1D2939\" />\r\n              <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </button>\r\n\r\n          <!-- Submit Button -->\r\n          <button *ngIf=\"!layoutForm.disabled\"\r\n            style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n            [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n            <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n              aria-hidden=\"true\"></span>\r\n            Save\r\n          </button>\r\n\r\n          <!-- Download Button -->\r\n          <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"downloadCanvas()\">\r\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n                stroke-width=\"0.384\"></g>\r\n              <g id=\"SVGRepo_iconCarrier\">\r\n                <path\r\n                  d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                  fill=\"#1D2939\"></path>\r\n                <path\r\n                  d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                  fill=\"#1D2939\"></path>\r\n              </g>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Panel Collapse Handlers -->\r\n        <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n          <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n          <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Edit Fixture Body -->\r\n      <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n        <div id=\"edit-body\" class=\"row\">\r\n          <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Basic details\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Products\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Visual Merchandise\r\n              </a>\r\n            </li>\r\n          </ul>\r\n\r\n          <div class=\"col\">\r\n            <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n              <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"shouldRevertOnEdit\"\r\n                [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-basic-details>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n              <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"shouldRevertOnEdit\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n                (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-products>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n              <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"shouldRevertOnEdit\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-vms>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n        [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n        <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n  <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n      <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n    } -->\r\n\r\n    <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n      [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Fixture Verification\r\n        </a>\r\n      </li>\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n          class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n          Zone Verification\r\n          <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n            {{ zonePendingCount }}\r\n          </span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <div class=\"feedback-tab-content\">\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n        <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n          <div class=\"card-body\">\r\n\r\n            <!-- Title -->\r\n            <div class=\"storeTitle mb-3\">Store response</div>\r\n            <hr>\r\n\r\n            <!-- Section Header -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n              <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n              <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n              <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n            </div>\r\n            <div class=\"smallText text-muted d-block mb-4\">\r\n              Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"toggle\" class=\"mt-10\">\r\n              <!-- Column Headings -->\r\n              <div class=\"row text-muted small fw-semibold mb-5\">\r\n                <div class=\"col-6\"></div>\r\n                <div class=\"col-3 text-center lightText\">Before</div>\r\n                <div class=\"col-3 text-center lightText\">After</div>\r\n              </div>\r\n\r\n              <!-- Wall Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Wall Fixtures</div>\r\n                <div class=\"col-3 text-center\">\r\n                  {{wallCount - clCount}}\r\n                </div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Euro Centre Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Euro Centre Fixtures</div>\r\n                <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Lenses -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Contact Lenses</div>\r\n                <div class=\"col-3 text-center\">{{clCount}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n                </div>\r\n              </div>\r\n\r\n              <hr>\r\n\r\n              <!-- Total Section -->\r\n              <div class=\"row align-items-center\">\r\n                <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n                </div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\"\r\n                    [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n                    {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n                <div id=\"fixture-comments\" class=\"mt-10\">\r\n                  <h5 class=\"mb-2\">Comments</h5>\r\n\r\n                  <div class=\"log-block\"\r\n                    *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n                    <!-- User avatar -->\r\n                    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                      <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                      <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                      </div>\r\n\r\n                      @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <lib-verification-feedback [floorData]=\"floorData\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n          [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n          *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n        <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n          [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n  <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer w-100 p-4 rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke mt-0 animate title\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n  <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">No Store Video Found</h2>\r\n      <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n      <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n      <p>\r\n        Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n      </p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n        <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n        <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n          <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "component", type: ZoneVerificationFeedbackComponent, selector: "lib-zone-verification-feedback", inputs: ["floorData", "feedbackDetails", "zoneTask", "zoneFeedback", "totalFixtures", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n  <!-- Loading State -->\r\n  <div *ngIf=\"isPageLoading\" class=\"row\">\r\n    <div class=\"col-12 m-0\">\r\n      <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-6\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n    <!-- Header Accordion -->\r\n    <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n      <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n        <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n          <div class=\"d-flex gap-4 align-items-center\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n                <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n              </div>\r\n              <div>\r\n                <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n                  [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n                </lib-select-plano>\r\n              </div>\r\n            </div>\r\n\r\n            <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n              [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n            </lib-reactive-select>\r\n\r\n            <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\r\n\r\n              <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_408_16498)\">\r\n                  <path\r\n                    d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n                    stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_408_16498\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n              <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n                aria-hidden=\"true\"></span>\r\n\r\n            </div>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n              View camera\r\n\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_422_36321)\">\r\n                  <path\r\n                    d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_422_36321\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-4\">\r\n            <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.lastUpdate}}</div>\r\n\r\n            <div class=\"d-flex gap-4 align-items-center\">\r\n              <!-- Edit Fixture Mode -->\r\n              <ng-container *ngIf=\"editFixture\">\r\n                <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                  Save & Close\r\n                </button>\r\n              </ng-container>\r\n\r\n              <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n                   Top-right shows only the final overall \"Publish\" once everything is approved. -->\r\n              <ng-container *ngIf=\"publishingState == 'complete'\">\r\n                <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n                <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                  (click)=\"publish()\" [disabled]=\"disabledPublish\">\r\n                  Publish\r\n                </button>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n              <button ngbAccordionButton></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div ngbAccordionCollapse>\r\n          <div ngbAccordionBody>\r\n            <ng-template>\r\n            <div id=\"header\" class=\"row mx-0 gap-3\">\r\n              <!-- Plano Completion -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3 class=\"d-flex align-items-center gap-2\">\r\n                  Plano Completion %\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n                    ngbTooltip=\"% of overall planogram completion\">\r\n                    <g clip-path=\"url(#clip0_1517_129805)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1517_129805\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </h3>\r\n                <div class=\"row align-items-center mt-2\">\r\n                  <div class=\"col-9\">\r\n                    <div class=\"progress\" style=\"height: 4px\">\r\n                      <div class=\"progress-bar\" [ngClass]=\"\r\n                          taskInfo?.planoProgress <= 50\r\n                            ? 'bg-warning'\r\n                            : taskInfo?.planoProgress === 75\r\n                            ? 'bg-primary'\r\n                            : 'bg-success'\r\n                        \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                        [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Layout -->\r\n              <div style=\"cursor: unset;\" class=\"col-auto filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n                  </div>\r\n                  <div class=\"indicator\" [ngClass]=\"taskStyle.layout.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.layout.name }}\r\n                  </div>\r\n                  <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594lay)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594lay\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                  -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n                    <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                      type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                      {{ publishingState === 'fixture-redo' ? 'Publish Fixture Redo' : 'Publish Fixture Verification' }}\r\n                    </button>\r\n                    <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n                      class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_640_5594fix)\">\r\n                          <path\r\n                            d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                          <clipPath id=\"clip0_640_5594fix\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                          </clipPath>\r\n                        </defs>\r\n                      </svg>\r\n                      Revoke\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"indicator\" [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>\r\n\r\n              <!-- Visual Merchandise -->\r\n              <!--\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                    <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.vm.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594vm)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594vm\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              -->\r\n\r\n              <!-- Zone Verification -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n                    <h3 class=\"m-0\">Zone Verification</h3>\r\n                    <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n                      class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n                      Publish Zone Verification\r\n                    </button>\r\n                    <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n                      class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n                      Publish Zone Redo\r\n                    </button>\r\n                    <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n                      class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_640_5594z)\">\r\n                          <path\r\n                            d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                          <clipPath id=\"clip0_640_5594z\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                          </clipPath>\r\n                        </defs>\r\n                      </svg>\r\n                      Revoke\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"indicator\" [ngClass]=\"zoneTaskStyle.class\">\r\n                    <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_4984_27569)\">\r\n                          <path\r\n                            d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                            stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                          <clipPath id=\"clip0_4984_27569\">\r\n                            <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                          </clipPath>\r\n                        </defs>\r\n                      </svg>\r\n                    </span>\r\n                    {{ zoneTaskStyle.name }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div id=\"body\" class=\"row\">\r\n      <!-- Left Column -->\r\n      <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n        <div class=\"s-card\">\r\n          <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n            <div ngbAccordion accordion=\"NgbAccordion\">\r\n              <!-- Walls Section -->\r\n              <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                <ng-container formArrayName=\"walls\">\r\n                  <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                    <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                      <div class=\"d-flex\" ngbAccordionHeader>\r\n                        <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                          <div class=\"d-flex align-items-center\">\r\n                            <span class=\"me-2 wall-label\">\r\n                              {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n                            </span>\r\n\r\n                            @if(layoutForm.enabled){\r\n                              <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                    fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_62_8)\">\r\n                                    <path\r\n                                      d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                      fill=\"#475467\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_62_8\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_63_25)\">\r\n                                    <path\r\n                                      d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                      fill=\"#F32B2B\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_63_25\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                            }\r\n                          </div>\r\n                          <div class=\"divider\"></div>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <div ngbAccordionCollapse>\r\n                        <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                          <ng-template>\r\n                            <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n                              <!-- Fixtures -->\r\n                              <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                <div formArrayName=\"fixtures\">\r\n                                  <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                    <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n                                      [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                      class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                          <svg dndDragImageRef\r\n                                            [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                            width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                              d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                              fill=\"grey\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-10\">\r\n                                        <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                          [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                          [subTextField]=\"'subtext'\" [search]=\"true\">\r\n                                        </lib-reactive-select>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewFixture('wall', i)\">\r\n                                  Add fixture\r\n                                </a>\r\n                              </div>\r\n\r\n                              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                              <!-- Other Elements -->\r\n                              <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                <div formArrayName=\"otherElements\">\r\n                                  <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                    <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                      <div class=\"col-11\">\r\n                                        <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                        <!-- Dropdown bound to 'type' -->\r\n                                        <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                          [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n                                        </lib-reactive-select>\r\n\r\n                                        <!-- Show custom text input only when 'Others' is selected -->\r\n                                        <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                          class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                          placeholder=\"Enter custom element name\" />\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewOtherElements('wall', i)\">\r\n                                  Add element\r\n                                </a>\r\n                              </div>\r\n                            </div>\r\n                          </ng-template>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-template #addWallAction>\r\n                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                  class=\"btn btn-secondary w-100 p-2\">\r\n                  Insert new wall\r\n                </button>\r\n              </ng-template>\r\n\r\n              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n              <!-- Floor Section -->\r\n              <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                  <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                    <span class=\"me-2 wall-label\">Floor</span>\r\n                    <div class=\"divider\"></div>\r\n                  </button>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                  <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                    <ng-template>\r\n                      <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n                        <!-- Floor Fixtures -->\r\n                        <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                          <div formArrayName=\"floorFixtures\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                              <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                    <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n                                      viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                      <path\r\n                                        d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                        fill=\"grey\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"col-10\">\r\n                                  <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                    [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                    [search]=\"true\" [subTextField]=\"'subtext'\">\r\n                                  </lib-reactive-select>\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"deleteFixture('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewFixture('floor')\">\r\n                            Add fixture\r\n                          </a>\r\n                        </div>\r\n\r\n                        <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                        <!-- Floor Other Elements -->\r\n                        <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                          <div formArrayName=\"floorOtherElements\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                              <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                <div class=\"col-11\">\r\n                                  <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                  <!-- Dropdown for type -->\r\n                                  <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                    [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n                                  </lib-reactive-select>\r\n\r\n                                  <!-- Conditional input for custom name -->\r\n                                  <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                    class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                    placeholder=\"Enter custom element name\" />\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewOtherElements('floor')\">\r\n                            Add element\r\n                          </a>\r\n                        </div>\r\n                      </div>\r\n                    </ng-template>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Center Column -->\r\n      <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n        <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n          <!-- Canvas View -->\r\n          <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n            <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n          </div>\r\n\r\n          <!-- Tree View -->\r\n          <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n            <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n          </div>\r\n\r\n          <!-- Top Controls -->\r\n          <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n            <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n              <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n                    (click)=\"selectedView = 'detail'\">\r\n                    Detail View\r\n                  </button>\r\n                </li>\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n                    (click)=\"selectedView = 'tree'\">\r\n                    Tree View\r\n                  </button>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- PID Allocation -->\r\n          <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n              Apply Logics\r\n            </button>\r\n          </div> -->\r\n\r\n          <!-- Entrance Button -->\r\n          <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n              class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n              Add Entrance\r\n            </button>\r\n          </div>\r\n\r\n          <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n            <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              (click)=\"cancelEdit()\">\r\n              Cancel\r\n            </button>\r\n          </div>\r\n\r\n\r\n          <!-- Edit Button -->\r\n          <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n            style=\"top: 24px; right: 164px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"onClickEdit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <g clip-path=\"url(#clip0_1322_5325)\">\r\n                <path\r\n                  d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </g>\r\n              <defs>\r\n                <clipPath id=\"clip0_1322_5325\">\r\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                </clipPath>\r\n              </defs>\r\n            </svg>\r\n            Edit\r\n          </button>\r\n\r\n          <!-- Rotate Button -->\r\n          <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"rotateCanvas(canvas,90)\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n              <path\r\n                d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                fill=\"#1D2939\" />\r\n              <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </button>\r\n\r\n          <!-- Submit Button -->\r\n          <button *ngIf=\"!layoutForm.disabled\"\r\n            style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n            [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n            <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n              aria-hidden=\"true\"></span>\r\n            Save\r\n          </button>\r\n\r\n          <!-- Download Button -->\r\n          <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"downloadCanvas()\">\r\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n                stroke-width=\"0.384\"></g>\r\n              <g id=\"SVGRepo_iconCarrier\">\r\n                <path\r\n                  d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                  fill=\"#1D2939\"></path>\r\n                <path\r\n                  d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                  fill=\"#1D2939\"></path>\r\n              </g>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Panel Collapse Handlers -->\r\n        <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n          <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n          <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Edit Fixture Body -->\r\n      <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n        <div id=\"edit-body\" class=\"row\">\r\n          <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Basic details\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Products\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Visual Merchandise\r\n              </a>\r\n            </li>\r\n          </ul>\r\n\r\n          <div class=\"col\">\r\n            <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n              <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"publishingState === 'complete'\"\r\n                [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-basic-details>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n              <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"publishingState === 'complete'\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n                (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-products>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n              <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"publishingState === 'complete'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-vms>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n        [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n        <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n  <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n      <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n    } -->\r\n\r\n    <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n      [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Fixture Verification\r\n        </a>\r\n      </li>\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n          class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n          Zone Verification\r\n          <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n            {{ zonePendingCount }}\r\n          </span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <div class=\"feedback-tab-content\">\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n        <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n          <div class=\"card-body\">\r\n\r\n            <!-- Title -->\r\n            <div class=\"storeTitle mb-3\">Store response</div>\r\n            <hr>\r\n\r\n            <!-- Section Header -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n              <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n              <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n              <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n            </div>\r\n            <div class=\"smallText text-muted d-block mb-4\">\r\n              Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"toggle\" class=\"mt-10\">\r\n              <!-- Column Headings -->\r\n              <div class=\"row text-muted small fw-semibold mb-5\">\r\n                <div class=\"col-6\"></div>\r\n                <div class=\"col-3 text-center lightText\">Before</div>\r\n                <div class=\"col-3 text-center lightText\">After</div>\r\n              </div>\r\n\r\n              <!-- Wall Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Wall Fixtures</div>\r\n                <div class=\"col-3 text-center\">\r\n                  {{wallCount - clCount}}\r\n                </div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Euro Centre Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Euro Centre Fixtures</div>\r\n                <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Lenses -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Contact Lenses</div>\r\n                <div class=\"col-3 text-center\">{{clCount}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n                </div>\r\n              </div>\r\n\r\n              <hr>\r\n\r\n              <!-- Total Section -->\r\n              <div class=\"row align-items-center\">\r\n                <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n                </div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\"\r\n                    [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n                    {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n                <div id=\"fixture-comments\" class=\"mt-10\">\r\n                  <h5 class=\"mb-2\">Comments</h5>\r\n\r\n                  <div class=\"log-block\"\r\n                    *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n                    <!-- User avatar -->\r\n                    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                      <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                      <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                      </div>\r\n\r\n                      @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <lib-verification-feedback [floorData]=\"floorData\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n          [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n          *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n        <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n          [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n  <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer w-100 p-4 rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke mt-0 animate title\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n  <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">No Store Video Found</h2>\r\n      <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n      <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n      <p>\r\n        Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n      </p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n        <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n        <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n          <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"] }]
+            args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n  <!-- Loading State -->\r\n  <div *ngIf=\"isPageLoading\" class=\"row\">\r\n    <div class=\"col-12 m-0\">\r\n      <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-6\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n    <!-- Header Accordion -->\r\n    <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n      <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n        <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n          <div class=\"d-flex gap-4 align-items-center\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n                <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n              </div>\r\n              <div>\r\n                <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n                  [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n                </lib-select-plano>\r\n              </div>\r\n            </div>\r\n\r\n            <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n              [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n            </lib-reactive-select>\r\n\r\n            <div class=\"cus-btn\" [class.disabled-click]=\"isStoreTourLoading\" (click)=\"goToStoreTourPage()\">\r\n              View store tour\r\n\r\n              <svg *ngIf=\"!isStoreTourLoading\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_408_16498)\">\r\n                  <path\r\n                    d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n                    stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_408_16498\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n              <span *ngIf=\"isStoreTourLoading\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n                aria-hidden=\"true\"></span>\r\n\r\n            </div>\r\n            <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n              View camera\r\n\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g clip-path=\"url(#clip0_422_36321)\">\r\n                  <path\r\n                    d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_422_36321\">\r\n                    <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-4\">\r\n            <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.lastUpdate}}</div>\r\n\r\n            <div class=\"d-flex gap-4 align-items-center\">\r\n              <!-- Edit Fixture Mode -->\r\n              <ng-container *ngIf=\"editFixture\">\r\n                <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                  Save & Close\r\n                </button>\r\n              </ng-container>\r\n\r\n              <!-- Normal Mode: per-task publish buttons live inside their respective cards below.\r\n                   Top-right shows the final overall \"Publish\" once layout+fixture+vm are approved.\r\n                   When a zone task exists and isn't Approved yet, the button stays visible but\r\n                   disabled (so the store can't be published until zone verification completes).\r\n                   Legacy stores without a zone task are unblocked immediately. -->\r\n              <ng-container *ngIf=\"showTopPublish\">\r\n                <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n                <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n                  (click)=\"publish()\" [disabled]=\"topPublishDisabled\">\r\n                  Publish\r\n                </button>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <!-- Revoke buttons live inside their respective cards (Layout / Fixtures / VM / Zone) below. -->\r\n\r\n              <button ngbAccordionButton></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div ngbAccordionCollapse>\r\n          <div ngbAccordionBody>\r\n            <ng-template>\r\n            <div id=\"header\" class=\"row mx-0 gap-3\">\r\n              <!-- Plano Completion -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <h3 class=\"d-flex align-items-center gap-2\">\r\n                  Plano Completion %\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n                    ngbTooltip=\"% of overall planogram completion\">\r\n                    <g clip-path=\"url(#clip0_1517_129805)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1517_129805\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </h3>\r\n                <div class=\"row align-items-center mt-2\">\r\n                  <div class=\"col-9\">\r\n                    <div class=\"progress\" style=\"height: 4px\">\r\n                      <div class=\"progress-bar\" [ngClass]=\"\r\n                          taskInfo?.planoProgress <= 50\r\n                            ? 'bg-warning'\r\n                            : taskInfo?.planoProgress === 75\r\n                            ? 'bg-primary'\r\n                            : 'bg-success'\r\n                        \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n                        [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Layout -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                  <div class=\"flex-grow-1\">\r\n                    <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n                    <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.layout.name }}\r\n                    </div>\r\n                  </div>\r\n                  <!-- Layout actions disabled for now \u2014 no layout-related actions are needed.\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'layout' || publishingState === 'layout-redo') && taskStyle.layout.class !== 'taskAssigned' && taskStyle.layout.class !== 'completed' && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'layout-redo' ? 'Publish Layout Redo' : 'Publish Layout Verification' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.layout.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594lay)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594lay\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                  -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Fixtures -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                  <div class=\"flex-grow-1\">\r\n                    <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n                    <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.fixture.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'fixture' || publishingState === 'fixture-redo') && taskStyle.fixture.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'fixture-redo' ? 'Publish Redo' : 'Publish Task' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.fixture.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594fix)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594fix\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Visual Merchandise -->\r\n              <!--\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex flex-column gap-2\">\r\n                  <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n                    <h3 class=\"m-0\"><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n                    <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\">\r\n                      <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <path\r\n                            d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n                            stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                      </span>\r\n                      {{ taskStyle.vm.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && (publishingState === 'vm' || publishingState === 'vm-redo') && taskStyle.vm.class !== 'taskAssigned'\"\r\n                    type=\"button\" class=\"card-publish-btn\" (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n                    {{ publishingState === 'vm-redo' ? 'Publish Redo' : 'Publish' }}\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && taskStyle.vm.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594vm)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594vm\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              -->\r\n\r\n              <!-- Zone Verification -->\r\n              <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                  <div class=\"flex-grow-1\">\r\n                    <h3>Zone Verification</h3>\r\n                    <div class=\"indicator mt-2\" [ngClass]=\"zoneTaskStyle.class\">\r\n                      <span class=\"me-2\" [hidden]=\"zoneTaskStyle.name !== 'Redo'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_4984_27569)\">\r\n                            <path\r\n                              d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n                              stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_4984_27569\">\r\n                              <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </span>\r\n                      {{ zoneTaskStyle.name }}\r\n                    </div>\r\n                  </div>\r\n                  <button *ngIf=\"!editFixture && !zoneFeedback?.zoneVerificationTask\" type=\"button\"\r\n                    class=\"card-publish-btn\" (click)=\"publishZoneVerification()\">\r\n                    Publish Task\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && zoneRedoStatus\" type=\"button\"\r\n                    class=\"card-publish-btn\" (click)=\"publishZoneRedo()\">\r\n                    Publish Redo\r\n                  </button>\r\n                  <button *ngIf=\"!editFixture && zoneTaskStyle.class === 'taskAssigned'\" type=\"button\"\r\n                    class=\"card-revoke-btn\" (click)=\"revokeZoneTask()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <g clip-path=\"url(#clip0_640_5594z)\">\r\n                        <path\r\n                          d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n                          stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                      </g>\r\n                      <defs>\r\n                        <clipPath id=\"clip0_640_5594z\">\r\n                          <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                      </defs>\r\n                    </svg>\r\n                    Revoke\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div id=\"body\" class=\"row\">\r\n      <!-- Left Column -->\r\n      <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n        <div class=\"s-card\">\r\n          <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n            <div ngbAccordion accordion=\"NgbAccordion\">\r\n              <!-- Walls Section -->\r\n              <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                <ng-container formArrayName=\"walls\">\r\n                  <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                    <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                      <div class=\"d-flex\" ngbAccordionHeader>\r\n                        <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                          <div class=\"d-flex align-items-center\">\r\n                            <span class=\"me-2 wall-label\">\r\n                              {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n                            </span>\r\n\r\n                            @if(layoutForm.enabled){\r\n                              <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                    fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_62_8)\">\r\n                                    <path\r\n                                      d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                      fill=\"#475467\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_62_8\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                              <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                  fill=\"none\">\r\n                                  <g clip-path=\"url(#clip0_63_25)\">\r\n                                    <path\r\n                                      d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                      fill=\"#F32B2B\" />\r\n                                  </g>\r\n                                  <defs>\r\n                                    <clipPath id=\"clip0_63_25\">\r\n                                      <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                  </defs>\r\n                                </svg>\r\n                              </span>\r\n                            }\r\n                          </div>\r\n                          <div class=\"divider\"></div>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <div ngbAccordionCollapse>\r\n                        <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                          <ng-template>\r\n                            <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n                              <!-- Fixtures -->\r\n                              <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                <div formArrayName=\"fixtures\">\r\n                                  <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                    <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n                                      [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                      class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                          <svg dndDragImageRef\r\n                                            [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                            width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                              d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                              fill=\"grey\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-10\">\r\n                                        <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                          [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                          [subTextField]=\"'subtext'\" [search]=\"true\">\r\n                                        </lib-reactive-select>\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewFixture('wall', i)\">\r\n                                  Add fixture\r\n                                </a>\r\n                              </div>\r\n\r\n                              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                              <!-- Other Elements -->\r\n                              <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                <div formArrayName=\"otherElements\">\r\n                                  <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                    <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                      <div class=\"col-11\">\r\n                                        <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                        <!-- Dropdown bound to 'type' -->\r\n                                        <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                          [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n                                        </lib-reactive-select>\r\n\r\n                                        <!-- Show custom text input only when 'Others' is selected -->\r\n                                        <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                          class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                          placeholder=\"Enter custom element name\" />\r\n                                      </div>\r\n\r\n                                      <div class=\"col-1\">\r\n                                        <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                          [class.disabled-click]=\"layoutForm.disabled\">\r\n                                          <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n                                            viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                          </svg>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </div>\r\n                              </ng-container>\r\n\r\n                              <div class=\"d-flex justify-content-end\">\r\n                                <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                  (click)=\"addNewOtherElements('wall', i)\">\r\n                                  Add element\r\n                                </a>\r\n                              </div>\r\n                            </div>\r\n                          </ng-template>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-template #addWallAction>\r\n                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                  class=\"btn btn-secondary w-100 p-2\">\r\n                  Insert new wall\r\n                </button>\r\n              </ng-template>\r\n\r\n              <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n              <!-- Floor Section -->\r\n              <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                  <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                    <span class=\"me-2 wall-label\">Floor</span>\r\n                    <div class=\"divider\"></div>\r\n                  </button>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                  <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                    <ng-template>\r\n                      <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n                        <!-- Floor Fixtures -->\r\n                        <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                          <div formArrayName=\"floorFixtures\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                              <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n                                [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                    <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n                                      viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                      <path\r\n                                        d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                        fill=\"grey\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"col-10\">\r\n                                  <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n                                    [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n                                    [search]=\"true\" [subTextField]=\"'subtext'\">\r\n                                  </lib-reactive-select>\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"deleteFixture('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewFixture('floor')\">\r\n                            Add fixture\r\n                          </a>\r\n                        </div>\r\n\r\n                        <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                        <!-- Floor Other Elements -->\r\n                        <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                          <div formArrayName=\"floorOtherElements\">\r\n                            <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                              <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                <div class=\"col-11\">\r\n                                  <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n                                  <!-- Dropdown for type -->\r\n                                  <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                                    [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n                                  </lib-reactive-select>\r\n\r\n                                  <!-- Conditional input for custom name -->\r\n                                  <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n                                    class=\"form-control mt-2\" formControlName=\"customName\"\r\n                                    placeholder=\"Enter custom element name\" />\r\n                                </div>\r\n\r\n                                <div class=\"col-1\">\r\n                                  <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                    <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                      style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                      width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </ng-container>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"d-flex justify-content-end\">\r\n                          <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                            (click)=\"addNewOtherElements('floor')\">\r\n                            Add element\r\n                          </a>\r\n                        </div>\r\n                      </div>\r\n                    </ng-template>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Center Column -->\r\n      <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n        <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n          <!-- Canvas View -->\r\n          <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n            <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n          </div>\r\n\r\n          <!-- Tree View -->\r\n          <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n            <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n          </div>\r\n\r\n          <!-- Top Controls -->\r\n          <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n            <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n              <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n                    (click)=\"selectedView = 'detail'\">\r\n                    Detail View\r\n                  </button>\r\n                </li>\r\n                <li class=\"nav-item flex-fill\">\r\n                  <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n                    (click)=\"selectedView = 'tree'\">\r\n                    Tree View\r\n                  </button>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- PID Allocation -->\r\n          <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n              Apply Logics\r\n            </button>\r\n          </div> -->\r\n\r\n          <!-- Entrance Button -->\r\n          <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n            class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n            <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n              class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n              Add Entrance\r\n            </button>\r\n          </div>\r\n\r\n          <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 192px\" class=\"position-absolute\">\r\n            <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n              (click)=\"cancelEdit()\">\r\n              Cancel\r\n            </button>\r\n          </div>\r\n\r\n\r\n          <!-- Edit Button -->\r\n          <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n            style=\"top: 24px; right: 164px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"onClickEdit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <g clip-path=\"url(#clip0_1322_5325)\">\r\n                <path\r\n                  d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </g>\r\n              <defs>\r\n                <clipPath id=\"clip0_1322_5325\">\r\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                </clipPath>\r\n              </defs>\r\n            </svg>\r\n            Edit\r\n          </button>\r\n\r\n          <!-- Rotate Button -->\r\n          <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"rotateCanvas(canvas,90)\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n              <path\r\n                d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                fill=\"#1D2939\" />\r\n              <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </button>\r\n\r\n          <!-- Submit Button -->\r\n          <button *ngIf=\"!layoutForm.disabled\"\r\n            style=\"top: 24px; right: 94px;padding: 9px 20px !important;min-width: 90px;justify-content: center;\"\r\n            type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-2 position-absolute bg-white shadow-sm\"\r\n            [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n            <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\"\r\n              aria-hidden=\"true\"></span>\r\n            Save\r\n          </button>\r\n\r\n          <!-- Download Button -->\r\n          <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n            class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n            (click)=\"downloadCanvas()\">\r\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n                stroke-width=\"0.384\"></g>\r\n              <g id=\"SVGRepo_iconCarrier\">\r\n                <path\r\n                  d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                  fill=\"#1D2939\"></path>\r\n                <path\r\n                  d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                  fill=\"#1D2939\"></path>\r\n              </g>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Panel Collapse Handlers -->\r\n        <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n          <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n          <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n              stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Edit Fixture Body -->\r\n      <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n        <div id=\"edit-body\" class=\"row\">\r\n          <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Basic details\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Products\r\n              </a>\r\n            </li>\r\n            <li class=\"nav-item cursor-pointer\" role=\"presentation\" *ngIf=\"editFromTab !== 'zone'\">\r\n              <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                Visual Merchandise\r\n              </a>\r\n            </li>\r\n          </ul>\r\n\r\n          <div class=\"col\">\r\n            <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n              <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                [isSubmitted]=\"submitFixture\" [revertOnEdit]=\"shouldRevertOnEdit\"\r\n                [zoneEditMode]=\"editFromTab === 'zone'\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-basic-details>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n              <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"shouldRevertOnEdit\" [zoneEditMode]=\"editFromTab === 'zone'\"\r\n                (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-products>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"editFixtureSection === 'vms' && editFromTab !== 'zone'\">\r\n              <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n                [revertOnEdit]=\"shouldRevertOnEdit\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n              </lib-instance-vms>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n        [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : activeFeedbackTab === 'fixture' ? '1050px' : '750px'}\">\r\n        <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n  <div class=\"s-card s-card--tabbed\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n    <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n      <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n    } -->\r\n\r\n    <ul class=\"nav nav-pills feedback-tabs\" role=\"tablist\"\r\n      [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\">\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('fixture')\" [ngClass]=\"activeFeedbackTab === 'fixture' ? 'active' : ''\"\r\n          class=\"nav-link\" role=\"tab\">\r\n          Fixture Verification\r\n        </a>\r\n      </li>\r\n      <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n        <a (click)=\"onFeedbackTabChange('zone')\" [ngClass]=\"activeFeedbackTab === 'zone' ? 'active' : ''\"\r\n          class=\"nav-link d-flex align-items-center gap-2\" role=\"tab\">\r\n          Zone Verification\r\n          <span *ngIf=\"zonePendingCount > 0\" class=\"badge feedback-tab-badge\">\r\n            {{ zonePendingCount }}\r\n          </span>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n\r\n    <div class=\"feedback-tab-content\">\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'fixture'\">\r\n        <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n          <div class=\"card-body\">\r\n\r\n            <!-- Title -->\r\n            <div class=\"storeTitle mb-3\">Store response</div>\r\n            <hr>\r\n\r\n            <!-- Section Header -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n              <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n              <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n              <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n            </div>\r\n            <div class=\"smallText text-muted d-block mb-4\">\r\n              Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"toggle\" class=\"mt-10\">\r\n              <!-- Column Headings -->\r\n              <div class=\"row text-muted small fw-semibold mb-5\">\r\n                <div class=\"col-6\"></div>\r\n                <div class=\"col-3 text-center lightText\">Before</div>\r\n                <div class=\"col-3 text-center lightText\">After</div>\r\n              </div>\r\n\r\n              <!-- Wall Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Wall Fixtures</div>\r\n                <div class=\"col-3 text-center\">\r\n                  {{wallCount - clCount}}\r\n                </div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Euro Centre Fixtures -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Euro Centre Fixtures</div>\r\n                <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\"\r\n                    *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  <i class=\"bi bi-arrow-up\"\r\n                    *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Lenses -->\r\n              <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n                <div class=\"col-6\">Contact Lenses</div>\r\n                <div class=\"col-3 text-center\">{{clCount}}</div>\r\n                <div class=\"col-3 text-center fw-semibold\"\r\n                  [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n                  <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n                  {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n                </div>\r\n              </div>\r\n\r\n              <hr>\r\n\r\n              <!-- Total Section -->\r\n              <div class=\"row align-items-center\">\r\n                <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n                </div>\r\n                <div class=\"col-3 text-center totalText\">\r\n                  <div class=\"total-box\"\r\n                    [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n                    {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n                <div id=\"fixture-comments\" class=\"mt-10\">\r\n                  <h5 class=\"mb-2\">Comments</h5>\r\n\r\n                  <div class=\"log-block\"\r\n                    *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n                    <!-- User avatar -->\r\n                    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                      <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                      <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                      </div>\r\n\r\n                      @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <lib-verification-feedback [floorData]=\"floorData\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" [totalFixtures]=\"allFixtureInstances\"\r\n          [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\" [showAction]=\"!editFixture\"\r\n          *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeFeedbackTab === 'zone'\">\r\n        <lib-zone-verification-feedback [floorData]=\"floorData\" [feedbackDetails]=\"selectedFixtureFeedback\"\r\n          [zoneTask]=\"zoneFeedback?.zoneVerificationTask\" [zoneFeedback]=\"selectedZoneFeedback\"\r\n          [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" [showAction]=\"!editFixture\"\r\n          (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\" (action)=\"handleFeedbackAction($event)\"\r\n          [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture }\"></lib-zone-verification-feedback>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n  <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer w-100 p-4 rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke mt-0 animate title\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n  <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n    <div class=\"shimmer rounded\">\r\n      <div class=\"wrapper\">\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n        <br />\r\n        <div class=\"stroke animate title\"></div>\r\n        <div class=\"stroke animate link\"></div>\r\n        <div class=\"stroke animate description\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">No Store Video Found</h2>\r\n      <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n      <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n  <div class=\"modal-body\">\r\n    <div>\r\n      <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n      <p>\r\n        Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n      </p>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-3\">\r\n      <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n        <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n        <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n          <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.card-publish-btn{flex-shrink:0;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #009bf3;background:#009bf3;color:#fff;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-publish-btn:hover:not(:disabled){background:#0084d1;border-color:#0084d1}.card-publish-btn:disabled{opacity:.5;cursor:not-allowed}.card-revoke-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-family:Inter;font-weight:600;font-size:12px;line-height:16px;padding:6px 10px;border-radius:6px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #1018280d}.card-revoke-btn:hover:not(:disabled){background:#fee4e2}.card-revoke-btn:disabled{opacity:.5;cursor:not-allowed}.s-card.s-card--tabbed{display:flex;flex-direction:column;padding:12px 16px 0;overflow:hidden}.s-card.s-card--tabbed .feedback-tabs{flex-shrink:0;margin:0 0 8px;padding:0}.s-card.s-card--tabbed .feedback-tabs .nav-link .badge.feedback-tab-badge{background-color:#eaf8ff;color:#009bf3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.s-card.s-card--tabbed .feedback-tabs .nav-link.active .badge.feedback-tab-badge{background-color:#009bf3;color:#fff}.s-card.s-card--tabbed .feedback-tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.s-card.s-card--tabbed .feedback-tab-content>*{flex:1 1 auto;min-height:0;display:block}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .filter-tab{min-width:180px}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0;white-space:nowrap}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;white-space:nowrap;flex-shrink:0;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}#header .updateClass{white-space:nowrap}@media (max-width: 1500px){#header [ngbAccordionHeader]{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem}#header .gap-4{gap:.75rem!important}#header .title{font-size:14px;line-height:20px}#header .cus-btn{padding:3px 8px;font-size:12px}#header .updateClass{font-size:12px;line-height:18px}#header .row.gap-3{gap:.5rem!important}#header .filter-tab{min-width:170px;padding:.75rem}#header .filter-tab h3{font-size:14px;line-height:20px}#header .filter-tab .indicator{font-size:12px}}@media (max-width: 1300px){#header [ngbAccordionHeader]{padding-left:.75rem!important;padding-right:.75rem!important}#header .title{font-size:13px}#header .cus-btn{font-size:11px;padding:2px 6px}#header .updateClass{font-size:11px}#header .filter-tab{min-width:150px}#header .filter-tab h3{font-size:13px}}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ["baseCanvas"]
@@ -38824,11 +38897,11 @@ class PlanoMigrateComponent {
     // }
     ngOnDestroy() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoMigrateComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoMigrateComponent, selector: "lib-plano-migrate", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "storeItems", predicate: ["storeItem"], descendants: true }], ngImport: i0, template: "<section id=\"plano-migrate\">\r\n  <div class=\"app-layout\">\r\n\r\n    <!-- LEFT TOOLBAR -->\r\n    <div class=\"sidebar\">\r\n      <div class=\"p-3\">\r\n        <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n          rows=\"6\"></textarea>\r\n        <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n          Filter\r\n        </button>\r\n\r\n        <div class=\"d-flex align-items-center\">\r\n          <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n          <hr class=\"w-100\">\r\n        </div>\r\n\r\n        <div class=\"store-list\">\r\n          @for (item of storeList; track $index) {\r\n            <div class=\"id-tile\" [class.active]='$index === currentIndex' #storeItem>\r\n              <p [style]=\"{ color: $index === currentIndex ? 'red' : 'black' }\">\r\n                {{ $index + 1 }}) {{ item.storeName }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- RIGHT CANVAS PANEL -->\r\n    <div class=\"canvas-wrapper\" #canvasContainer>\r\n\r\n      <!-- Toolbar -->\r\n      <div class=\"toolbar\">\r\n\r\n        <div class=\"form-check form-switch\">\r\n          <input [checked]=\"isLayoutMode\" [(ngModel)]=\"isLayoutMode\" [ngModelOptions]=\"{ standalone: true }\"\r\n            style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" [disabled]=\"isStarted\" />\r\n          <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n            Layout Mode\r\n          </label>\r\n        </div>\r\n\r\n\r\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onProceed()\" [disabled]=\"isStarted\">\r\n          {{isLayoutMode ? 'Update Layout' : 'Download Images'}}\r\n        </button>\r\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"onForceStop()\" [disabled]='!isStarted'>\r\n          Force stop\r\n        </button>\r\n\r\n        <div class=\"d-flex gap-2\">\r\n          <input type=\"checkbox\" class=\"form-check\" name=\"includeBG\" id=\"includeBG\" [(ngModel)]=\"includeBg\"\r\n            [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"isStarted\">\r\n          <label for=\"includeBG\">Include Background</label>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- Canvas -->\r\n      <div class=\"canvas-area\">\r\n        <canvas #canvas></canvas>\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n</section>", styles: ["html,body{height:100%;margin:0}#plano-migrate .app-layout{display:flex;height:calc(100vh - 260px);overflow:hidden}#plano-migrate .sidebar{width:350px;min-width:350px;border-right:1px solid #ddd;background:#fafafa;overflow-y:auto}#plano-migrate .canvas-wrapper{flex:1;display:flex;flex-direction:column;background:#fff;padding:0;overflow:hidden}#plano-migrate .toolbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #e6e6e6;background:#fafafa}#plano-migrate .toggle-fixtures{display:flex;align-items:center;gap:6px;font-size:14px;-webkit-user-select:none;user-select:none}#plano-migrate .icon-btn{border:none;background:#f1f3f4;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}#plano-migrate .icon-btn:hover{background:#e2e5e7}#plano-migrate .icon-btn:active{background:#d1d4d6}#plano-migrate .icon{width:18px;height:18px;stroke:#3c3f42;stroke-width:2;fill:none}#plano-migrate .canvas-area{position:relative;flex:1;overflow:hidden}#plano-migrate .canvas-area canvas{display:block}#plano-migrate .id-tile{display:flex;align-items:center;padding:8px 12px;border-radius:6px}#plano-migrate .id-tile p{margin:0}#plano-migrate .id-tile.active{background-color:#ffecec;border:1px solid #ffb5b5}#plano-migrate .store-list{max-height:65vh;overflow:auto}\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.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoMigrateComponent, selector: "lib-plano-migrate", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "storeItems", predicate: ["storeItem"], descendants: true }], ngImport: i0, template: "<section id=\"plano-migrate\">\r\n  <div class=\"app-layout\">\r\n\r\n    <!-- LEFT TOOLBAR -->\r\n    <div class=\"sidebar\">\r\n      <div class=\"p-3\">\r\n        <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n          rows=\"6\"></textarea>\r\n        <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n          Filter\r\n        </button>\r\n\r\n        <div class=\"d-flex align-items-center\">\r\n          <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n          <hr class=\"w-100\">\r\n        </div>\r\n\r\n        <div class=\"store-list\">\r\n          @for (item of storeList; track $index) {\r\n            <div class=\"id-tile\" [class.active]='$index === currentIndex' #storeItem>\r\n              <p [style]=\"{ color: $index === currentIndex ? 'red' : 'black' }\">\r\n                {{ $index + 1 }}) {{ item.storeName }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- RIGHT CANVAS PANEL -->\r\n    <div class=\"canvas-wrapper\" #canvasContainer>\r\n\r\n      <!-- Toolbar -->\r\n      <div class=\"toolbar\">\r\n\r\n        <!-- <div class=\"form-check form-switch\">\r\n          <input [checked]=\"isLayoutMode\" [(ngModel)]=\"isLayoutMode\" [ngModelOptions]=\"{ standalone: true }\"\r\n            style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" [disabled]=\"isStarted\" />\r\n          <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n            Layout Mode\r\n          </label>\r\n        </div> -->\r\n\r\n\r\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onProceed()\" [disabled]=\"isStarted\">\r\n          {{isLayoutMode ? 'Update Layout' : 'Download Images'}}\r\n        </button>\r\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"onForceStop()\" [disabled]='!isStarted'>\r\n          Force stop\r\n        </button>\r\n\r\n        <div class=\"d-flex gap-2\">\r\n          <input type=\"checkbox\" class=\"form-check\" name=\"includeBG\" id=\"includeBG\" [(ngModel)]=\"includeBg\"\r\n            [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"isStarted\">\r\n          <label for=\"includeBG\">Include Background</label>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- Canvas -->\r\n      <div class=\"canvas-area\">\r\n        <canvas #canvas></canvas>\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n</section>", styles: ["html,body{height:100%;margin:0}#plano-migrate .app-layout{display:flex;height:calc(100vh - 260px);overflow:hidden}#plano-migrate .sidebar{width:350px;min-width:350px;border-right:1px solid #ddd;background:#fafafa;overflow-y:auto}#plano-migrate .canvas-wrapper{flex:1;display:flex;flex-direction:column;background:#fff;padding:0;overflow:hidden}#plano-migrate .toolbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #e6e6e6;background:#fafafa}#plano-migrate .toggle-fixtures{display:flex;align-items:center;gap:6px;font-size:14px;-webkit-user-select:none;user-select:none}#plano-migrate .icon-btn{border:none;background:#f1f3f4;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}#plano-migrate .icon-btn:hover{background:#e2e5e7}#plano-migrate .icon-btn:active{background:#d1d4d6}#plano-migrate .icon{width:18px;height:18px;stroke:#3c3f42;stroke-width:2;fill:none}#plano-migrate .canvas-area{position:relative;flex:1;overflow:hidden}#plano-migrate .canvas-area canvas{display:block}#plano-migrate .id-tile{display:flex;align-items:center;padding:8px 12px;border-radius:6px}#plano-migrate .id-tile p{margin:0}#plano-migrate .id-tile.active{background-color:#ffecec;border:1px solid #ffb5b5}#plano-migrate .store-list{max-height:65vh;overflow:auto}\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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoMigrateComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-plano-migrate", providers: [TitleCasePipe], template: "<section id=\"plano-migrate\">\r\n  <div class=\"app-layout\">\r\n\r\n    <!-- LEFT TOOLBAR -->\r\n    <div class=\"sidebar\">\r\n      <div class=\"p-3\">\r\n        <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n          rows=\"6\"></textarea>\r\n        <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n          Filter\r\n        </button>\r\n\r\n        <div class=\"d-flex align-items-center\">\r\n          <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n          <hr class=\"w-100\">\r\n        </div>\r\n\r\n        <div class=\"store-list\">\r\n          @for (item of storeList; track $index) {\r\n            <div class=\"id-tile\" [class.active]='$index === currentIndex' #storeItem>\r\n              <p [style]=\"{ color: $index === currentIndex ? 'red' : 'black' }\">\r\n                {{ $index + 1 }}) {{ item.storeName }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- RIGHT CANVAS PANEL -->\r\n    <div class=\"canvas-wrapper\" #canvasContainer>\r\n\r\n      <!-- Toolbar -->\r\n      <div class=\"toolbar\">\r\n\r\n        <div class=\"form-check form-switch\">\r\n          <input [checked]=\"isLayoutMode\" [(ngModel)]=\"isLayoutMode\" [ngModelOptions]=\"{ standalone: true }\"\r\n            style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" [disabled]=\"isStarted\" />\r\n          <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n            Layout Mode\r\n          </label>\r\n        </div>\r\n\r\n\r\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onProceed()\" [disabled]=\"isStarted\">\r\n          {{isLayoutMode ? 'Update Layout' : 'Download Images'}}\r\n        </button>\r\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"onForceStop()\" [disabled]='!isStarted'>\r\n          Force stop\r\n        </button>\r\n\r\n        <div class=\"d-flex gap-2\">\r\n          <input type=\"checkbox\" class=\"form-check\" name=\"includeBG\" id=\"includeBG\" [(ngModel)]=\"includeBg\"\r\n            [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"isStarted\">\r\n          <label for=\"includeBG\">Include Background</label>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- Canvas -->\r\n      <div class=\"canvas-area\">\r\n        <canvas #canvas></canvas>\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n</section>", styles: ["html,body{height:100%;margin:0}#plano-migrate .app-layout{display:flex;height:calc(100vh - 260px);overflow:hidden}#plano-migrate .sidebar{width:350px;min-width:350px;border-right:1px solid #ddd;background:#fafafa;overflow-y:auto}#plano-migrate .canvas-wrapper{flex:1;display:flex;flex-direction:column;background:#fff;padding:0;overflow:hidden}#plano-migrate .toolbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #e6e6e6;background:#fafafa}#plano-migrate .toggle-fixtures{display:flex;align-items:center;gap:6px;font-size:14px;-webkit-user-select:none;user-select:none}#plano-migrate .icon-btn{border:none;background:#f1f3f4;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}#plano-migrate .icon-btn:hover{background:#e2e5e7}#plano-migrate .icon-btn:active{background:#d1d4d6}#plano-migrate .icon{width:18px;height:18px;stroke:#3c3f42;stroke-width:2;fill:none}#plano-migrate .canvas-area{position:relative;flex:1;overflow:hidden}#plano-migrate .canvas-area canvas{display:block}#plano-migrate .id-tile{display:flex;align-items:center;padding:8px 12px;border-radius:6px}#plano-migrate .id-tile p{margin:0}#plano-migrate .id-tile.active{background-color:#ffecec;border:1px solid #ffb5b5}#plano-migrate .store-list{max-height:65vh;overflow:auto}\n"] }]
+            args: [{ selector: "lib-plano-migrate", providers: [TitleCasePipe], template: "<section id=\"plano-migrate\">\r\n  <div class=\"app-layout\">\r\n\r\n    <!-- LEFT TOOLBAR -->\r\n    <div class=\"sidebar\">\r\n      <div class=\"p-3\">\r\n        <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n          rows=\"6\"></textarea>\r\n        <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n          Filter\r\n        </button>\r\n\r\n        <div class=\"d-flex align-items-center\">\r\n          <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n          <hr class=\"w-100\">\r\n        </div>\r\n\r\n        <div class=\"store-list\">\r\n          @for (item of storeList; track $index) {\r\n            <div class=\"id-tile\" [class.active]='$index === currentIndex' #storeItem>\r\n              <p [style]=\"{ color: $index === currentIndex ? 'red' : 'black' }\">\r\n                {{ $index + 1 }}) {{ item.storeName }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- RIGHT CANVAS PANEL -->\r\n    <div class=\"canvas-wrapper\" #canvasContainer>\r\n\r\n      <!-- Toolbar -->\r\n      <div class=\"toolbar\">\r\n\r\n        <!-- <div class=\"form-check form-switch\">\r\n          <input [checked]=\"isLayoutMode\" [(ngModel)]=\"isLayoutMode\" [ngModelOptions]=\"{ standalone: true }\"\r\n            style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" [disabled]=\"isStarted\" />\r\n          <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n            Layout Mode\r\n          </label>\r\n        </div> -->\r\n\r\n\r\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onProceed()\" [disabled]=\"isStarted\">\r\n          {{isLayoutMode ? 'Update Layout' : 'Download Images'}}\r\n        </button>\r\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"onForceStop()\" [disabled]='!isStarted'>\r\n          Force stop\r\n        </button>\r\n\r\n        <div class=\"d-flex gap-2\">\r\n          <input type=\"checkbox\" class=\"form-check\" name=\"includeBG\" id=\"includeBG\" [(ngModel)]=\"includeBg\"\r\n            [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"isStarted\">\r\n          <label for=\"includeBG\">Include Background</label>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- Canvas -->\r\n      <div class=\"canvas-area\">\r\n        <canvas #canvas></canvas>\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n</section>", styles: ["html,body{height:100%;margin:0}#plano-migrate .app-layout{display:flex;height:calc(100vh - 260px);overflow:hidden}#plano-migrate .sidebar{width:350px;min-width:350px;border-right:1px solid #ddd;background:#fafafa;overflow-y:auto}#plano-migrate .canvas-wrapper{flex:1;display:flex;flex-direction:column;background:#fff;padding:0;overflow:hidden}#plano-migrate .toolbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #e6e6e6;background:#fafafa}#plano-migrate .toggle-fixtures{display:flex;align-items:center;gap:6px;font-size:14px;-webkit-user-select:none;user-select:none}#plano-migrate .icon-btn{border:none;background:#f1f3f4;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}#plano-migrate .icon-btn:hover{background:#e2e5e7}#plano-migrate .icon-btn:active{background:#d1d4d6}#plano-migrate .icon{width:18px;height:18px;stroke:#3c3f42;stroke-width:2;fill:none}#plano-migrate .canvas-area{position:relative;flex:1;overflow:hidden}#plano-migrate .canvas-area canvas{display:block}#plano-migrate .id-tile{display:flex;align-items:center;padding:8px 12px;border-radius:6px}#plano-migrate .id-tile p{margin:0}#plano-migrate .id-tile.active{background-color:#ffecec;border:1px solid #ffb5b5}#plano-migrate .store-list{max-height:65vh;overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ["canvas"]
@@ -39114,11 +39187,11 @@ class ToolsParentComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"d-flex mb-3\">\r\n    <div class=\"d-flex  gap-3\">\r\n\r\n        <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n            Plano Builder\r\n        </button> -->\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n            Update Layout / Download Canvas\r\n        </button>\r\n        \r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\r\n            Check CAD Output\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\r\n            Allow Edit\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\r\n            Delete Task\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/update-fixture-type\">\r\n            Update Fixture Type\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\r\n            Modify Fixture Numbers\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/data-export\">\r\n            Data Export\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\r\n            MBQ & Order\r\n        </button>\r\n\r\n        <button class=\"btn btn-success\" (click)=\"onClickCreateFixtureTemplate()\">\r\n            Create Template\r\n        </button>\r\n\r\n    </div>\r\n</div>\r\n<hr>\r\n<router-outlet></router-outlet>", styles: [""], dependencies: [{ kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"d-flex mb-3\">\r\n    <div class=\"d-flex  gap-3\">\r\n\r\n        <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n            Plano Builder\r\n        </button> -->\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n            Download Layout Images\r\n        </button>\r\n        \r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\r\n            Check CAD Output\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\r\n            Allow Edit\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\r\n            Delete Task\r\n        </button>\r\n\r\n        <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/update-fixture-type\">\r\n            Update Fixture Type\r\n        </button> -->\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\r\n            Modify Fixture Numbers\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/data-export\">\r\n            Data Export\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\r\n            MBQ & Order\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\r\n            Template Swap\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\r\n            Move Store Bucket\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\r\n            CAD Files\r\n        </button>\r\n\r\n        <button class=\"btn btn-success\" (click)=\"onClickCreateFixtureTemplate()\">\r\n            Create Template\r\n        </button>\r\n\r\n    </div>\r\n</div>\r\n<hr>\r\n<router-outlet></router-outlet>", styles: [""], dependencies: [{ kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-tools-parent", template: "<div class=\"d-flex mb-3\">\r\n    <div class=\"d-flex  gap-3\">\r\n\r\n        <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n            Plano Builder\r\n        </button> -->\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n            Update Layout / Download Canvas\r\n        </button>\r\n        \r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\r\n            Check CAD Output\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\r\n            Allow Edit\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\r\n            Delete Task\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/update-fixture-type\">\r\n            Update Fixture Type\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\r\n            Modify Fixture Numbers\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/data-export\">\r\n            Data Export\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\r\n            MBQ & Order\r\n        </button>\r\n\r\n        <button class=\"btn btn-success\" (click)=\"onClickCreateFixtureTemplate()\">\r\n            Create Template\r\n        </button>\r\n\r\n    </div>\r\n</div>\r\n<hr>\r\n<router-outlet></router-outlet>" }]
+            args: [{ selector: "lib-tools-parent", template: "<div class=\"d-flex mb-3\">\r\n    <div class=\"d-flex  gap-3\">\r\n\r\n        <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n            Plano Builder\r\n        </button> -->\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n            Download Layout Images\r\n        </button>\r\n        \r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\r\n            Check CAD Output\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\r\n            Allow Edit\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\r\n            Delete Task\r\n        </button>\r\n\r\n        <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/update-fixture-type\">\r\n            Update Fixture Type\r\n        </button> -->\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\r\n            Modify Fixture Numbers\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/data-export\">\r\n            Data Export\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\r\n            MBQ & Order\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\r\n            Template Swap\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\r\n            Move Store Bucket\r\n        </button>\r\n\r\n        <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\r\n            CAD Files\r\n        </button>\r\n\r\n        <button class=\"btn btn-success\" (click)=\"onClickCreateFixtureTemplate()\">\r\n            Create Template\r\n        </button>\r\n\r\n    </div>\r\n</div>\r\n<hr>\r\n<router-outlet></router-outlet>" }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2$1.GlobalStateService }] });
 class MisplacedProductFixtureComponent {
@@ -60336,6 +60409,7 @@ class OnboardStorePlanoComponent {
     layoutBounds;
     isRunAllocationAllowed = false;
     ivmAliasKeys = new Set();
+    fixtureLibraryByWidth = new Map();
     restrictedUsers = [
         "mathew.rhea@lenskart.com",
         "sawran.singh@dealskart.in",
@@ -60614,7 +60688,7 @@ class OnboardStorePlanoComponent {
                 event?.templateGroupName ?? "";
             this.selectedFixtureData.header.label = event?.headerLabel ?? "";
             this.selectedFixtureData.footer.label = event?.footerLabel ?? "";
-            this.validateFixtureHeaders();
+            this.validateFixtures();
             this.renderFloor(false);
         }
         else if (event?.section) {
@@ -60744,10 +60818,15 @@ class OnboardStorePlanoComponent {
                     emitEvent: false,
                 });
                 this.disableEdit = false;
-                if (!this.ivmAliasKeys.size) {
-                    await this.fetchIvmAlias();
+                if (!this.ivmAliasKeys.size || !this.fixtureLibraryByWidth.size) {
+                    await Promise.all([
+                        this.ivmAliasKeys.size ? Promise.resolve() : this.fetchIvmAlias(),
+                        this.fixtureLibraryByWidth.size
+                            ? Promise.resolve()
+                            : this.fetchFixtureLibraryKeys(),
+                    ]);
                 }
-                this.validateFixtureHeaders();
+                this.validateFixtures();
                 this.renderFloor();
                 this.isPageLoading = false;
                 if (enable) {
@@ -60803,14 +60882,131 @@ class OnboardStorePlanoComponent {
             // silently fail — validation skipped if alias unavailable
         }
     }
-    validateFixtureHeaders() {
-        if (!this.ivmAliasKeys.size)
+    async fetchFixtureLibraryKeys() {
+        try {
+            const res = await firstValueFrom(this.apiService.getFixtureLibNameList(this.clientId, "non-draft"));
+            if (!Array.isArray(res?.data))
+                return;
+            const grouped = new Map();
+            for (const item of res.data) {
+                const name = item?.fixtureName;
+                if (typeof name !== "string" || !name.length)
+                    continue;
+                // Backend format: "<category> - <value><unit>" e.g. "Euro Center - 4ft".
+                // Split on the LAST " - " so categories containing hyphens are preserved.
+                const sepIdx = name.lastIndexOf(" - ");
+                if (sepIdx < 0)
+                    continue;
+                const categoryRaw = name.slice(0, sepIdx);
+                const widthPart = name.slice(sepIdx + 3);
+                const widthMatch = widthPart.match(/^(\d+(?:\.\d+)?)/);
+                if (!widthMatch)
+                    continue;
+                const width = parseFloat(widthMatch[1]);
+                if (Number.isNaN(width))
+                    continue;
+                const normalized = this.normalizeForMatch(categoryRaw);
+                if (!normalized)
+                    continue;
+                if (!grouped.has(width))
+                    grouped.set(width, new Set());
+                grouped.get(width).add(normalized);
+            }
+            this.fixtureLibraryByWidth = grouped;
+        }
+        catch {
+            // silently fail — library validation skipped if unavailable
+        }
+    }
+    // Normalize a category string for matching: lowercase + strip everything
+    // except a-z. Spaces, punctuation, and digits all dropped. Digits in
+    // category names are noise (CAD model codes like "1010"/"1200", vendor
+    // size suffixes) — the real width comes from fixtureWidth.value.
+    normalizeForMatch(str) {
+        if (typeof str !== "string")
+            return "";
+        return str.toLowerCase().replace(/[^a-z]/g, "");
+    }
+    // Damerau-Levenshtein edit distance: counts insertions, deletions,
+    // substitutions, and adjacent-char transpositions (a swap like
+    // "hybird"<->"hybrid" is 1 edit, not 2).
+    damerauLevenshteinDistance(a, b) {
+        if (a === b)
+            return 0;
+        const aLen = a.length;
+        const bLen = b.length;
+        if (!aLen)
+            return bLen;
+        if (!bLen)
+            return aLen;
+        const matrix = Array.from({ length: aLen + 1 }, () => new Array(bLen + 1).fill(0));
+        for (let i = 0; i <= aLen; i++)
+            matrix[i][0] = i;
+        for (let j = 0; j <= bLen; j++)
+            matrix[0][j] = j;
+        for (let i = 1; i <= aLen; i++) {
+            for (let j = 1; j <= bLen; j++) {
+                const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+                matrix[i][j] = Math.min(matrix[i - 1][j] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j - 1] + cost);
+                if (i > 1 &&
+                    j > 1 &&
+                    a[i - 1] === b[j - 2] &&
+                    a[i - 2] === b[j - 1]) {
+                    matrix[i][j] = Math.min(matrix[i][j], matrix[i - 2][j - 2] + 1);
+                }
+            }
+        }
+        return matrix[aLen][bLen];
+    }
+    // Similarity ratio in [0, 1] after normalization. 1.0 = identical.
+    similarityRatio(a, b) {
+        const normA = this.normalizeForMatch(a);
+        const normB = this.normalizeForMatch(b);
+        if (!normA || !normB)
+            return 0;
+        if (normA === normB)
+            return 1;
+        const distance = this.damerauLevenshteinDistance(normA, normB);
+        const maxLen = Math.max(normA.length, normB.length);
+        return 1 - distance / maxLen;
+    }
+    // Returns true if the fixture's (category, width) has a library match.
+    // Width must equal exactly; category passes if it's an exact normalized
+    // match OR a fuzzy match >= 80% against any library category at that width.
+    isLibraryMatch(fixture) {
+        const width = fixture?.fixtureWidth?.value;
+        if (width == null)
+            return false;
+        const candidates = this.fixtureLibraryByWidth.get(width);
+        if (!candidates || candidates.size === 0)
+            return false;
+        const fixtureCat = this.normalizeForMatch(fixture?.fixtureCategory ?? "");
+        if (!fixtureCat)
+            return false;
+        if (candidates.has(fixtureCat))
+            return true;
+        for (const libCat of candidates) {
+            if (this.similarityRatio(fixtureCat, libCat) >= 0.8)
+                return true;
+        }
+        return false;
+    }
+    validateFixtures() {
+        const hasIvm = this.ivmAliasKeys.size > 0;
+        const hasLib = this.fixtureLibraryByWidth.size > 0;
+        if (!hasIvm && !hasLib)
             return;
         this.allFixtureInstances.forEach((fixture) => {
             if (fixture.fixtureName === "space")
                 return;
-            const headerLabel = fixture?.header?.label ?? "";
-            fixture.headerInvalid = !headerLabel || !this.ivmAliasKeys.has(headerLabel);
+            if (hasIvm) {
+                const headerLabel = fixture?.header?.label ?? "";
+                fixture.headerInvalid =
+                    !headerLabel || !this.ivmAliasKeys.has(headerLabel);
+            }
+            if (hasLib) {
+                fixture.libraryInvalid = !this.isLibraryMatch(fixture);
+            }
         });
     }
     get hasInvalidHeaderFixtures() {
@@ -60821,6 +61017,34 @@ class OnboardStorePlanoComponent {
     get invalidHeaderFixtureCount() {
         return this.allFixtureInstances.filter((f) => f.fixtureName !== "space" && f.headerInvalid).length;
     }
+    get hasInvalidLibraryFixtures() {
+        if (!this.fixtureLibraryByWidth.size)
+            return false;
+        return this.allFixtureInstances.some((f) => f.fixtureName !== "space" && f.libraryInvalid);
+    }
+    get invalidLibraryFixtureCount() {
+        return this.allFixtureInstances.filter((f) => f.fixtureName !== "space" && f.libraryInvalid).length;
+    }
+    get hasInvalidFixtures() {
+        return this.hasInvalidHeaderFixtures || this.hasInvalidLibraryFixtures;
+    }
+    get invalidFixturesTooltip() {
+        if (!this.hasInvalidFixtures)
+            return "";
+        const parts = [];
+        const headerCount = this.invalidHeaderFixtureCount;
+        const libCount = this.invalidLibraryFixtureCount;
+        if (headerCount > 0) {
+            parts.push(`${headerCount} fixture${headerCount === 1 ? "" : "s"} ` +
+                `${headerCount === 1 ? "has" : "have"} unrecognized headers.`);
+        }
+        if (libCount > 0) {
+            parts.push(`${libCount} fixture${libCount === 1 ? "" : "s"} ` +
+                `${libCount === 1 ? "does" : "do"} not match any library entry.`);
+        }
+        parts.push("Fix them to run allocation");
+        return parts.join(" ");
+    }
     get isEditLayoutAllowed() {
         if (this.layoutForm.disabled && !this.isAllocationRun) {
             if (this.getStatus === "draft") {
@@ -61679,12 +61903,12 @@ class OnboardStorePlanoComponent {
          Q ${midX} ${firstBoxY} ${midX + radius} ${firstBoxY} Z`, {
             fill: fixtureColor?.fill
                 ? fixtureColor?.fill
-                : fixtureData.headerInvalid
+                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                     ? "#D92D20"
                     : "#EAF8FF",
             stroke: fixtureColor?.primary
                 ? fixtureColor?.primary
-                : fixtureData.headerInvalid
+                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                     ? "#D92D20"
                     : "#6BCAFF",
             strokeWidth: 0.27,
@@ -61695,7 +61919,7 @@ class OnboardStorePlanoComponent {
             fontSize: 7,
             fontFamily: "Inter",
             fontWeight: "600",
-            fill: fixtureData.headerInvalid ? "#fff" : "#101828",
+            fill: (fixtureData.headerInvalid || fixtureData.libraryInvalid) ? "#fff" : "#101828",
             originX: "center",
             originY: "center",
             width: midWidth,
@@ -61714,7 +61938,7 @@ class OnboardStorePlanoComponent {
                 // stroke: '#51C1FF',
                 stroke: fixtureColor?.primary
                     ? fixtureColor?.primary
-                    : fixtureData.headerInvalid
+                    : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                         ? "#D92D20"
                         : "#51C1FF",
                 strokeWidth: 0.27,
@@ -61770,7 +61994,7 @@ class OnboardStorePlanoComponent {
                     height: boxHeight,
                     stroke: fixtureColor?.primary
                         ? fixtureColor?.primary
-                        : fixtureData.headerInvalid
+                        : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                             ? "#D92D20"
                             : "#51C1FF",
                     strokeWidth: 0.27,
@@ -61880,7 +62104,7 @@ class OnboardStorePlanoComponent {
                         height: boxHeight,
                         stroke: fixtureColor?.primary
                             ? fixtureColor?.primary
-                            : fixtureData.headerInvalid
+                            : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                                 ? "#D92D20"
                                 : "#51C1FF",
                         strokeWidth: 0.27,
@@ -61918,7 +62142,7 @@ class OnboardStorePlanoComponent {
                 const groupBottomLine = new fabric.Line([midX, groupBottomY, midX + midWidth, groupBottomY], {
                     stroke: fixtureColor?.primary
                         ? fixtureColor?.primary
-                        : fixtureData.headerInvalid
+                        : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                             ? "#D92D20"
                             : "#51C1FF",
                     strokeWidth: 1,
@@ -62115,12 +62339,12 @@ class OnboardStorePlanoComponent {
          L ${midX} ${lastBoxY} Z`, {
             fill: fixtureColor?.fill
                 ? fixtureColor?.fill
-                : fixtureData.headerInvalid
+                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                     ? "#FEE4E2"
                     : "#EAF8FF",
             stroke: fixtureColor?.primary
                 ? fixtureColor?.primary
-                : fixtureData.headerInvalid
+                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
                     ? "#D92D20"
                     : "#6BCAFF",
             strokeWidth: 0.27,
@@ -63763,8 +63987,8 @@ class OnboardStorePlanoComponent {
             this.toastService.getErrorToast("No fixtures found. Add fixtures to proceed");
             return;
         }
-        if (this.hasInvalidHeaderFixtures) {
-            this.toastService.getErrorToast("Some fixtures have invalid headers. Please fix all red fixtures before running allocation.");
+        if (this.hasInvalidFixtures) {
+            this.toastService.getErrorToast("Some fixtures have invalid headers or library mismatches. Please fix all red fixtures before running allocation.");
             return;
         }
         if (this.isAllocationRun) {
@@ -64194,11 +64418,11 @@ class OnboardStorePlanoComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion accordion=\"NgbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun && hasInvalidHeaderFixtures ? invalidHeaderFixtureCount + ' fixture' + (invalidHeaderFixtureCount === 1 ? '' : 's') + ' have unrecognized headers. Fix them to run allocation' : ''\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"!isAllocationRun && hasInvalidHeaderFixtures\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidHeaderFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                        {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong>\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion accordion=\"NgbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    @if(hasInvalidHeaderFixtures) {\r\n                        <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n                    }\r\n                    @if(hasInvalidLibraryFixtures) {\r\n                        <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n                    }\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion accordion=\"NgbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun && hasInvalidHeaderFixtures ? invalidHeaderFixtureCount + ' fixture' + (invalidHeaderFixtureCount === 1 ? '' : 's') + ' have unrecognized headers. Fix them to run allocation' : ''\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"!isAllocationRun && hasInvalidHeaderFixtures\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidHeaderFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                        {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong>\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion accordion=\"NgbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    @if(hasInvalidHeaderFixtures) {\r\n                        <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n                    }\r\n                    @if(hasInvalidLibraryFixtures) {\r\n                        <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n                    }\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ["baseCanvas"]
@@ -66626,6 +66850,630 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: 'lib-modify-fixture-numbers', template: "<section class=\"modify-fixture-numbers p-3\">\r\n  <div class=\"card p-4\">\r\n    <h5 class=\"mb-3\">Modify Fixture Numbers</h5>\r\n\r\n    <!-- Store Select -->\r\n    <div class=\"mb-3\" style=\"max-width: 600px;\">\r\n      <label class=\"form-label\">Store</label>\r\n      <lib-store-select\r\n        [options]=\"storeOptions\"\r\n        [initialSelected]=\"initialStores\"\r\n        [singleSelect]=\"true\"\r\n        (selectedChange)=\"onStoresSelected($event)\">\r\n      </lib-store-select>\r\n    </div>\r\n\r\n    <!-- Auto Reorder -->\r\n    @if (selectedStoreName) {\r\n      <div class=\"mb-3 d-flex align-items-center gap-3\">\r\n        <button class=\"btn btn-primary\" (click)=\"onAutoReorder()\" [disabled]=\"isReordering\">\r\n          {{ isReordering ? 'Reordering...' : 'Auto Reorder Fixture Numbers' }}\r\n        </button>\r\n        <small class=\"text-muted\">\r\n          Reorders fixtureNumber per floor by associatedElementNumber, then associatedElementFixtureNumber.\r\n        </small>\r\n      </div>\r\n    }\r\n\r\n    <!-- Fixture List -->\r\n    @if (selectedStoreName) {\r\n      @if (isLoadingFixtures) {\r\n        <div class=\"text-muted\">Loading fixtures...</div>\r\n      } @else if (floorGroups.length === 0) {\r\n        <div class=\"text-muted\">No fixtures found for this store.</div>\r\n      } @else {\r\n        @for (group of floorGroups; track group.floorId) {\r\n          <div class=\"floor-group mb-4\">\r\n            <h6 class=\"floor-heading\">Floor: <span class=\"text-muted small\">{{ group.floorId }}</span></h6>\r\n            <div class=\"table-responsive\">\r\n              <table class=\"table table-sm align-middle fixture-table\">\r\n                <thead>\r\n                  <tr>\r\n                    <th>Header Label</th>\r\n                    <th>Fixture Type</th>\r\n                    <th>Element #</th>\r\n                    <th style=\"width: 140px;\">Fixture #</th>\r\n                    <th style=\"width: 180px;\">Element Fixture #</th>\r\n                    <th style=\"width: 110px;\">Action</th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  @for (f of group.fixtures; track f._id) {\r\n                    <tr>\r\n                      <td>{{ f.headerLabel || '\u2014' }}</td>\r\n                      <td>{{ f.fixtureType || '\u2014' }}</td>\r\n                      <td>{{ f.associatedElementNumber ?? '\u2014' }}</td>\r\n                      <td>\r\n                        <input type=\"number\" class=\"form-control form-control-sm\"\r\n                          [(ngModel)]=\"f.editFixtureNumber\">\r\n                      </td>\r\n                      <td>\r\n                        <input type=\"number\" class=\"form-control form-control-sm\"\r\n                          [(ngModel)]=\"f.editAssociatedElementFixtureNumber\">\r\n                      </td>\r\n                      <td>\r\n                        <button class=\"btn btn-sm btn-success\" (click)=\"onSaveFixture(f)\"\r\n                          [disabled]=\"f.isSaving\">\r\n                          {{ f.isSaving ? 'Saving...' : 'Save' }}\r\n                        </button>\r\n                      </td>\r\n                    </tr>\r\n                  }\r\n                </tbody>\r\n              </table>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\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: [".modify-fixture-numbers .floor-group{border:1px solid #e4e7ec;border-radius:8px;padding:12px 16px;background-color:#fff}.modify-fixture-numbers .floor-heading{margin-bottom:12px;color:#344054}.modify-fixture-numbers .fixture-table th{background-color:#f9fafb;font-weight:600;font-size:13px;color:#475467}.modify-fixture-numbers .fixture-table td{font-size:13px;vertical-align:middle}.modify-fixture-numbers .fixture-table input.form-control-sm{max-width:140px}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }] });
+class SwapTemplateComponent {
+    sbs;
+    gs;
+    modalService;
+    toast;
+    cdr;
+    clientId;
+    storeOptions = [];
+    selectedStoreId = null;
+    selectedStore = null;
+    fixtures = [];
+    templates = [];
+    rows = [];
+    isLoadingFixtures = false;
+    isSubmitting = false;
+    canAddRow = false;
+    canSubmit = false;
+    destroy$ = new Subject();
+    storeSelected$ = new Subject();
+    templatesCache$ = null;
+    cachedTemplatesClientId = null;
+    rowIdSeq = 0;
+    constructor(sbs, gs, modalService, toast, cdr) {
+        this.sbs = sbs;
+        this.gs = gs;
+        this.modalService = modalService;
+        this.toast = toast;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil(this.destroy$), debounceTime(200), filter$1((data) => !!data), map$1((data) => {
+            if (data?.client)
+                return data.client;
+            const headerData = JSON.parse(localStorage.getItem('header-filters'));
+            return headerData?.client;
+        }), filter$1((id) => !!id), distinctUntilChanged$1())
+            .subscribe((clientId) => {
+            this.clientId = clientId;
+            this.templatesCache$ = null;
+            this.cachedTemplatesClientId = null;
+            this.resetSelection();
+            this.loadStores();
+            this.prefetchTemplates();
+        });
+        this.storeSelected$
+            .pipe(takeUntil(this.destroy$), tap((store) => {
+            this.selectedStore = store;
+            this.selectedStoreId = store.id;
+            this.fixtures = [];
+            this.rows = [];
+            this.recomputeFlags();
+            this.isLoadingFixtures = true;
+            this.cdr.markForCheck();
+        }), switchMap((store) => this.sbs
+            .getFixtureDetailsByStore(store.label, this.clientId)
+            .pipe(catchError(() => of({ data: [] })), finalize(() => {
+            this.isLoadingFixtures = false;
+            this.cdr.markForCheck();
+        }))))
+            .subscribe((res) => {
+            const fixtureData = res?.data || [];
+            this.fixtures = fixtureData.map((f) => ({
+                _id: f._id,
+                fixtureNumber: f.fixtureNumber,
+                fixtureName: f.fixtureName || '',
+                fixtureCategory: f.fixtureCategory || '',
+                fixtureWidthValue: f.fixtureWidthValue ?? 0,
+                associatedElementType: f.associatedElementType || '',
+                associatedElementFixtureNumber: f.associatedElementFixtureNumber ?? null,
+                displayName: `Fixture ${f.fixtureNumber}`,
+            }));
+            this.rows = this.fixtures.length ? [this.makeEmptyRow()] : [];
+            this.recomputeFlags();
+            this.cdr.markForCheck();
+        });
+    }
+    loadStores() {
+        this.sbs
+            .getStoreOrClusterList({ searchMode: 'store' })
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (res) => {
+                this.storeOptions = res?.data || [];
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.storeOptions = [];
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    prefetchTemplates() {
+        this.getCachedTemplates()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (templates) => {
+                this.templates = templates;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.templates = [];
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    getCachedTemplates() {
+        if (this.templatesCache$ &&
+            this.cachedTemplatesClientId === this.clientId) {
+            return this.templatesCache$;
+        }
+        this.cachedTemplatesClientId = this.clientId;
+        this.templatesCache$ = this.sbs
+            .getAllTemplates({ clientId: this.clientId })
+            .pipe(map$1((res) => {
+            const tplData = res?.data || [];
+            return tplData.map((t) => ({
+                _id: t._id,
+                fixtureName: t.fixtureName,
+                displayName: t.fixtureName?.includes('-ft')
+                    ? t.fixtureName
+                    : `${t.fixtureName} - ${t.fixtureWidth?.value ?? ''} ${t.fixtureWidth?.unit ?? ''}`,
+                subtext: (t.productBrandName || []).join(', '),
+            }));
+        }), shareReplay({ bufferSize: 1, refCount: false }));
+        return this.templatesCache$;
+    }
+    onStoreSelected(storeId) {
+        if (!storeId || storeId === this.selectedStore?.id)
+            return;
+        const store = this.storeOptions.find((s) => s.id === storeId);
+        if (!store)
+            return;
+        this.storeSelected$.next(store);
+    }
+    makeEmptyRow() {
+        const row = {
+            rowId: ++this.rowIdSeq,
+            fixtureId: null,
+            templateId: null,
+            fixture: null,
+            template: null,
+            fixtureOptions: [],
+            wallPosition: '',
+        };
+        row.fixtureOptions = this.computeFixtureOptions(row);
+        return row;
+    }
+    computeFixtureOptions(excludeRow) {
+        const usedIds = new Set(this.rows
+            .filter((r) => r !== excludeRow && r?.fixture)
+            .map((r) => r.fixture._id));
+        return this.fixtures.filter((f) => !usedIds.has(f._id));
+    }
+    refreshAllFixtureOptions() {
+        this.rows.forEach((r) => {
+            r.fixtureOptions = this.computeFixtureOptions(r);
+        });
+    }
+    computeWallPosition(fixture) {
+        if (!fixture)
+            return '';
+        if (fixture.associatedElementType === 'wall' &&
+            fixture.associatedElementFixtureNumber != null) {
+            return `Wall ${fixture.associatedElementFixtureNumber}`;
+        }
+        if (fixture.associatedElementType === 'floor')
+            return 'Floor';
+        return fixture.associatedElementType
+            ? fixture.associatedElementType.charAt(0).toUpperCase() +
+                fixture.associatedElementType.slice(1)
+            : '—';
+    }
+    recomputeFlags() {
+        const last = this.rows[this.rows.length - 1];
+        this.canAddRow =
+            this.rows.length > 0 &&
+                this.rows.length < this.fixtures.length &&
+                !!last?.fixture &&
+                !!last?.template;
+        this.canSubmit =
+            !!this.selectedStore &&
+                this.rows.length > 0 &&
+                this.rows.every((r) => !!r.fixture && !!r.template);
+    }
+    onRowFixtureChange(row, fixtureId) {
+        row.fixtureId = fixtureId;
+        row.fixture = fixtureId
+            ? this.fixtures.find((f) => f._id === fixtureId) || null
+            : null;
+        row.wallPosition = this.computeWallPosition(row.fixture);
+        this.refreshAllFixtureOptions();
+        this.recomputeFlags();
+        this.cdr.markForCheck();
+    }
+    onRowTemplateChange(row, templateId) {
+        row.templateId = templateId;
+        row.template = templateId
+            ? this.templates.find((t) => t._id === templateId) || null
+            : null;
+        this.recomputeFlags();
+        this.cdr.markForCheck();
+    }
+    addRow() {
+        if (!this.canAddRow)
+            return;
+        this.rows.push(this.makeEmptyRow());
+        this.recomputeFlags();
+        this.cdr.markForCheck();
+    }
+    removeRow(index) {
+        if (this.rows.length === 1) {
+            this.rows[0] = this.makeEmptyRow();
+        }
+        else {
+            this.rows.splice(index, 1);
+        }
+        this.refreshAllFixtureOptions();
+        this.recomputeFlags();
+        this.cdr.markForCheck();
+    }
+    onCancel() {
+        this.resetSelection();
+        this.cdr.markForCheck();
+    }
+    resetSelection() {
+        this.selectedStore = null;
+        this.selectedStoreId = null;
+        this.fixtures = [];
+        this.rows = [];
+        this.isLoadingFixtures = false;
+        this.recomputeFlags();
+    }
+    async onSubmit() {
+        if (!this.canSubmit || !this.selectedStore || this.isSubmitting)
+            return;
+        const storeName = this.selectedStore.label;
+        const payload = {
+            data: this.rows.map((r) => ({
+                storeName,
+                fixtureNumber: r.fixture.fixtureNumber,
+                templateName: r.template.fixtureName,
+            })),
+        };
+        const confirmed = await this.confirmSwap(payload.data.length);
+        if (!confirmed)
+            return;
+        this.isSubmitting = true;
+        this.cdr.markForCheck();
+        this.sbs
+            .swapFixtureTemplate(payload)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (res) => {
+                const successCount = res?.data?.successCount ?? 0;
+                const errorCount = res?.data?.errorCount ?? 0;
+                const errors = res?.data?.errors || [];
+                if (errorCount === 0) {
+                    this.toast.getSuccessToast(`Swapped ${successCount} fixture template(s) successfully.`);
+                    this.onCancel();
+                }
+                else if (successCount > 0) {
+                    this.toast.getWarningToast(`Partial: ${successCount} succeeded, ${errorCount} failed. ${this.summarizeErrors(errors)}`);
+                }
+                else {
+                    this.toast.getErrorToast(`All ${errorCount} swap(s) failed. ${this.summarizeErrors(errors)}`);
+                }
+                this.isSubmitting = false;
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                this.toast.getErrorToast(err?.error?.message || 'Failed to swap fixture template.');
+                this.isSubmitting = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    summarizeErrors(errors) {
+        if (!errors?.length)
+            return '';
+        const first = errors
+            .slice(0, 2)
+            .map((e) => `#${e.fixtureNumber}: ${e.error}`)
+            .join('; ');
+        return errors.length > 2 ? `${first}; …` : first;
+    }
+    async confirmSwap(count) {
+        try {
+            const modelRef = this.modalService.open(DeleteConfirmationComponent, {
+                centered: true,
+            });
+            modelRef.componentInstance.title = 'Confirm template swap';
+            modelRef.componentInstance.description = `This will overwrite ${count} fixture(s) with the chosen templates and delete their existing shelves. This action cannot be undone. Continue?`;
+            const result = await modelRef.result;
+            return result === 'ok';
+        }
+        catch {
+            return false;
+        }
+    }
+    trackByRow = (_, row) => row.rowId;
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.storeSelected$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwapTemplateComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4.ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SwapTemplateComponent, selector: "lib-swap-template", ngImport: i0, template: "<section class=\"swap-template p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 900px;\">\r\n    <h5 class=\"mb-3\">Swap Fixture Template</h5>\r\n\r\n    <!-- Store Select -->\r\n    <div class=\"mb-3\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'id'\"\r\n        [nameField]=\"'label'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStoreId\"\r\n        (ngModelChange)=\"onStoreSelected($event)\">\r\n      </lib-reactive-select>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"selectedStore\">\r\n      <ng-container *ngIf=\"isLoadingFixtures; else loaded\">\r\n        <div class=\"text-muted mb-3\">Loading fixtures\u2026</div>\r\n      </ng-container>\r\n\r\n      <ng-template #loaded>\r\n        <ng-container *ngIf=\"fixtures.length; else noFixtures\">\r\n          <!-- Swap Rows -->\r\n          <div class=\"swap-rows\">\r\n            <div *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\"\r\n              class=\"swap-row mb-3\">\r\n              <div class=\"row g-2 align-items-start\">\r\n                <!-- Plano Fixture -->\r\n                <div class=\"col-5\">\r\n                  <lib-reactive-select\r\n                    label=\"Plano Fixture\"\r\n                    [idField]=\"'_id'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"row.fixtureOptions\"\r\n                    [search]=\"true\"\r\n                    [ngModel]=\"row.fixtureId\"\r\n                    (ngModelChange)=\"onRowFixtureChange(row, $event)\">\r\n                  </lib-reactive-select>\r\n\r\n                  <div *ngIf=\"row.fixture\" class=\"fixture-info mt-2\">\r\n                    <div>\r\n                      <span class=\"label\">Name:</span>\r\n                      {{ row.fixture.fixtureName || '\u2014' }}\r\n                    </div>\r\n                    <div>\r\n                      <span class=\"label\">Position:</span>\r\n                      {{ row.wallPosition }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Arrow -->\r\n                <div class=\"col-1 d-flex justify-content-center\"\r\n                  style=\"padding-top: 30px;\">\r\n                  <span class=\"arrow\">\u2192</span>\r\n                </div>\r\n\r\n                <!-- Swapping Template -->\r\n                <div class=\"col-5\">\r\n                  <lib-reactive-select\r\n                    label=\"Swapping Template\"\r\n                    [idField]=\"'_id'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [subTextField]=\"'subtext'\"\r\n                    [data]=\"templates\"\r\n                    [search]=\"true\"\r\n                    [ngModel]=\"row.templateId\"\r\n                    (ngModelChange)=\"onRowTemplateChange(row, $event)\">\r\n                  </lib-reactive-select>\r\n                </div>\r\n\r\n                <!-- Remove Row -->\r\n                <div class=\"col-1 d-flex justify-content-end\"\r\n                  style=\"padding-top: 30px;\">\r\n                  <button type=\"button\" class=\"btn btn-link p-0 remove-btn\"\r\n                    (click)=\"removeRow(i)\" title=\"Remove row\"\r\n                    [disabled]=\"rows.length === 1 && !row.fixture && !row.template\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n                      viewBox=\"0 0 10 10\" fill=\"none\">\r\n                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                        stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Add Row -->\r\n          <div class=\"mb-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 add-btn\"\r\n              (click)=\"addRow()\" [disabled]=\"!canAddRow\">\r\n              + Add another swap\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"d-flex gap-2 mt-4\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\"\r\n              [disabled]=\"isSubmitting\">\r\n              Cancel\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\"\r\n              [disabled]=\"!canSubmit || isSubmitting\">\r\n              {{ isSubmitting ? 'Submitting\u2026' : 'Submit' }}\r\n            </button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #noFixtures>\r\n          <div class=\"text-muted\">No fixtures found for this store.</div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n", styles: [".swap-template .swap-row{border:1px solid #eaecf0;border-radius:6px;padding:12px;background:#fcfcfd}.swap-template .fixture-info{font-size:12px;color:#475467;background:#fff;border:1px dashed #eaecf0;border-radius:4px;padding:6px 8px;line-height:1.5}.swap-template .fixture-info .label{font-weight:600;color:#344054;margin-right:4px}.swap-template .arrow{font-size:20px;color:#98a2b3;-webkit-user-select:none;user-select:none}.swap-template .add-btn{color:#1570ef;text-decoration:none;font-weight:500}.swap-template .add-btn:disabled{color:#98a2b3;cursor:not-allowed}.swap-template .remove-btn{line-height:1}.swap-template .remove-btn:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwapTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-swap-template', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"swap-template p-3\">\r\n  <div class=\"card p-4\" style=\"max-width: 900px;\">\r\n    <h5 class=\"mb-3\">Swap Fixture Template</h5>\r\n\r\n    <!-- Store Select -->\r\n    <div class=\"mb-3\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'id'\"\r\n        [nameField]=\"'label'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStoreId\"\r\n        (ngModelChange)=\"onStoreSelected($event)\">\r\n      </lib-reactive-select>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"selectedStore\">\r\n      <ng-container *ngIf=\"isLoadingFixtures; else loaded\">\r\n        <div class=\"text-muted mb-3\">Loading fixtures\u2026</div>\r\n      </ng-container>\r\n\r\n      <ng-template #loaded>\r\n        <ng-container *ngIf=\"fixtures.length; else noFixtures\">\r\n          <!-- Swap Rows -->\r\n          <div class=\"swap-rows\">\r\n            <div *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\"\r\n              class=\"swap-row mb-3\">\r\n              <div class=\"row g-2 align-items-start\">\r\n                <!-- Plano Fixture -->\r\n                <div class=\"col-5\">\r\n                  <lib-reactive-select\r\n                    label=\"Plano Fixture\"\r\n                    [idField]=\"'_id'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [data]=\"row.fixtureOptions\"\r\n                    [search]=\"true\"\r\n                    [ngModel]=\"row.fixtureId\"\r\n                    (ngModelChange)=\"onRowFixtureChange(row, $event)\">\r\n                  </lib-reactive-select>\r\n\r\n                  <div *ngIf=\"row.fixture\" class=\"fixture-info mt-2\">\r\n                    <div>\r\n                      <span class=\"label\">Name:</span>\r\n                      {{ row.fixture.fixtureName || '\u2014' }}\r\n                    </div>\r\n                    <div>\r\n                      <span class=\"label\">Position:</span>\r\n                      {{ row.wallPosition }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Arrow -->\r\n                <div class=\"col-1 d-flex justify-content-center\"\r\n                  style=\"padding-top: 30px;\">\r\n                  <span class=\"arrow\">\u2192</span>\r\n                </div>\r\n\r\n                <!-- Swapping Template -->\r\n                <div class=\"col-5\">\r\n                  <lib-reactive-select\r\n                    label=\"Swapping Template\"\r\n                    [idField]=\"'_id'\"\r\n                    [nameField]=\"'displayName'\"\r\n                    [subTextField]=\"'subtext'\"\r\n                    [data]=\"templates\"\r\n                    [search]=\"true\"\r\n                    [ngModel]=\"row.templateId\"\r\n                    (ngModelChange)=\"onRowTemplateChange(row, $event)\">\r\n                  </lib-reactive-select>\r\n                </div>\r\n\r\n                <!-- Remove Row -->\r\n                <div class=\"col-1 d-flex justify-content-end\"\r\n                  style=\"padding-top: 30px;\">\r\n                  <button type=\"button\" class=\"btn btn-link p-0 remove-btn\"\r\n                    (click)=\"removeRow(i)\" title=\"Remove row\"\r\n                    [disabled]=\"rows.length === 1 && !row.fixture && !row.template\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n                      viewBox=\"0 0 10 10\" fill=\"none\">\r\n                      <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                        stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Add Row -->\r\n          <div class=\"mb-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 add-btn\"\r\n              (click)=\"addRow()\" [disabled]=\"!canAddRow\">\r\n              + Add another swap\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"d-flex gap-2 mt-4\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\"\r\n              [disabled]=\"isSubmitting\">\r\n              Cancel\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\"\r\n              [disabled]=\"!canSubmit || isSubmitting\">\r\n              {{ isSubmitting ? 'Submitting\u2026' : 'Submit' }}\r\n            </button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #noFixtures>\r\n          <div class=\"text-muted\">No fixtures found for this store.</div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n</section>\r\n", styles: [".swap-template .swap-row{border:1px solid #eaecf0;border-radius:6px;padding:12px;background:#fcfcfd}.swap-template .fixture-info{font-size:12px;color:#475467;background:#fff;border:1px dashed #eaecf0;border-radius:4px;padding:6px 8px;line-height:1.5}.swap-template .fixture-info .label{font-weight:600;color:#344054;margin-right:4px}.swap-template .arrow{font-size:20px;color:#98a2b3;-webkit-user-select:none;user-select:none}.swap-template .add-btn{color:#1570ef;text-decoration:none;font-weight:500}.swap-template .add-btn:disabled{color:#98a2b3;cursor:not-allowed}.swap-template .remove-btn{line-height:1}.swap-template .remove-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.ToastService }, { type: i0.ChangeDetectorRef }] });
+const STATUS_OPTIONS = [
+    { value: "draft", label: "Draft", bucket: "Onboarding" },
+    {
+        value: "allocationPending",
+        label: "Allocation Pending",
+        bucket: "Onboarding",
+    },
+    { value: "completed", label: "Completed", bucket: "ManagePlano" },
+];
+class MoveBucketComponent {
+    sbs;
+    gs;
+    modalService;
+    clientId;
+    storeOptions = [];
+    selectedStoreId = null;
+    selectedStoreLabel = null;
+    floors = [];
+    selectedFloorId = null;
+    isLoadingFloors = false;
+    statusOptions = STATUS_OPTIONS;
+    targetStatus = null;
+    currentStatus = null;
+    clearLayoutTasks = false;
+    clearFixtureTasks = false;
+    clearZoneTasks = false;
+    isSubmitting = false;
+    message = "";
+    messageType = "success";
+    destroy$ = new Subject();
+    constructor(sbs, gs, modalService) {
+        this.sbs = sbs;
+        this.gs = gs;
+        this.modalService = modalService;
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil(this.destroy$), debounceTime(200), filter$1((data) => !!data), distinctUntilChanged$1())
+            .subscribe((data) => {
+            if (data?.client) {
+                this.clientId = data.client;
+            }
+            else {
+                const headerData = JSON.parse(localStorage.getItem("header-filters"));
+                this.clientId = headerData?.client;
+            }
+            this.loadStores();
+        });
+    }
+    loadStores() {
+        this.sbs
+            .getStoreOrClusterList({ searchMode: "store" })
+            .subscribe((res) => {
+            this.storeOptions = res?.data || [];
+        });
+    }
+    onStoreSelected(storeId) {
+        this.selectedStoreId = storeId;
+        const store = this.storeOptions.find((s) => s.id === storeId);
+        this.selectedStoreLabel = store?.label ?? null;
+        this.resetFloorState();
+        if (this.selectedStoreLabel) {
+            this.loadFloors();
+        }
+    }
+    resetFloorState() {
+        this.floors = [];
+        this.selectedFloorId = null;
+        this.currentStatus = null;
+        this.targetStatus = null;
+        this.clearLayoutTasks = false;
+        this.clearFixtureTasks = false;
+        this.clearZoneTasks = false;
+    }
+    loadFloors() {
+        if (!this.selectedStoreLabel)
+            return;
+        this.isLoadingFloors = true;
+        this.sbs
+            .getFloorsWithStatus(this.selectedStoreLabel, this.clientId)
+            .subscribe({
+            next: (res) => {
+                const raw = res?.data?.floors || [];
+                this.floors = raw
+                    .map((f) => ({
+                    _id: f._id,
+                    floorNumber: f.floorNumber,
+                    floorName: f.floorName,
+                    status: f.status,
+                    isPlanoApproved: f.isPlanoApproved,
+                    displayName: `Floor ${f.floorNumber} — ${f.floorName} [${this.getStatusLabel(f.status)}]`,
+                }))
+                    .sort((a, b) => a.floorNumber - b.floorNumber);
+                if (this.floors.length === 1) {
+                    this.onFloorSelected(this.floors[0]._id);
+                }
+                this.isLoadingFloors = false;
+            },
+            error: (err) => {
+                this.showMessage(err?.error?.message || "Failed to load floors.", "error");
+                this.isLoadingFloors = false;
+            },
+        });
+    }
+    onFloorSelected(floorId) {
+        this.selectedFloorId = floorId;
+        const floor = this.floors.find((f) => f._id === floorId);
+        if (floor) {
+            this.currentStatus = floor.status;
+            this.targetStatus = floor.status;
+        }
+        else {
+            this.currentStatus = null;
+            this.targetStatus = null;
+        }
+    }
+    onTargetStatusSelected(value) {
+        this.targetStatus = value;
+    }
+    get statusChanged() {
+        return !!this.targetStatus && this.targetStatus !== this.currentStatus;
+    }
+    get canSubmit() {
+        if (this.isSubmitting)
+            return false;
+        if (!this.selectedFloorId || !this.targetStatus)
+            return false;
+        const anyClear = this.clearLayoutTasks || this.clearFixtureTasks || this.clearZoneTasks;
+        return this.statusChanged || anyClear;
+    }
+    getStatusLabel(status) {
+        if (!status)
+            return "--";
+        return STATUS_OPTIONS.find((s) => s.value === status)?.label || status;
+    }
+    getBucketLabel(status) {
+        if (!status)
+            return "--";
+        return STATUS_OPTIONS.find((s) => s.value === status)?.bucket || "--";
+    }
+    async onSubmit() {
+        if (!this.canSubmit)
+            return;
+        const floor = this.floors.find((f) => f._id === this.selectedFloorId);
+        const floorLabel = floor
+            ? `Floor ${floor.floorNumber} (${floor.floorName})`
+            : "selected floor";
+        const clearSummary = [];
+        if (this.clearLayoutTasks)
+            clearSummary.push("Layout");
+        if (this.clearFixtureTasks)
+            clearSummary.push("Fixture");
+        if (this.clearZoneTasks)
+            clearSummary.push("Zone");
+        const lines = [];
+        lines.push(`Store: ${this.selectedStoreLabel ?? "--"}`);
+        lines.push(floorLabel);
+        if (this.statusChanged) {
+            lines.push(`Status: ${this.getStatusLabel(this.currentStatus)} → ${this.getStatusLabel(this.targetStatus)}`);
+        }
+        if (clearSummary.length) {
+            lines.push(`Clear tasks: ${clearSummary.join(", ")}`);
+        }
+        lines.push("This action cannot be undone. Continue?");
+        const confirmed = await this.confirm("Confirm bucket update", lines.join("\n"));
+        if (!confirmed)
+            return;
+        const payload = {
+            floorId: this.selectedFloorId,
+            targetStatus: this.targetStatus,
+            clearLayoutTasks: this.clearLayoutTasks,
+            clearFixtureTasks: this.clearFixtureTasks,
+            clearZoneTasks: this.clearZoneTasks,
+        };
+        this.isSubmitting = true;
+        this.sbs.moveStoreBucket(payload).subscribe({
+            next: (res) => {
+                const data = res?.data || {};
+                const deleted = data?.deletedCounts || {};
+                const parts = [];
+                if (data?.prevStatus && data?.nextStatus) {
+                    parts.push(`Moved ${this.getStatusLabel(data.prevStatus)} → ${this.getStatusLabel(data.nextStatus)}`);
+                }
+                if (deleted.processedTasks || deleted.planoTaskCompliances) {
+                    parts.push(`Cleared ${deleted.processedTasks || 0} task(s), ${deleted.planoTaskCompliances || 0} compliance row(s)`);
+                }
+                this.showMessage(parts.join(". ") || "Updated successfully", "success");
+                this.isSubmitting = false;
+                this.loadFloors();
+            },
+            error: (err) => {
+                this.showMessage(err?.error?.message || "Failed to update.", "error");
+                this.isSubmitting = false;
+            },
+        });
+    }
+    async confirm(title, description) {
+        try {
+            const ref = this.modalService.open(DeleteConfirmationComponent, {
+                centered: true,
+            });
+            ref.componentInstance.title = title;
+            ref.componentInstance.description = description;
+            ref.componentInstance.confirmLabel = "Update";
+            ref.componentInstance.confirmClass = "btn-primary";
+            const result = await ref.result;
+            return result === "ok";
+        }
+        catch {
+            return false;
+        }
+    }
+    showMessage(msg, type) {
+        this.message = msg;
+        this.messageType = type;
+        setTimeout(() => (this.message = ""), 6000);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MoveBucketComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MoveBucketComponent, selector: "lib-move-bucket", ngImport: i0, template: "<section class=\"move-bucket p-3\">\n  <div class=\"card p-4\" style=\"max-width: 640px;\">\n    <h5 class=\"mb-1\">Move Store Bucket</h5>\n    <p class=\"text-muted small mb-3\">\n      Move a floor between Onboarding (Draft / Allocation Pending) and ManagePlano (Completed) without losing store data.\n    </p>\n\n    <!-- Store -->\n    <div class=\"mb-3\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'id'\"\n        [nameField]=\"'label'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStoreId\"\n        (ngModelChange)=\"onStoreSelected($event)\">\n      </lib-reactive-select>\n    </div>\n\n    <!-- Floor -->\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n          <lib-reactive-select\n            label=\"Floor\"\n            [idField]=\"'_id'\"\n            [nameField]=\"'displayName'\"\n            [data]=\"floors\"\n            [search]=\"true\"\n            [ngModel]=\"selectedFloorId\"\n            (ngModelChange)=\"onFloorSelected($event)\">\n          </lib-reactive-select>\n        </ng-container>\n        <ng-template #noFloors>\n          <div class=\"text-muted small\">No floors found for this store.</div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <!-- Current bucket info + target status -->\n    <ng-container *ngIf=\"selectedFloorId && currentStatus\">\n      <div class=\"mb-3 p-3 rounded current-info\">\n        <div class=\"d-flex justify-content-between small\">\n          <span class=\"text-muted\">Current bucket</span>\n          <span class=\"fw-semibold\">{{ getBucketLabel(currentStatus) }}</span>\n        </div>\n        <div class=\"d-flex justify-content-between small mt-1\">\n          <span class=\"text-muted\">Current status</span>\n          <span class=\"fw-semibold\">{{ getStatusLabel(currentStatus) }}</span>\n        </div>\n      </div>\n\n      <div class=\"mb-3\">\n        <lib-reactive-select\n          label=\"Move to status\"\n          [idField]=\"'value'\"\n          [nameField]=\"'label'\"\n          [subTextField]=\"'bucket'\"\n          [data]=\"statusOptions\"\n          [ngModel]=\"targetStatus\"\n          (ngModelChange)=\"onTargetStatusSelected($event)\">\n        </lib-reactive-select>\n        <div class=\"form-text text-warning\" *ngIf=\"statusChanged\">\n          isPlanoApproved will be set to\n          <strong>{{ targetStatus === 'draft' ? 'false' : 'true' }}</strong>,\n          planoProgress will be set to\n          <strong>{{ targetStatus === 'completed' ? 25 : 0 }}</strong>.\n        </div>\n      </div>\n\n      <!-- Task cleanup checkboxes -->\n      <div class=\"mb-3\">\n        <label class=\"form-label\">Clear tasks &amp; compliance rows (optional)</label>\n        <div class=\"d-flex flex-column gap-2\">\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"clrLayout\"\n              [(ngModel)]=\"clearLayoutTasks\">\n            <label class=\"form-check-label\" for=\"clrLayout\">\n              Layout tasks\n              <span class=\"text-muted small\">(planoType: layout, layoutFixture)</span>\n            </label>\n          </div>\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"clrFixture\"\n              [(ngModel)]=\"clearFixtureTasks\">\n            <label class=\"form-check-label\" for=\"clrFixture\">\n              Fixture tasks\n              <span class=\"text-muted small\">(planoType: fixture, vm)</span>\n            </label>\n          </div>\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"clrZone\"\n              [(ngModel)]=\"clearZoneTasks\">\n            <label class=\"form-check-label\" for=\"clrZone\">\n              Zone tasks\n              <span class=\"text-muted small\">(planoType: zoneVerification)</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Submit -->\n    <button class=\"btn btn-primary\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n      {{ isSubmitting ? 'Updating...' : 'Update' }}\n    </button>\n\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\n      [class.alert-success]=\"messageType === 'success'\"\n      [class.alert-danger]=\"messageType === 'error'\"\n      style=\"white-space: pre-line;\">\n      {{ message }}\n    </div>\n  </div>\n</section>\n", styles: [".move-bucket .current-info{background-color:#f9fafb;border:1px solid #e4e7ec}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MoveBucketComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "lib-move-bucket", template: "<section class=\"move-bucket p-3\">\n  <div class=\"card p-4\" style=\"max-width: 640px;\">\n    <h5 class=\"mb-1\">Move Store Bucket</h5>\n    <p class=\"text-muted small mb-3\">\n      Move a floor between Onboarding (Draft / Allocation Pending) and ManagePlano (Completed) without losing store data.\n    </p>\n\n    <!-- Store -->\n    <div class=\"mb-3\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'id'\"\n        [nameField]=\"'label'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStoreId\"\n        (ngModelChange)=\"onStoreSelected($event)\">\n      </lib-reactive-select>\n    </div>\n\n    <!-- Floor -->\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n          <lib-reactive-select\n            label=\"Floor\"\n            [idField]=\"'_id'\"\n            [nameField]=\"'displayName'\"\n            [data]=\"floors\"\n            [search]=\"true\"\n            [ngModel]=\"selectedFloorId\"\n            (ngModelChange)=\"onFloorSelected($event)\">\n          </lib-reactive-select>\n        </ng-container>\n        <ng-template #noFloors>\n          <div class=\"text-muted small\">No floors found for this store.</div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <!-- Current bucket info + target status -->\n    <ng-container *ngIf=\"selectedFloorId && currentStatus\">\n      <div class=\"mb-3 p-3 rounded current-info\">\n        <div class=\"d-flex justify-content-between small\">\n          <span class=\"text-muted\">Current bucket</span>\n          <span class=\"fw-semibold\">{{ getBucketLabel(currentStatus) }}</span>\n        </div>\n        <div class=\"d-flex justify-content-between small mt-1\">\n          <span class=\"text-muted\">Current status</span>\n          <span class=\"fw-semibold\">{{ getStatusLabel(currentStatus) }}</span>\n        </div>\n      </div>\n\n      <div class=\"mb-3\">\n        <lib-reactive-select\n          label=\"Move to status\"\n          [idField]=\"'value'\"\n          [nameField]=\"'label'\"\n          [subTextField]=\"'bucket'\"\n          [data]=\"statusOptions\"\n          [ngModel]=\"targetStatus\"\n          (ngModelChange)=\"onTargetStatusSelected($event)\">\n        </lib-reactive-select>\n        <div class=\"form-text text-warning\" *ngIf=\"statusChanged\">\n          isPlanoApproved will be set to\n          <strong>{{ targetStatus === 'draft' ? 'false' : 'true' }}</strong>,\n          planoProgress will be set to\n          <strong>{{ targetStatus === 'completed' ? 25 : 0 }}</strong>.\n        </div>\n      </div>\n\n      <!-- Task cleanup checkboxes -->\n      <div class=\"mb-3\">\n        <label class=\"form-label\">Clear tasks &amp; compliance rows (optional)</label>\n        <div class=\"d-flex flex-column gap-2\">\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"clrLayout\"\n              [(ngModel)]=\"clearLayoutTasks\">\n            <label class=\"form-check-label\" for=\"clrLayout\">\n              Layout tasks\n              <span class=\"text-muted small\">(planoType: layout, layoutFixture)</span>\n            </label>\n          </div>\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"clrFixture\"\n              [(ngModel)]=\"clearFixtureTasks\">\n            <label class=\"form-check-label\" for=\"clrFixture\">\n              Fixture tasks\n              <span class=\"text-muted small\">(planoType: fixture, vm)</span>\n            </label>\n          </div>\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"clrZone\"\n              [(ngModel)]=\"clearZoneTasks\">\n            <label class=\"form-check-label\" for=\"clrZone\">\n              Zone tasks\n              <span class=\"text-muted small\">(planoType: zoneVerification)</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Submit -->\n    <button class=\"btn btn-primary\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n      {{ isSubmitting ? 'Updating...' : 'Update' }}\n    </button>\n\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\n      [class.alert-success]=\"messageType === 'success'\"\n      [class.alert-danger]=\"messageType === 'error'\"\n      style=\"white-space: pre-line;\">\n      {{ message }}\n    </div>\n  </div>\n</section>\n", styles: [".move-bucket .current-info{background-color:#f9fafb;border:1px solid #e4e7ec}\n"] }]
+        }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }] });
+class CadFilesComponent {
+    sbs;
+    storeName = '';
+    files = [];
+    hasSearched = false;
+    isLoading = false;
+    downloadingKey = null;
+    message = '';
+    messageType = 'success';
+    destroy$ = new Subject();
+    constructor(sbs) {
+        this.sbs = sbs;
+    }
+    onFetch() {
+        let storeName = (this.storeName || '').trim();
+        if (!storeName) {
+            this.showMessage('Please enter a store name.', 'error');
+            return;
+        }
+        this.isLoading = true;
+        this.hasSearched = true;
+        this.files = [];
+        this.message = '';
+        this.sbs
+            .getCadFiles(storeName)
+            .pipe(finalize(() => (this.isLoading = false)))
+            .subscribe({
+            next: (res) => {
+                this.files = res?.data?.files || [];
+            },
+            error: (err) => {
+                this.showMessage(err?.error?.error?.errMsg ||
+                    err?.error?.error ||
+                    err?.error?.message ||
+                    'Failed to fetch files.', 'error');
+            },
+        });
+    }
+    async onDownload(file) {
+        if (!file.url) {
+            this.showMessage('Download URL is not available for this file.', 'error');
+            return;
+        }
+        this.downloadingKey = file.key;
+        try {
+            const response = await fetch(file.url);
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const blob = await response.blob();
+            FileSaver.saveAs(blob, file.name);
+        }
+        catch {
+            this.showMessage(`Failed to download ${file.name}.`, 'error');
+        }
+        finally {
+            this.downloadingKey = null;
+        }
+    }
+    formatSize(bytes) {
+        if (bytes == null || isNaN(bytes))
+            return '-';
+        return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+    }
+    showMessage(msg, type) {
+        this.message = msg;
+        this.messageType = type;
+        setTimeout(() => (this.message = ''), 5000);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CadFilesComponent, deps: [{ token: StoreBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CadFilesComponent, selector: "lib-cad-files", ngImport: i0, template: "<section class=\"cad-files p-3\">\n  <div class=\"card p-4\">\n    <h5 class=\"mb-1\">CAD &amp; Kissflow Files</h5>\n    <p class=\"text-muted small mb-3\">\n      Enter a store name to list the uploaded CAD and Kissflow files (sorted).\n    </p>\n\n    <div class=\"d-flex gap-2 align-items-end mb-3 flex-wrap\">\n      <div class=\"flex-grow-1\" style=\"min-width: 260px; max-width: 420px;\">\n        <label class=\"form-label\">Store Name</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          placeholder=\"Enter store name\"\n          [(ngModel)]=\"storeName\"\n          (keyup.enter)=\"onFetch()\"\n          [disabled]=\"isLoading\" />\n      </div>\n\n      <button\n        class=\"btn btn-primary\"\n        (click)=\"onFetch()\"\n        [disabled]=\"isLoading || !storeName.trim()\">\n        {{ isLoading ? 'Fetching...' : 'Fetch Files' }}\n      </button>\n    </div>\n\n    @if (message) {\n      <div\n        class=\"alert\"\n        [class.alert-success]=\"messageType === 'success'\"\n        [class.alert-danger]=\"messageType === 'error'\">\n        {{ message }}\n      </div>\n    }\n\n    @if (isLoading) {\n      <div class=\"text-muted\">Loading files...</div>\n    } @else if (hasSearched && files.length === 0) {\n      <div class=\"text-muted\">No files found for this store.</div>\n    } @else if (files.length > 0) {\n      <div class=\"table-responsive\">\n        <table class=\"table table-sm align-middle\">\n          <thead>\n            <tr>\n              <th>Name</th>\n              <th>Key</th>\n              <th>Uploaded At</th>\n              <th>Size</th>\n              <th class=\"text-end\">Action</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (file of files; track file.key) {\n              <tr>\n                <td>{{ file.name }}</td>\n                <td class=\"text-muted small text-break\">{{ file.key }}</td>\n                <td>{{ file.uploadedAt | date: 'medium' }}</td>\n                <td>{{ formatSize(file.size) }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"onDownload(file)\"\n                    [disabled]=\"downloadingKey === file.key\">\n                    {{ downloadingKey === file.key ? 'Downloading...' : 'Download' }}\n                  </button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </div>\n</section>\n", styles: [".cad-files .card{border:1px solid #e0e0e0}.cad-files .table th{font-size:.85rem;color:#475467;font-weight:600}.cad-files .table td{vertical-align:middle}.cad-files .table .text-break{word-break:break-all}\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: "pipe", type: i5.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CadFilesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-cad-files', template: "<section class=\"cad-files p-3\">\n  <div class=\"card p-4\">\n    <h5 class=\"mb-1\">CAD &amp; Kissflow Files</h5>\n    <p class=\"text-muted small mb-3\">\n      Enter a store name to list the uploaded CAD and Kissflow files (sorted).\n    </p>\n\n    <div class=\"d-flex gap-2 align-items-end mb-3 flex-wrap\">\n      <div class=\"flex-grow-1\" style=\"min-width: 260px; max-width: 420px;\">\n        <label class=\"form-label\">Store Name</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          placeholder=\"Enter store name\"\n          [(ngModel)]=\"storeName\"\n          (keyup.enter)=\"onFetch()\"\n          [disabled]=\"isLoading\" />\n      </div>\n\n      <button\n        class=\"btn btn-primary\"\n        (click)=\"onFetch()\"\n        [disabled]=\"isLoading || !storeName.trim()\">\n        {{ isLoading ? 'Fetching...' : 'Fetch Files' }}\n      </button>\n    </div>\n\n    @if (message) {\n      <div\n        class=\"alert\"\n        [class.alert-success]=\"messageType === 'success'\"\n        [class.alert-danger]=\"messageType === 'error'\">\n        {{ message }}\n      </div>\n    }\n\n    @if (isLoading) {\n      <div class=\"text-muted\">Loading files...</div>\n    } @else if (hasSearched && files.length === 0) {\n      <div class=\"text-muted\">No files found for this store.</div>\n    } @else if (files.length > 0) {\n      <div class=\"table-responsive\">\n        <table class=\"table table-sm align-middle\">\n          <thead>\n            <tr>\n              <th>Name</th>\n              <th>Key</th>\n              <th>Uploaded At</th>\n              <th>Size</th>\n              <th class=\"text-end\">Action</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (file of files; track file.key) {\n              <tr>\n                <td>{{ file.name }}</td>\n                <td class=\"text-muted small text-break\">{{ file.key }}</td>\n                <td>{{ file.uploadedAt | date: 'medium' }}</td>\n                <td>{{ formatSize(file.size) }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"onDownload(file)\"\n                    [disabled]=\"downloadingKey === file.key\">\n                    {{ downloadingKey === file.key ? 'Downloading...' : 'Download' }}\n                  </button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </div>\n</section>\n", styles: [".cad-files .card{border:1px solid #e0e0e0}.cad-files .table th{font-size:.85rem;color:#475467;font-weight:600}.cad-files .table td{vertical-align:middle}.cad-files .table .text-break{word-break:break-all}\n"] }]
+        }], ctorParameters: () => [{ type: StoreBuilderService }] });
 const routes$1 = [
     {
         path: "layout-builder",
@@ -66820,6 +67668,18 @@ const routes$1 = [
                 path: "store-exports",
                 component: StoreExportsComponent,
             },
+            {
+                path: "swap-template",
+                component: SwapTemplateComponent,
+            },
+            {
+                path: "move-bucket",
+                component: MoveBucketComponent,
+            },
+            {
+                path: "cad-files",
+                component: CadFilesComponent,
+            },
         ],
     },
     {
@@ -67914,6 +68774,9 @@ class TangoStoreBuilderModule {
             DeleteTaskComponent,
             UpdateFixtureTypeComponent,
             ModifyFixtureNumbersComponent,
+            SwapTemplateComponent,
+            MoveBucketComponent,
+            CadFilesComponent,
             PlanoDataExportComponent,
             StoreExportsComponent,
             FixtureProductsComponent,
@@ -68076,6 +68939,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         DeleteTaskComponent,
                         UpdateFixtureTypeComponent,
                         ModifyFixtureNumbersComponent,
+                        SwapTemplateComponent,
+                        MoveBucketComponent,
+                        CadFilesComponent,
                         PlanoDataExportComponent,
                         StoreExportsComponent,
                         FixtureProductsComponent,