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

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

@@ -725,12 +725,22 @@ 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);
     }
     getLookPlanoCollectionDetails(collectionId) {
         return this.http.get(`${this.storeBuilderApiUrl}/lookPlanoCollection/getCollectionDetails`, { params: { collectionId } });
     }
+    /** MBQ bucket / Brand / Fixture Header dropdown options + combinations,
+     *  seeded into planostaticdatas (type='lookComboOptions') from the sheet. */
+    getLookComboOptions(clientId) {
+        return this.http.get(`${this.storeBuilderApiUrl}/lookPlanoCollection/comboOptions`, { params: { clientId } });
+    }
     createLookPlanoCollection(data) {
         return this.http.post(`${this.storeBuilderApiUrl}/lookPlanoCollection/createCollection`, data);
     }
@@ -23246,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([
             {
@@ -24468,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([
             {
@@ -52292,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();
@@ -67815,6 +67833,8 @@ class StoreExportsComponent {
     storeOptions = [];
     initialStores = [];
     selectedStores = [];
+    selectedRevisionStores = [];
+    revisionName = '';
     starting = null;
     activeJob = null;
     busyInfo = null;
@@ -67827,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) => {
@@ -67851,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');
     }
@@ -67880,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;
@@ -67906,7 +67949,7 @@ class StoreExportsComponent {
                     kind,
                     status: 'running',
                     startedAt: new Date().toISOString(),
-                    storeCount: storeName.length,
+                    storeCount: totalStores,
                 };
                 this.startPolling(jobId);
             },
@@ -68000,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 {
@@ -68791,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;
@@ -68806,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;
@@ -68824,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([
@@ -68834,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() {
@@ -68917,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 class=\"btn btn-sm btn-light me-2\" (click)=\"edit(item)\">Edit</button>\r\n                <button class=\"btn btn-sm btn-light me-2\" (click)=\"duplicate(item)\">Duplicate</button>\r\n                <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 .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 class=\"btn btn-sm btn-light me-2\" (click)=\"edit(item)\">Edit</button>\r\n                <button class=\"btn btn-sm btn-light me-2\" (click)=\"duplicate(item)\">Duplicate</button>\r\n                <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 .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 {
@@ -69292,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;
@@ -69303,6 +69372,20 @@ class LookPlanoCollectionFormComponent {
         { id: 'eurocenter', name: 'Floor' },
     ];
     fixtureLibraryItems = [];
+    // MBQ bucket / Brand / Fixture Header dropdown options, seeded from the
+    // sheet into planostaticdatas (type='lookComboOptions'). The form fields
+    // are searchable selects so the user picks a known value rather than typing.
+    // All three are flat lists of every distinct value present in the sheet —
+    // they are NOT cross-filtered, so e.g. the Brand dropdown always offers all
+    // brands regardless of which MBQ bucket the look uses.
+    mbqBucketItems = [];
+    brandItems = [];
+    fixtureHeaderItems = [];
+    // Raw payload from the comboOptions endpoint, kept so we can rebuild the
+    // option lists by merging it with the values already present on the loaded
+    // collection (so the dropdowns are never empty even if the endpoint is
+    // unavailable or hasn't loaded yet).
+    comboRaw = { mbqBuckets: [], brands: [], fixtureHeaders: [], combinations: [] };
     // Dropdowns inside placement rows.
     vmTypeOptions = [];
     vmArtworkOptions = [];
@@ -69754,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.
@@ -69782,6 +69869,7 @@ class LookPlanoCollectionFormComponent {
             if (this.clientId) {
                 this.loadFixtureLibraries();
                 this.loadPlacementDropdownData();
+                this.loadComboOptions();
             }
         });
         this.route.params.pipe(takeUntil(this.destroy$)).subscribe(async (params) => {
@@ -69802,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([
@@ -69809,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() {
@@ -70076,6 +70177,85 @@ class LookPlanoCollectionFormComponent {
             console.log('@@ ~ loadPlacementDropdownData [ERR]:', err);
         }
     }
+    /**
+     * Load the MBQ bucket / Brand / Fixture Header dropdown options seeded into
+     * planostaticdatas from the sheet, then rebuild the flat option lists
+     * (merging in any values already present on the loaded collection).
+     */
+    async loadComboOptions() {
+        if (!this.clientId)
+            return;
+        try {
+            const res = await lastValueFrom(this.builderService.getLookComboOptions(this.clientId));
+            const data = res?.data || {};
+            const toStrArr = (arr) => (Array.isArray(arr) ? arr : [])
+                .map((v) => String(v ?? '').trim())
+                .filter((s) => !!s);
+            this.comboRaw = {
+                mbqBuckets: toStrArr(data.mbqBuckets),
+                brands: toStrArr(data.brands),
+                fixtureHeaders: toStrArr(data.fixtureHeaders),
+                combinations: (Array.isArray(data.combinations) ? data.combinations : [])
+                    .map((c) => ({
+                    mbqBucket: String(c?.mbqBucket ?? '').trim(),
+                    brand: String(c?.brand ?? '').trim(),
+                    fixtureHeader: String(c?.fixtureHeader ?? '').trim(),
+                })),
+            };
+        }
+        catch (err) {
+            // Endpoint missing / not yet deployed — fall back to values derived
+            // from the loaded collection so the dropdowns still work.
+            console.log('@@ ~ loadComboOptions [ERR]:', err);
+        }
+        this.rebuildComboOptions();
+    }
+    /**
+     * Rebuild the MBQ bucket / Brand / Fixture Header option lists (and the
+     * cascading caches) by MERGING the seeded endpoint payload (comboRaw) with
+     * whatever values are already present on the currently-loaded looks. The
+     * merge guarantees the dropdowns are never empty for an existing collection
+     * even when the endpoint hasn't loaded, and that any value already saved on
+     * a look is always selectable.
+     */
+    rebuildComboOptions() {
+        const buckets = new Set(this.comboRaw.mbqBuckets);
+        const brands = new Set(this.comboRaw.brands);
+        const headers = new Set(this.comboRaw.fixtureHeaders);
+        // Seed combinations also feed the flat per-field lists.
+        for (const c of this.comboRaw.combinations) {
+            if (c.mbqBucket)
+                buckets.add(c.mbqBucket);
+            if (c.brand)
+                brands.add(c.brand);
+            if (c.fixtureHeader)
+                headers.add(c.fixtureHeader);
+        }
+        // Merge in values already present on the loaded looks/slots so the
+        // dropdowns work even when the endpoint hasn't loaded.
+        for (const lookCtrl of this.looks.controls) {
+            const look = lookCtrl;
+            const bucket = String(look.get('mbqBucket')?.value ?? '').trim()
+                || String(look.get('brandCategory')?.value ?? '').trim();
+            if (bucket)
+                buckets.add(bucket);
+            const slots = look.get('fixtureSlots');
+            for (const slotCtrl of slots?.controls || []) {
+                const slot = slotCtrl;
+                const brand = String(slot.get('brand')?.value ?? '').trim();
+                const header = String(slot.get('fixtureLevelZone')?.value ?? '').trim();
+                if (brand)
+                    brands.add(brand);
+                if (header)
+                    headers.add(header);
+            }
+        }
+        const toItems = (set) => [...set].filter((s) => !!s).sort().map((s) => ({ value: s, label: s }));
+        this.mbqBucketItems = toItems(buckets);
+        this.brandItems = toItems(brands);
+        this.fixtureHeaderItems = toItems(headers);
+        console.log('[Looks form] combo options:', this.mbqBucketItems.length, 'buckets,', this.brandItems.length, 'brands,', this.fixtureHeaderItems.length, 'headers');
+    }
     async loadFixtureLibraries() {
         if (!this.clientId)
             return;
@@ -70144,9 +70324,33 @@ class LookPlanoCollectionFormComponent {
             return;
         }
         this.recomputeFixtureLibraryItemsForSlot();
+        // Re-filter the Fixture Templates list when the Fixture Type changes, and
+        // RESET the current template selections: wall (shelf) and floor
+        // (eurocenter) library sets are disjoint, so anything selected for the old
+        // type is invalid for the new one. Clearing fixtureLibraryRefs cascades —
+        // the refsSub below clears the embedded preview, and we drop the stale
+        // per-library snapshots too.
+        let prevSlotType = String(slot.get('slotType')?.value ?? '');
         const typeSub = slot.get('slotType')?.valueChanges
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.recomputeFixtureLibraryItemsForSlot());
+            .subscribe((nextType) => {
+            const changed = String(nextType ?? '') !== prevSlotType;
+            prevSlotType = String(nextType ?? '');
+            this.recomputeFixtureLibraryItemsForSlot();
+            if (!changed)
+                return;
+            const refsCtrl = slot.get('fixtureLibraryRefs');
+            if (refsCtrl && (refsCtrl.value || []).length) {
+                refsCtrl.setValue([]); // triggers refsSub -> clears active preview
+            }
+            const snapsCtrl = slot.get('librarySnapshots');
+            if (snapsCtrl && (snapsCtrl.value || []).length) {
+                snapsCtrl.setValue([], { emitEvent: false });
+            }
+            // Defensive: clear the legacy single-ref fields if they were set.
+            slot.get('fixtureLibraryRef')?.setValue('', { emitEvent: false });
+            slot.get('fixtureLibraryLabel')?.setValue('', { emitEvent: false });
+        });
         if (typeSub)
             this.slotSubs.push(typeSub);
         // Track previous refs so we can detect *new* additions and auto-apply
@@ -70316,6 +70520,9 @@ class LookPlanoCollectionFormComponent {
                 this.resetLibraryMap();
                 this.bindActiveSlotListeners();
                 this.autoSelectFirstLibrary();
+                // Merge this collection's own values into the dropdown options so they
+                // show even if the comboOptions endpoint is unavailable.
+                this.rebuildComboOptions();
             }
         }
         catch (err) {
@@ -70343,6 +70550,22 @@ class LookPlanoCollectionFormComponent {
             this.selectedLookIndex -= 1;
         }
     }
+    /**
+     * Clone the look at `index` (deep copy of its full nested value — slots,
+     * placements, cadHeaderVariants, librarySnapshots) and insert it right
+     * after the original, then select the copy. createLookGroup rebuilds the
+     * whole FormGroup tree from the JSON seed, so the clone shares no control
+     * references with the source.
+     */
+    duplicateLook(index) {
+        const src = this.looks.at(index);
+        if (!src)
+            return;
+        const seed = JSON.parse(JSON.stringify(src.getRawValue()));
+        const clone = this.createLookGroup(seed);
+        this.looks.insert(index + 1, clone);
+        this.selectLook(index + 1);
+    }
     selectLook(index) {
         this.selectedLookIndex = index;
         const slots = this.fixtureSlots(index);
@@ -70564,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            <button type=\"button\" class=\"btn btn-sm btn-light-danger ms-2\" (click)=\"$event.stopPropagation(); removeLook(i)\">\u00D7</button>\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              <input type=\"text\" class=\"form-control form-control-sm\" formControlName=\"mbqBucket\" placeholder=\"e.g. JJ / OD Eye\" />\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              <input type=\"text\" class=\"form-control form-control-sm\" formControlName=\"brand\" placeholder=\"John Jacobs\" />\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Header</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" formControlName=\"fixtureLevelZone\" placeholder=\"Premium Trending\" />\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 .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            <button type=\"button\" class=\"btn btn-sm btn-light-danger ms-2\" (click)=\"$event.stopPropagation(); removeLook(i)\">\u00D7</button>\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              <input type=\"text\" class=\"form-control form-control-sm\" formControlName=\"mbqBucket\" placeholder=\"e.g. JJ / OD Eye\" />\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              <input type=\"text\" class=\"form-control form-control-sm\" formControlName=\"brand\" placeholder=\"John Jacobs\" />\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Header</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" formControlName=\"fixtureLevelZone\" placeholder=\"Premium Trending\" />\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 .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 = [