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

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

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