tango-app-ui-store-builder 1.0.78 → 1.0.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/fixture-preview/fixture-preview.component.mjs +342 -6
- package/esm2022/lib/components/manage-store-plano/manage-store-plano.component.mjs +15 -8
- package/esm2022/lib/components/onboard-store-plano/onboard-fixture/onboard-fixture.component.mjs +3 -4
- package/esm2022/lib/components/onboard-store-plano/onboard-store-plano.component.mjs +3 -3
- package/esm2022/lib/components/planogram/plano-analytics/analytics-popup/analytics-popup.component.mjs +3 -2
- package/esm2022/lib/components/planogram/plano-analytics/fixture-analytics/fixture-analytics.component.mjs +80 -10
- package/esm2022/lib/components/planogram/plano-analytics/plano-analytics.component.mjs +48 -5
- package/esm2022/lib/components/planogram/plano-analytics/zone-analytics/zone-analytics.component.mjs +3 -3
- package/esm2022/lib/data/fixture-template.data.mjs +62 -34
- package/esm2022/lib/tango-store-builder.module.mjs +6 -3
- package/fesm2022/tango-app-ui-store-builder.mjs +546 -66
- package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
- package/lib/components/fixture-preview/fixture-preview.component.d.ts +41 -2
- package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +1 -1
- package/lib/components/manage-store-plano/manage-store-plano.component.d.ts +1 -0
- package/lib/components/planogram/plano-analytics/fixture-analytics/fixture-analytics.component.d.ts +9 -0
- package/lib/components/planogram/plano-analytics/plano-analytics.component.d.ts +6 -1
- package/lib/tango-store-builder.module.d.ts +2 -1
- package/package.json +1 -1
|
@@ -7837,46 +7837,74 @@ const SHELF_COLORS = [
|
|
|
7837
7837
|
{ text: "#D97706", textBg: "#FFF7ED", bg: "#FDBA74", border: "#FB923C" },
|
|
7838
7838
|
];
|
|
7839
7839
|
const FOOTFALL_HEATMAP_COLORS = [
|
|
7840
|
-
{ bg: "#
|
|
7841
|
-
{ bg: "#
|
|
7842
|
-
{ bg: "#
|
|
7843
|
-
{ bg: "#
|
|
7844
|
-
{ bg: "#
|
|
7845
|
-
{ bg: "#
|
|
7846
|
-
{ bg: "#
|
|
7847
|
-
{ bg: "#
|
|
7848
|
-
{ bg: "#
|
|
7849
|
-
{ bg: "#
|
|
7850
|
-
{ bg: "#
|
|
7851
|
-
{ bg: "#
|
|
7852
|
-
{ bg: "#
|
|
7853
|
-
{ bg: "#
|
|
7854
|
-
{ bg: "#
|
|
7855
|
-
{ bg: "#
|
|
7856
|
-
{ bg: "#
|
|
7857
|
-
{ bg: "#
|
|
7858
|
-
{ bg: "#
|
|
7859
|
-
{ bg: "#
|
|
7860
|
-
{ bg: "#
|
|
7861
|
-
{ bg: "#
|
|
7862
|
-
{ bg: "#
|
|
7863
|
-
{ bg: "#
|
|
7840
|
+
{ bg: "#FCA5A5", border: "#EF4444" },
|
|
7841
|
+
{ bg: "#FDA4AF", border: "#F43F5E" },
|
|
7842
|
+
{ bg: "#FECACA", border: "#F87171" },
|
|
7843
|
+
{ bg: "#FECDD3", border: "#FB7185" },
|
|
7844
|
+
{ bg: "#FECDD3", border: "#E8798F" },
|
|
7845
|
+
{ bg: "#FBCFE8", border: "#EC4899" },
|
|
7846
|
+
{ bg: "#FEE2E2", border: "#FCA5A5" },
|
|
7847
|
+
{ bg: "#FFE4E6", border: "#FDA4AF" },
|
|
7848
|
+
{ bg: "#93C5FD", border: "#3B82F6" },
|
|
7849
|
+
{ bg: "#7DD3FC", border: "#0EA5E9" },
|
|
7850
|
+
{ bg: "#A5B4FC", border: "#6366F1" },
|
|
7851
|
+
{ bg: "#BFDBFE", border: "#60A5FA" },
|
|
7852
|
+
{ bg: "#BAE6FD", border: "#38BDF8" },
|
|
7853
|
+
{ bg: "#C7D2FE", border: "#818CF8" },
|
|
7854
|
+
{ bg: "#DBEAFE", border: "#93C5FD" },
|
|
7855
|
+
{ bg: "#E0E7FF", border: "#A5B4FC" },
|
|
7856
|
+
{ bg: "#86EFAC", border: "#22C55E" },
|
|
7857
|
+
{ bg: "#6EE7B7", border: "#10B981" },
|
|
7858
|
+
{ bg: "#BEF264", border: "#84CC16" },
|
|
7859
|
+
{ bg: "#BBF7D0", border: "#4ADE80" },
|
|
7860
|
+
{ bg: "#A7F3D0", border: "#34D399" },
|
|
7861
|
+
{ bg: "#D9F99D", border: "#A3E635" },
|
|
7862
|
+
{ bg: "#DCFCE7", border: "#86EFAC" },
|
|
7863
|
+
{ bg: "#D1FAE5", border: "#6EE7B7" },
|
|
7864
|
+
];
|
|
7865
|
+
const PICKUP_HEATMAP_COLORS = [
|
|
7866
|
+
{ bg: "#FCA5A5", border: "#EF4444" },
|
|
7867
|
+
{ bg: "#FECACA", border: "#F87171" },
|
|
7868
|
+
{ bg: "#93C5FD", border: "#3B82F6" },
|
|
7869
|
+
{ bg: "#BAE6FD", border: "#38BDF8" },
|
|
7870
|
+
{ bg: "#86EFAC", border: "#22C55E" },
|
|
7871
|
+
{ bg: "#BBF7D0", border: "#4ADE80" },
|
|
7864
7872
|
];
|
|
7865
7873
|
// export const PICKUP_HEATMAP_COLORS = [
|
|
7866
7874
|
// { bg: "#FCD6DA", border: "#E7D0D2" },
|
|
7875
|
+
// { bg: "#FDEEDA", border: "#EDE6DC" },
|
|
7876
|
+
// { bg: "#FCFFD5", border: "#E9EDCF" },
|
|
7877
|
+
// { bg: "#D8E4FF", border: "#CED7EC" },
|
|
7878
|
+
// { bg: "#E9FBFF", border: "#DFECEF" },
|
|
7879
|
+
// { bg: "#e0f0ff", border: "#d7ecff" },
|
|
7880
|
+
// { bg: "#f4ffe0", border: "#efffd0" },
|
|
7881
|
+
// ];
|
|
7882
|
+
// export const FOOTFALL_HEATMAP_COLORS = [
|
|
7883
|
+
// { bg: "#FCD6DA", border: "#E7D0D2" },
|
|
7867
7884
|
// { bg: "#FEDED4", border: "#E1D0CB" },
|
|
7868
7885
|
// { bg: "#F5DFD0", border: "#DFD2CA" },
|
|
7869
7886
|
// { bg: "#FDEAD3", border: "#EBE2D8" },
|
|
7887
|
+
// { bg: "#FDEEDA", border: "#EDE6DC" },
|
|
7888
|
+
// { bg: "#FDEED8", border: "#EBE3D8" },
|
|
7889
|
+
// { bg: "#FEF7D4", border: "#EFECDC" },
|
|
7890
|
+
// { bg: "#FEFBD6", border: "#EFEED6" },
|
|
7891
|
+
// { bg: "#FCFFD5", border: "#EBEDD6" },
|
|
7892
|
+
// { bg: "#F9FFC9", border: "#E9EDCF" },
|
|
7893
|
+
// { bg: "#E9FBFF", border: "#DFECEF" },
|
|
7894
|
+
// { bg: "#DAF9FF", border: "#D1E8EC" },
|
|
7895
|
+
// { bg: "#D9EDFF", border: "#D7E2EC" },
|
|
7896
|
+
// { bg: "#D8E4FF", border: "#CED7EC" },
|
|
7897
|
+
// { bg: "#D8DBFD", border: "#C5C8E6" },
|
|
7898
|
+
// { bg: "#E0D9FF", border: "#D8D2EF" },
|
|
7899
|
+
// { bg: "#DAD0FF", border: "#CEC7E9" },
|
|
7900
|
+
// { bg: "#E9D7FE", border: "#DFD2EF" },
|
|
7901
|
+
// { bg: "#FBE8FF", border: "#F2E4F4" },
|
|
7902
|
+
// { bg: "#FAE2FF", border: "#EED8F2" },
|
|
7903
|
+
// { bg: "#E2E6EB", border: "#DBE0E6" },
|
|
7904
|
+
// { bg: "#EBEDEF", border: "#E2E6EB" },
|
|
7905
|
+
// { bg: "#F0F2F4", border: "#EBEDEF" },
|
|
7906
|
+
// { bg: "#FDFDFD", border: "#E0E0E0" },
|
|
7870
7907
|
// ];
|
|
7871
|
-
const PICKUP_HEATMAP_COLORS = [
|
|
7872
|
-
{ bg: "#FCD6DA", border: "#E7D0D2" },
|
|
7873
|
-
{ bg: "#FDEEDA", border: "#EDE6DC" },
|
|
7874
|
-
{ bg: "#FCFFD5", border: "#E9EDCF" },
|
|
7875
|
-
{ bg: "#D8E4FF", border: "#CED7EC" },
|
|
7876
|
-
{ bg: "#E9FBFF", border: "#DFECEF" },
|
|
7877
|
-
{ bg: "#F0F2F4", border: "#EBEDEF" },
|
|
7878
|
-
{ bg: "#FDFDFD", border: "#E0E0E0" },
|
|
7879
|
-
];
|
|
7880
7908
|
|
|
7881
7909
|
class MultiselectChipDropdownComponent {
|
|
7882
7910
|
elementRef;
|
|
@@ -13085,7 +13113,7 @@ class ManageStorePlanoComponent {
|
|
|
13085
13113
|
];
|
|
13086
13114
|
floorData?.layoutPolygon?.forEach((lp) => {
|
|
13087
13115
|
this.wallCount += lp.fixtures.length;
|
|
13088
|
-
this.clCount += lp.fixtures.filter((ele) => ele.header.label ==
|
|
13116
|
+
this.clCount += lp.fixtures.filter((ele) => ele.header.label == "CL")?.length;
|
|
13089
13117
|
extractedFixture.push(...(lp.fixtures ?? []));
|
|
13090
13118
|
});
|
|
13091
13119
|
this.allFixtures = extractedFixture;
|
|
@@ -14321,11 +14349,11 @@ class ManageStorePlanoComponent {
|
|
|
14321
14349
|
if (this.selectedFixture.fixtureType === "wall") {
|
|
14322
14350
|
const wall = this.floorData.layoutPolygon.find((wall) => wall.elementNumber === this.selectedFixture.wallIndex);
|
|
14323
14351
|
const fixture = wall.fixtures.find((fixture) => fixture._id === this.selectedFixture.fixtureId);
|
|
14324
|
-
this.selectedFixtureData = fixture;
|
|
14352
|
+
this.selectedFixtureData = structuredClone(fixture);
|
|
14325
14353
|
}
|
|
14326
14354
|
else if (this.selectedFixture.fixtureType === "floor") {
|
|
14327
14355
|
const fixture = this.floorData.centerFixture.find((fixture) => fixture._id === this.selectedFixture.fixtureId);
|
|
14328
|
-
this.selectedFixtureData = fixture;
|
|
14356
|
+
this.selectedFixtureData = structuredClone(fixture);
|
|
14329
14357
|
}
|
|
14330
14358
|
delete this?.selectedFixtureData?.taskType;
|
|
14331
14359
|
this.selectedFixture.fixtureData = this.selectedFixtureData;
|
|
@@ -14383,6 +14411,7 @@ class ManageStorePlanoComponent {
|
|
|
14383
14411
|
}
|
|
14384
14412
|
this.highlightFixture(target);
|
|
14385
14413
|
this.selectFixtureOnCanvasClick(target, true);
|
|
14414
|
+
this.selectedFixture.fixtureData = fixtureData;
|
|
14386
14415
|
});
|
|
14387
14416
|
fixtureGroup.fixtureType = fixtureData.fixtureType;
|
|
14388
14417
|
fixtureGroup.wallIndex = fixtureData.associatedElementNumber;
|
|
@@ -14700,12 +14729,13 @@ class ManageStorePlanoComponent {
|
|
|
14700
14729
|
}
|
|
14701
14730
|
selectFixtureFeedback(fixtureId, collapseTaskInfo = false) {
|
|
14702
14731
|
const currentFixtureFeedback = this.storeFeedback.fixtureData.find((fb) => fb.fixtureId === fixtureId);
|
|
14732
|
+
const rawFixture = structuredClone(this.allFixtureInstances.find((fi) => fi._id === fixtureId));
|
|
14703
14733
|
if (currentFixtureFeedback) {
|
|
14704
14734
|
this.selectedFixtureFeedback = {
|
|
14705
14735
|
globalComments: this.storeFeedback.fixtureComment,
|
|
14706
14736
|
fixtureFeedback: {
|
|
14707
14737
|
...currentFixtureFeedback,
|
|
14708
|
-
FixtureData:
|
|
14738
|
+
FixtureData: rawFixture,
|
|
14709
14739
|
},
|
|
14710
14740
|
taskInfoToggle: collapseTaskInfo,
|
|
14711
14741
|
};
|
|
@@ -14715,7 +14745,7 @@ class ManageStorePlanoComponent {
|
|
|
14715
14745
|
globalComments: [],
|
|
14716
14746
|
fixtureFeedback: {
|
|
14717
14747
|
fixtureId: fixtureId,
|
|
14718
|
-
FixtureData:
|
|
14748
|
+
FixtureData: rawFixture,
|
|
14719
14749
|
fixtureAIData: null,
|
|
14720
14750
|
},
|
|
14721
14751
|
taskInfoToggle: collapseTaskInfo,
|
|
@@ -14764,6 +14794,11 @@ class ManageStorePlanoComponent {
|
|
|
14764
14794
|
get getEntrances() {
|
|
14765
14795
|
return this.floorData?.layoutPolygon?.filter((ele) => ele.elementType === "entrance");
|
|
14766
14796
|
}
|
|
14797
|
+
get showFixturePreview() {
|
|
14798
|
+
return (this.publishingState === "fixture" &&
|
|
14799
|
+
!this.disabledPublish &&
|
|
14800
|
+
!this.editFixture);
|
|
14801
|
+
}
|
|
14767
14802
|
getWallOtherElements(wallIndex) {
|
|
14768
14803
|
return this.layoutForm.get("walls")
|
|
14769
14804
|
.at(wallIndex)
|
|
@@ -16422,11 +16457,11 @@ class ManageStorePlanoComponent {
|
|
|
16422
16457
|
this.destroy$.complete();
|
|
16423
16458
|
}
|
|
16424
16459
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
16425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n \r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i> \r\n <i class=\"bi bi-arrow-down\" *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n \r\n <hr>\r\n \r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\" [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">{{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}</div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
16460
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n } -->\r\n\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n \r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i> \r\n <i class=\"bi bi-arrow-down\" *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n \r\n <hr>\r\n \r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\" [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">{{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}</div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
16426
16461
|
}
|
|
16427
16462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, decorators: [{
|
|
16428
16463
|
type: Component,
|
|
16429
|
-
args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n \r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i> \r\n <i class=\"bi bi-arrow-down\" *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n \r\n <hr>\r\n \r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\" [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">{{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}</div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"] }]
|
|
16464
|
+
args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- @if(showFixturePreview && !isRightPanelCollapsed){\r\n <fixture-preview [fixtureData]=\"selectedFixture?.fixtureData\"></fixture-preview>\r\n } -->\r\n\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n \r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i> \r\n <i class=\"bi bi-arrow-down\" *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n \r\n <hr>\r\n \r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\" [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">{{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}</div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"] }]
|
|
16430
16465
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
|
|
16431
16466
|
type: ViewChild,
|
|
16432
16467
|
args: ["baseCanvas"]
|
|
@@ -43681,10 +43716,11 @@ class AnalyticsPopupComponent {
|
|
|
43681
43716
|
}
|
|
43682
43717
|
}
|
|
43683
43718
|
onClickRow(item) {
|
|
43719
|
+
console.log("@@ ~ item:", item);
|
|
43684
43720
|
if (!this.selectable)
|
|
43685
43721
|
return;
|
|
43686
43722
|
if (this.type == "footfall") {
|
|
43687
|
-
this.activeModal.close({ fixtureId: item.fixtureDetails?._id });
|
|
43723
|
+
this.activeModal.close({ fixtureId: item.fixtureDetails?._id, shelfNumber: item.shelfNumber });
|
|
43688
43724
|
}
|
|
43689
43725
|
else {
|
|
43690
43726
|
this.activeModal.close(item);
|
|
@@ -43823,11 +43859,11 @@ class ZoneAnalyticsComponent {
|
|
|
43823
43859
|
.catch((err) => console.error("Failed to copy:", err));
|
|
43824
43860
|
}
|
|
43825
43861
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneAnalyticsComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
43826
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ZoneAnalyticsComponent, selector: "zone-analytics", inputs: { zoneData: "zoneData", level: "level", selectedProduct: "selectedProduct" }, ngImport: i0, template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n <div class=\"d-flex justify-content-between mb-4\">\r\n <h3 class=\"title\">{{zoneData.zone}}</h3>\r\n\r\n <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n @if(selectedProduct){\r\n <div class=\"hero-card\">\r\n <div class=\"hero-img\">\r\n <img *ngIf=\"selectedProduct?.imageUrl; else placeholder\" [src]=\"selectedProduct?.imageUrl\"\r\n alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"hero-details\">\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Brand</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.productBrandName ?? 'NA'}}</p>\r\n </div>\r\n\r\n @if(selectedProduct?.status !== 'missing'){\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Category</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.Brandname}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">SKU</p>\r\n <span> : </span>\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <p class=\"details\">{{selectedProduct?.idText}}</p>\r\n <svg (click)=\"copySKU(selectedProduct?.idText)\" class=\"cursor-pointer\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5307_114007)\">\r\n <path\r\n d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5307_114007\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Pickup Count</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.count}}</p>\r\n </div>\r\n }\r\n\r\n </div>\r\n <div>\r\n <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n <div class=\"zone-details my-2\" [style.background]=\"zoneData?.heatmap?.bg\"\r\n [style.border-color]=\"zoneData?.heatmap?.border\">\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"zone-info\">\r\n <span class=\"badge draft mb-3\">\r\n {{ zoneData.zone }}\r\n </span>\r\n <h1>{{allBrands}}</h1>\r\n <h4>Capacity {{zoneCapacity}}</h4>\r\n </div>\r\n <div class=\"shelves\">\r\n <ng-container *ngFor=\"let s of zoneData.shelves; let i = index\">\r\n @if(s.shelfType ==='tray'){\r\n <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #d9d9d9;padding:6px;border-radius:4px;min-width:96px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product .glass-placeholder,#zone-product-details .zone-details .shelves .shelf .product .glass-placeholder{height:100%;width:100%;object-fit:cover;opacity:.6}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details h6{font-weight:600;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:400;font-style:Regular;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}h3{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\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"] }] });
|
|
43862
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ZoneAnalyticsComponent, selector: "zone-analytics", inputs: { zoneData: "zoneData", level: "level", selectedProduct: "selectedProduct" }, ngImport: i0, template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n <div class=\"d-flex justify-content-between mb-4\">\r\n <h3 class=\"title\">{{zoneData.zone}}</h3>\r\n\r\n <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n @if(selectedProduct){\r\n <div class=\"hero-card\">\r\n <div class=\"hero-img\">\r\n <img *ngIf=\"selectedProduct?.imageUrl; else placeholder\" [src]=\"selectedProduct?.imageUrl\"\r\n alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"hero-details\">\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Brand</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.productBrandName ?? 'NA'}}</p>\r\n </div>\r\n\r\n @if(selectedProduct?.status !== 'missing'){\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Category</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.Brandname}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">SKU</p>\r\n <span> : </span>\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <p class=\"details\">{{selectedProduct?.idText}}</p>\r\n <svg (click)=\"copySKU(selectedProduct?.idText)\" class=\"cursor-pointer\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5307_114007)\">\r\n <path\r\n d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5307_114007\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Pickup Count</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.count}}</p>\r\n </div>\r\n }\r\n\r\n </div>\r\n <div>\r\n <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n <div class=\"zone-details my-2\">\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"zone-info\">\r\n <span class=\"badge draft mb-3\">\r\n {{ zoneData.zone }}\r\n </span>\r\n <h1>{{allBrands}}</h1>\r\n <h4>Capacity {{zoneCapacity}}</h4>\r\n </div>\r\n <div class=\"shelves\">\r\n <ng-container *ngFor=\"let s of zoneData.shelves; let i = index\">\r\n\r\n @if(s.shelfType ==='tray'){\r\n <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n @if(s.products.length){\r\n <div *ngFor=\"let row of s.distributedRows\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of row\" class=\"product\" [ngClass]=\"p?.engagement\">\r\n @if(p.status != 'missing'){\r\n <div class=\"product-img\">\r\n <img *ngIf=\"p?.productImageUrl; else placeholder\"\r\n [src]=\"p?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n </div>\r\n <div class=\"product-details\">\r\n <span class=\"badge cluster\">\r\n {{ p.productId }}\r\n </span>\r\n <!-- <h6 class=\"ms-1\">{{p.productName}}</h6> -->\r\n <!-- <p class=\"ms-1\">{{p.productType}}</p> -->\r\n <h6 class=\"ms-1\">{{p?.productBrand}}</h6>\r\n <p class=\"ms-1\">{{p?.brandName}}</p>\r\n </div>\r\n }@else {\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n }@else{\r\n <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n }@else {\r\n <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n @if(s.products.length){\r\n <div *ngFor=\"let p of s.products\" class=\"product\">\r\n @if(p.status != 'missing'){\r\n <div class=\"product-img\">\r\n <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n </div>\r\n <div class=\"product-details\">\r\n <span class=\"badge cluster\">\r\n {{ p.productId }}\r\n </span>\r\n <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n <p class=\"ms-1\">{{p.productType}}</p>\r\n </div>\r\n }@else {\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n }@else {\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- @if(s.shelfType ==='tray'){\r\n <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n } -->\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #d9d9d9;padding:6px;border-radius:4px;width:110px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product .glass-placeholder,#zone-product-details .zone-details .shelves .shelf .product .glass-placeholder{height:100%;width:100%;object-fit:cover;opacity:.6}#zone-product-details .zone-details .shelves .tray .product.top,#zone-product-details .zone-details .shelves .shelf .product.top{border:2px solid #ffa8a8;background-color:#ffdcdc}#zone-product-details .zone-details .shelves .tray .product.least,#zone-product-details .zone-details .shelves .shelf .product.least{border:2px solid #ffbd6f;background-color:#fff5e9}#zone-product-details .zone-details .shelves .tray .product.non,#zone-product-details .zone-details .shelves .shelf .product.non{border:2px solid #d9d9d9;background-color:#f8f8f8}#zone-product-details .zone-details .shelves .tray .product .product-img,#zone-product-details .zone-details .shelves .shelf .product .product-img{width:80px;height:40px;border:1.23px solid rgb(234,236,240);margin-bottom:8px;box-shadow:0 1.23px 2.47px #1018280d;border-radius:4px}#zone-product-details .zone-details .shelves .tray .product .product-img img,#zone-product-details .zone-details .shelves .shelf .product .product-img img{border-radius:4px;height:100%;width:100%;object-fit:cover}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details h6{font-weight:600;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:400;font-style:Regular;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}h3{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\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"] }] });
|
|
43827
43863
|
}
|
|
43828
43864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneAnalyticsComponent, decorators: [{
|
|
43829
43865
|
type: Component,
|
|
43830
|
-
args: [{ selector: "zone-analytics", template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n <div class=\"d-flex justify-content-between mb-4\">\r\n <h3 class=\"title\">{{zoneData.zone}}</h3>\r\n\r\n <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n @if(selectedProduct){\r\n <div class=\"hero-card\">\r\n <div class=\"hero-img\">\r\n <img *ngIf=\"selectedProduct?.imageUrl; else placeholder\" [src]=\"selectedProduct?.imageUrl\"\r\n alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"hero-details\">\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Brand</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.productBrandName ?? 'NA'}}</p>\r\n </div>\r\n\r\n @if(selectedProduct?.status !== 'missing'){\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Category</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.Brandname}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">SKU</p>\r\n <span> : </span>\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <p class=\"details\">{{selectedProduct?.idText}}</p>\r\n <svg (click)=\"copySKU(selectedProduct?.idText)\" class=\"cursor-pointer\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5307_114007)\">\r\n <path\r\n d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5307_114007\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Pickup Count</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.count}}</p>\r\n </div>\r\n }\r\n\r\n </div>\r\n <div>\r\n <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n <div class=\"zone-details my-2\" [style.background]=\"zoneData?.heatmap?.bg\"\r\n [style.border-color]=\"zoneData?.heatmap?.border\">\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"zone-info\">\r\n <span class=\"badge draft mb-3\">\r\n {{ zoneData.zone }}\r\n </span>\r\n <h1>{{allBrands}}</h1>\r\n <h4>Capacity {{zoneCapacity}}</h4>\r\n </div>\r\n <div class=\"shelves\">\r\n <ng-container *ngFor=\"let s of zoneData.shelves; let i = index\">\r\n @if(s.shelfType ==='tray'){\r\n <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #d9d9d9;padding:6px;border-radius:4px;min-width:96px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product .glass-placeholder,#zone-product-details .zone-details .shelves .shelf .product .glass-placeholder{height:100%;width:100%;object-fit:cover;opacity:.6}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details h6{font-weight:600;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:400;font-style:Regular;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}h3{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\n"] }]
|
|
43866
|
+
args: [{ selector: "zone-analytics", template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n <div class=\"d-flex justify-content-between mb-4\">\r\n <h3 class=\"title\">{{zoneData.zone}}</h3>\r\n\r\n <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n @if(selectedProduct){\r\n <div class=\"hero-card\">\r\n <div class=\"hero-img\">\r\n <img *ngIf=\"selectedProduct?.imageUrl; else placeholder\" [src]=\"selectedProduct?.imageUrl\"\r\n alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"hero-details\">\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Brand</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.productBrandName ?? 'NA'}}</p>\r\n </div>\r\n\r\n @if(selectedProduct?.status !== 'missing'){\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Category</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.Brandname}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">SKU</p>\r\n <span> : </span>\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <p class=\"details\">{{selectedProduct?.idText}}</p>\r\n <svg (click)=\"copySKU(selectedProduct?.idText)\" class=\"cursor-pointer\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5307_114007)\">\r\n <path\r\n d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5307_114007\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n <p class=\"heading\">Pickup Count</p>\r\n <span> : </span>\r\n <p class=\"details\">{{selectedProduct?.count}}</p>\r\n </div>\r\n }\r\n\r\n </div>\r\n <div>\r\n <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n <div class=\"zone-details my-2\">\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"zone-info\">\r\n <span class=\"badge draft mb-3\">\r\n {{ zoneData.zone }}\r\n </span>\r\n <h1>{{allBrands}}</h1>\r\n <h4>Capacity {{zoneCapacity}}</h4>\r\n </div>\r\n <div class=\"shelves\">\r\n <ng-container *ngFor=\"let s of zoneData.shelves; let i = index\">\r\n\r\n @if(s.shelfType ==='tray'){\r\n <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n @if(s.products.length){\r\n <div *ngFor=\"let row of s.distributedRows\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of row\" class=\"product\" [ngClass]=\"p?.engagement\">\r\n @if(p.status != 'missing'){\r\n <div class=\"product-img\">\r\n <img *ngIf=\"p?.productImageUrl; else placeholder\"\r\n [src]=\"p?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n </div>\r\n <div class=\"product-details\">\r\n <span class=\"badge cluster\">\r\n {{ p.productId }}\r\n </span>\r\n <!-- <h6 class=\"ms-1\">{{p.productName}}</h6> -->\r\n <!-- <p class=\"ms-1\">{{p.productType}}</p> -->\r\n <h6 class=\"ms-1\">{{p?.productBrand}}</h6>\r\n <p class=\"ms-1\">{{p?.brandName}}</p>\r\n </div>\r\n }@else {\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n }@else{\r\n <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n }@else {\r\n <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n @if(s.products.length){\r\n <div *ngFor=\"let p of s.products\" class=\"product\">\r\n @if(p.status != 'missing'){\r\n <div class=\"product-img\">\r\n <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n </div>\r\n <div class=\"product-details\">\r\n <span class=\"badge cluster\">\r\n {{ p.productId }}\r\n </span>\r\n <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n <p class=\"ms-1\">{{p.productType}}</p>\r\n </div>\r\n }@else {\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n }@else {\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- @if(s.shelfType ==='tray'){\r\n <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"\r\n [style.background]=\"s?.heatmap?.bg\" [style.border-color]=\"s?.heatmap?.border\">\r\n\r\n <svg class=\"glass-placeholder\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n } -->\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #d9d9d9;padding:6px;border-radius:4px;width:110px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product .glass-placeholder,#zone-product-details .zone-details .shelves .shelf .product .glass-placeholder{height:100%;width:100%;object-fit:cover;opacity:.6}#zone-product-details .zone-details .shelves .tray .product.top,#zone-product-details .zone-details .shelves .shelf .product.top{border:2px solid #ffa8a8;background-color:#ffdcdc}#zone-product-details .zone-details .shelves .tray .product.least,#zone-product-details .zone-details .shelves .shelf .product.least{border:2px solid #ffbd6f;background-color:#fff5e9}#zone-product-details .zone-details .shelves .tray .product.non,#zone-product-details .zone-details .shelves .shelf .product.non{border:2px solid #d9d9d9;background-color:#f8f8f8}#zone-product-details .zone-details .shelves .tray .product .product-img,#zone-product-details .zone-details .shelves .shelf .product .product-img{width:80px;height:40px;border:1.23px solid rgb(234,236,240);margin-bottom:8px;box-shadow:0 1.23px 2.47px #1018280d;border-radius:4px}#zone-product-details .zone-details .shelves .tray .product .product-img img,#zone-product-details .zone-details .shelves .shelf .product .product-img img{border-radius:4px;height:100%;width:100%;object-fit:cover}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details h6{font-weight:600;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:400;font-style:Regular;font-size:8px;line-height:12px;letter-spacing:0%;vertical-align:middle}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}h3{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\n"] }]
|
|
43831
43867
|
}], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: i4.ToastService }], propDecorators: { zoneData: [{
|
|
43832
43868
|
type: Input
|
|
43833
43869
|
}], level: [{
|
|
@@ -43853,6 +43889,13 @@ class FixtureAnalyticsComponent {
|
|
|
43853
43889
|
fixtureTemplateDetails;
|
|
43854
43890
|
clientId;
|
|
43855
43891
|
imgCDN;
|
|
43892
|
+
fixtureEngagement = 0;
|
|
43893
|
+
fixtureRankBadgeColors = {
|
|
43894
|
+
bg: "#E3E8F0",
|
|
43895
|
+
border: "#CBD5E1",
|
|
43896
|
+
innerBg: "#F8F9FC",
|
|
43897
|
+
text: "#475467",
|
|
43898
|
+
};
|
|
43856
43899
|
zoneColor = {
|
|
43857
43900
|
right: {
|
|
43858
43901
|
bg: "#ffffff",
|
|
@@ -43907,16 +43950,24 @@ class FixtureAnalyticsComponent {
|
|
|
43907
43950
|
async ngOnChanges(changes) {
|
|
43908
43951
|
if (changes["fixtureDetails"]?.currentValue) {
|
|
43909
43952
|
this.isPageLoading = true;
|
|
43953
|
+
this.setFixtureRankBadgeColors();
|
|
43910
43954
|
this.allFixtures = [
|
|
43911
43955
|
...this.floorData?.layoutPolygon.flatMap((e) => e.fixtures),
|
|
43912
43956
|
...this.floorData?.centerFixture,
|
|
43913
43957
|
];
|
|
43914
|
-
await Promise.all([
|
|
43958
|
+
await Promise.all([
|
|
43959
|
+
this.getFixtureShelfDetails(changes["fixtureDetails"].currentValue),
|
|
43960
|
+
this.getEngagersList(),
|
|
43961
|
+
this.getFixtureFootfall(),
|
|
43962
|
+
]);
|
|
43915
43963
|
this.processFixtureHeatMapData();
|
|
43916
43964
|
this.isPageLoading = false;
|
|
43917
43965
|
setTimeout(() => {
|
|
43918
43966
|
this.applyShelfColors();
|
|
43919
43967
|
this.handleVmPositionAndSize();
|
|
43968
|
+
if (this.fixtureDetails?.targetProduct) {
|
|
43969
|
+
this.onClickProduct(this.fixtureDetails.targetProduct);
|
|
43970
|
+
}
|
|
43920
43971
|
}, 200);
|
|
43921
43972
|
}
|
|
43922
43973
|
}
|
|
@@ -43928,8 +43979,43 @@ class FixtureAnalyticsComponent {
|
|
|
43928
43979
|
this.isVMInitialized = this.handleVmPositionAndSize();
|
|
43929
43980
|
}
|
|
43930
43981
|
}
|
|
43982
|
+
async getFixtureShelfDetails(data) {
|
|
43983
|
+
let payload = {
|
|
43984
|
+
fixtureId: data?._id,
|
|
43985
|
+
planoId: data?.planoId,
|
|
43986
|
+
floorId: data?.floorId,
|
|
43987
|
+
compliance: true,
|
|
43988
|
+
...(this.fixtureDetails?.revisionId && {
|
|
43989
|
+
revisionId: this.fixtureDetails.revisionId,
|
|
43990
|
+
}),
|
|
43991
|
+
};
|
|
43992
|
+
try {
|
|
43993
|
+
const res = await firstValueFrom(this.storeBuilderService.getShelfDetails(payload));
|
|
43994
|
+
if (res?.status === "success" && res?.data) {
|
|
43995
|
+
this.fixtureTemplateDetails = {
|
|
43996
|
+
...res?.data,
|
|
43997
|
+
shelfConfig: res?.data?.shelves ?? [],
|
|
43998
|
+
};
|
|
43999
|
+
this.fixtureTemplateDetails.shelfConfig =
|
|
44000
|
+
this.fixtureTemplateDetails.shelfConfig.map((s) => {
|
|
44001
|
+
if (s.shelfType !== "shelf" && s.products?.length) {
|
|
44002
|
+
s.distributedRows = this.distributeRoundRobin(s.products, s.trayRows);
|
|
44003
|
+
}
|
|
44004
|
+
return s;
|
|
44005
|
+
});
|
|
44006
|
+
const allProducts = (this.fixtureTemplateDetails?.shelfConfig ?? []).flatMap((s) => s.products ?? []);
|
|
44007
|
+
allProducts.forEach((p, i) => {
|
|
44008
|
+
if (!p?.productId) {
|
|
44009
|
+
p["productId"] = i;
|
|
44010
|
+
}
|
|
44011
|
+
});
|
|
44012
|
+
}
|
|
44013
|
+
}
|
|
44014
|
+
catch (error) {
|
|
44015
|
+
console.log("@@ ~ getFixtureShelfDetails [ERR]:", error);
|
|
44016
|
+
}
|
|
44017
|
+
}
|
|
43931
44018
|
processFixtureHeatMapData() {
|
|
43932
|
-
this.fixtureTemplateDetails = structuredClone(this.fixtureDetails);
|
|
43933
44019
|
const topMaskingPos = 1;
|
|
43934
44020
|
const bottomSlanderPos = this.fixtureTemplateDetails?.shelfConfig?.length ?? 0;
|
|
43935
44021
|
this.fixtureTemplateDetails.vmConfig =
|
|
@@ -43939,9 +44025,26 @@ class FixtureAnalyticsComponent {
|
|
|
43939
44025
|
[topMaskingPos, bottomSlanderPos].includes(vm.startYPosition));
|
|
43940
44026
|
this.shelfGroupedData = this.buildShelfMap();
|
|
43941
44027
|
}
|
|
44028
|
+
setFixtureRankBadgeColors() {
|
|
44029
|
+
const rank = this.fixtureDetails?.footfallRank;
|
|
44030
|
+
const fallbackHeatmap = rank > 0
|
|
44031
|
+
? FOOTFALL_HEATMAP_COLORS[Math.min(rank - 1, FOOTFALL_HEATMAP_COLORS.length - 1)]
|
|
44032
|
+
: {
|
|
44033
|
+
bg: "#E3E8F0",
|
|
44034
|
+
border: "#CBD5E1",
|
|
44035
|
+
};
|
|
44036
|
+
const heatmap = this.fixtureDetails?.heatmapColor ?? fallbackHeatmap;
|
|
44037
|
+
this.fixtureRankBadgeColors = {
|
|
44038
|
+
bg: heatmap?.bg ?? fallbackHeatmap.bg,
|
|
44039
|
+
border: heatmap?.border ?? fallbackHeatmap.border,
|
|
44040
|
+
innerBg: lightenColor(heatmap?.bg ?? fallbackHeatmap.bg, 0.72),
|
|
44041
|
+
text: heatmap?.border ?? fallbackHeatmap.border,
|
|
44042
|
+
};
|
|
44043
|
+
}
|
|
43942
44044
|
buildShelfMap() {
|
|
43943
44045
|
const shelfMap = {};
|
|
43944
|
-
|
|
44046
|
+
["Top Engaged", "Least Engaged", "Non Engaged"].forEach((engagerKey) => {
|
|
44047
|
+
const products = this.engagersList?.[engagerKey] || [];
|
|
43945
44048
|
(products || []).forEach((product) => {
|
|
43946
44049
|
const shelf = product?.shelfNumber || "Unknown";
|
|
43947
44050
|
if (!shelfMap[shelf]) {
|
|
@@ -43968,7 +44071,9 @@ class FixtureAnalyticsComponent {
|
|
|
43968
44071
|
.getStoreFixtureEngagers(payload)
|
|
43969
44072
|
.pipe(takeUntil(this.destroy$)));
|
|
43970
44073
|
if (res && res.code == 200) {
|
|
43971
|
-
|
|
44074
|
+
const { fixtureEngagement = 0, ...engagersList } = res?.data || {};
|
|
44075
|
+
this.fixtureEngagement = fixtureEngagement;
|
|
44076
|
+
this.engagersList = engagersList;
|
|
43972
44077
|
}
|
|
43973
44078
|
}
|
|
43974
44079
|
catch (error) {
|
|
@@ -44003,8 +44108,8 @@ class FixtureAnalyticsComponent {
|
|
|
44003
44108
|
}
|
|
44004
44109
|
leastEngagers() {
|
|
44005
44110
|
return [
|
|
44006
|
-
...this.engagersList?.["Non Engaged"],
|
|
44007
|
-
...this.engagersList?.["Least Engaged"]
|
|
44111
|
+
...(this.engagersList?.["Non Engaged"] || []),
|
|
44112
|
+
...(this.engagersList?.["Least Engaged"] || []).sort((a, b) => a.count - b.count),
|
|
44008
44113
|
]?.slice(0, 3);
|
|
44009
44114
|
}
|
|
44010
44115
|
get bodyEl() {
|
|
@@ -44410,6 +44515,7 @@ class FixtureAnalyticsComponent {
|
|
|
44410
44515
|
this.onClose.emit("");
|
|
44411
44516
|
}
|
|
44412
44517
|
onClickProduct(product) {
|
|
44518
|
+
console.log("@@ ~ product:", product);
|
|
44413
44519
|
if (product) {
|
|
44414
44520
|
const zone = this.fixtureTemplateDetails.shelfConfig.find((s) => s.shelfNumber === Number(product?.shelfNumber ?? "2")).zone;
|
|
44415
44521
|
const productZone = this.sectionByZones.find((sec) => sec.zone === zone);
|
|
@@ -44436,11 +44542,11 @@ class FixtureAnalyticsComponent {
|
|
|
44436
44542
|
this.destroy$.complete();
|
|
44437
44543
|
}
|
|
44438
44544
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureAnalyticsComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
44439
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: { fixtureDetails: "fixtureDetails", floorData: "floorData", startDate: "startDate", endDate: "endDate", dataType: "dataType" }, outputs: { onClose: "onClose", changeFixture: "changeFixture" }, viewQueries: [{ propertyName: "fixtureRoot", first: true, predicate: ["analyticsFixtureRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section #analyticsFixtureRoot id=\"fixture-analytic-details\" class=\"scale-down\" [class.d-none]=\"isPageLoading\">\r\n <div class=\"hero-block\">\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <h1 style=\"font-size: 18px;font-weight: 400;\" class=\"mb-2\">Rank <b>#{{ fixtureDetails?.footfallRank ?? 0 }}</b>\r\n of\r\n {{allFixtures.length}}\r\n </h1>\r\n <h2 style=\"font-size: 18px;font-weight: 600;\" class=\"m-0\">{{ fixtureTemplateDetails?.header?.label }}</h2>\r\n <p>\r\n {{fixtureTemplateDetails?.fixtureCategory}} <span>•</span>\r\n {{fixtureTemplateDetails?.fixtureWidth.value}}{{fixtureTemplateDetails?.fixtureWidth.unit}}<span>•</span>\r\n {{fixtureTemplateDetails?.actualShelves?.length}} Shelves\r\n </p>\r\n </div>\r\n\r\n <div class=\"row g-3\">\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Total Footfall</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.zoneTotal?.count}}</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.zoneTotal?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.zoneTotal?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Zone Conversion</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.conversionCount?.count}}%</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.conversionCount?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.conversionCount?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell Time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.dwellTime?.count}} mins</h2>\r\n\r\n <div class=\"d-flex align-items-centergap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.dwellTime?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.dwellTime?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-end mt-2 pe-5\" style=\"margin-top:14px\">\r\n <div class=\"form-check form-switch \">\r\n <input [checked]=\"showVMs\" [(ngModel)]=\"showVMs\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Show VM\r\n </label>\r\n </div>\r\n </div> -->\r\n\r\n <div id=\"vm-products-sum\" class=\"wall-viewport my-4\">\r\n <div class=\"fixture-wrapper\">\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <div *ngIf=\"fixtureTemplateDetails?.vmConfig?.length\" [ngClass]=\"{'d-none':!showVMs}\">\r\n <ng-container *ngFor=\"let vm of fixtureTemplateDetails?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN+vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div id=\"section-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\"\r\n (click)=\"openZoneLevelProductModal(item,'section')\">\r\n <div class=\"d-flex gap-1\">\r\n <span class=\"badge inactive\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex gap-1 my-1\">\r\n <span class=\"badge inactive\">\r\n Pickups {{ item?.section?.pickupCount }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <div [id]=\"'sumShelfContainer' + i\"\r\n *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center my-4\">\r\n <span class=\"heatmap-txt\">High</span>\r\n <svg style=\"height: 18px; width: auto;\" width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185872)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185872\" x1=\"0\" y1=\"19.5\" x2=\"452\" y2=\"19.5\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#FCD6DA\" />\r\n <stop offset=\"0.17802\" stop-color=\"#FDEEDA\" />\r\n <stop offset=\"0.362811\" stop-color=\"#FCFFD5\" />\r\n <stop offset=\"0.509803\" stop-color=\"#D8E4FF\" />\r\n <stop offset=\"0.669395\" stop-color=\"#E9FBFF\" />\r\n <stop offset=\"0.845787\" stop-color=\"#F0F2F4\" />\r\n <stop offset=\"1\" stop-color=\"#FEFEFE\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <span class=\"heatmap-txt text-nowrap\">Low engagement rate</span>\r\n </div>\r\n\r\n <div class=\"row g-3\">\r\n <div class=\"w-25\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"engagersList?.['Top Engaged']?.length\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let top of topEngagers()\" (click)=\"onClickProduct(top)\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Non Engaged']?.length ||engagersList?.['Least Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least/Non Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let least of leastEngagers()\" (click)=\"onClickProduct(least)\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"least?.imageUrl ? least.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{least?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('least_Non_Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<section id=\"template-summary-skeleton\" [class.d-none]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#fixture-analytic-details .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#fixture-analytic-details #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}#fixture-analytic-details #vm-products-sum{margin-top:-12px}#fixture-analytic-details #vm-products-sum .wall-viewport{align-items:self-start;margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .body-block{position:relative;width:fit-content}#fixture-analytic-details #vm-products-sum .body-block .block{border:none}#fixture-analytic-details #vm-products-sum .body-block .product-placeholder{height:100%;width:auto}#fixture-analytic-details #vm-products-sum .product{padding:1px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:.52px solid #e6e6e6;box-shadow:0 .52px 1.04px #1018280d}#fixture-analytic-details #vm-products-sum .product img{object-fit:cover;border-radius:4px;opacity:.8}#fixture-analytic-details #vm-products-sum .product.top{border:.52px solid #ffd0d0;background-color:#ffd0d0}#fixture-analytic-details #vm-products-sum .product.least{border:.52px solid #ffe77c;background-color:#ffe77c}#fixture-analytic-details #vm-products-sum .product.non{border:.52px solid #dadada;background-color:#fff}#fixture-analytic-details #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-analytic-details #vm-products-sum #fixture-level .brand,#fixture-analytic-details #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-analytic-details #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-analytic-details #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #33b5ff);background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #section-level .brand,#fixture-analytic-details #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-analytic-details #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-analytic-details #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #shelf-level .brand,#fixture-analytic-details #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-analytic-details #vm-products-sum .brand-category .badge{color:#f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum .brand-category .badge.proper{color:#12b76a!important;background-color:#ecfdf3!important}#fixture-analytic-details #vm-products-sum .header-block{width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-analytic-details #vm-products-sum .storage-box{position:relative;bottom:70px;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid #33b5ff;background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum .storage-box .brand,#fixture-analytic-details #vm-products-sum .storage-box .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum .storage-box .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-analytic-details #vm-products-sum img{width:100%;height:100%;display:block}#fixture-analytic-details #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;z-index:1000;transition:all .3s ease;padding:1px}#fixture-analytic-details #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-analytic-details #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-analytic-details .hero-block{position:relative;background-color:#f9fafb;width:100%;display:flex;flex-direction:column;gap:6px;padding:12px;justify-content:center;align-items:center;margin-bottom:18px}#fixture-analytic-details .hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}#fixture-analytic-details .hero-block p{font-weight:500;font-size:16px;line-height:24px;color:#475467;margin:0}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.w-20{width:33%}.card-body img{width:38px;height:38px;object-fit:cover}.w-25{width:50%!important}@media (max-width: 1280px){.scale-down{zoom:.55}}.list-tile:hover{cursor:pointer;background-color:#f7f7f7}\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$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
44545
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: { fixtureDetails: "fixtureDetails", floorData: "floorData", startDate: "startDate", endDate: "endDate", dataType: "dataType" }, outputs: { onClose: "onClose", changeFixture: "changeFixture" }, viewQueries: [{ propertyName: "fixtureRoot", first: true, predicate: ["analyticsFixtureRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section #analyticsFixtureRoot id=\"fixture-analytic-details\" class=\"scale-down\" [class.d-none]=\"isPageLoading\">\r\n <div class=\"hero-block\">\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"hero-content\">\n <div class=\"hero-rank\">\n <div class=\"rank-badge\" [style.--rank-bg]=\"fixtureRankBadgeColors.bg\"\n [style.--rank-border]=\"fixtureRankBadgeColors.border\"\n [style.--rank-inner-bg]=\"fixtureRankBadgeColors.innerBg\"\n [style.--rank-text]=\"fixtureRankBadgeColors.text\">\n <span class=\"rank-hash\">#</span>\n <span class=\"rank-num\">{{ fixtureDetails?.footfallRank ?? 0 }}</span>\n </div>\n\n <div class=\"hero-rank-copy\">\n <h1>Rank based on Footfall</h1>\n <span class=\"hero-rank-meta\">Out of {{allFixtures.length}} fixtures</span>\n </div>\n </div>\n\n <h2 class=\"hero-compliance m-0\">\n Merch compliance: <b>{{fixtureTemplateDetails?.fixtureCompliance}}%</b>\n </h2>\n\n <p class=\"hero-meta\">\n <b>\n {{ fixtureTemplateDetails?.header?.label }}\n </b> <span>•</span>\n\n {{fixtureTemplateDetails?.fixtureCategory}} <span>•</span>\n {{fixtureTemplateDetails?.fixtureWidth.value}}{{fixtureTemplateDetails?.fixtureWidth.unit}}<span>•</span>\n {{fixtureTemplateDetails?.actualShelves?.length}} Shelves\n </p>\n </div>\n </div>\n\r\n <div class=\"row g-3 mb-3\">\r\n <div class=\"col-6\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Footfall</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.zoneTotal?.count}}</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.zoneTotal?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.zoneTotal?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-6\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell Time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.dwellTime?.count}} mins</h2>\r\n\r\n <div class=\"d-flex align-items-centergap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.dwellTime?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.dwellTime?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-6\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Fixture Conversion</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.conversionCount?.count}}%</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.conversionCount?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.conversionCount?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"col-6\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Engagement Conversion</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">\r\n {{fixtureEngagement + '%'}}\r\n </h2>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-end mt-2 pe-5\" style=\"margin-top:14px\">\r\n <div class=\"form-check form-switch \">\r\n <input [checked]=\"showVMs\" [(ngModel)]=\"showVMs\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Show VM\r\n </label>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"row g-3\">\r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Top Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let top of topEngagers()\" (click)=\"onClickProduct(top)\">\r\n <div class=\"col-auto\">\r\n @if (top?.imageUrl && !top?.imageLoadError) {\r\n <img [src]=\"top.imageUrl\" alt=\"Product\" class=\"rounded\"\r\n (error)=\"top.imageLoadError = true\">\r\n } @else {\r\n <div class=\"card-image-placeholder rounded\"></div>\r\n }\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Non Engaged']?.length || engagersList?.['Least Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least/Non Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let least of leastEngagers()\" (click)=\"onClickProduct(least)\">\r\n <div class=\"col-auto\">\r\n @if (least?.imageUrl && !least?.imageLoadError) {\r\n <img [src]=\"least.imageUrl\" alt=\"Product\" class=\"rounded\"\r\n (error)=\"least.imageLoadError = true\">\r\n } @else {\r\n <div class=\"card-image-placeholder rounded\"></div>\r\n }\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{least?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('least_Non_Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"vm-products-sum\" class=\"wall-viewport my-4\">\r\n <div class=\"fixture-wrapper\">\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <div *ngIf=\"fixtureTemplateDetails?.vmConfig?.length\" [ngClass]=\"{'d-none':!showVMs}\">\r\n <ng-container *ngFor=\"let vm of fixtureTemplateDetails?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN+vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div id=\"section-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\"\r\n (click)=\"openZoneLevelProductModal(item,'section')\">\r\n <div class=\"d-flex gap-1\">\r\n <span class=\"badge inactive\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex gap-1 my-1\">\r\n <span class=\"badge inactive\">\r\n Pickups {{ item?.section?.pickupCount }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <div [id]=\"'sumShelfContainer' + i\"\r\n *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <!-- <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n\r\n </div>\r\n </div> -->\r\n\r\n @if(item.products.length){\r\n <div *ngFor=\"let row of item.distributedRows;let r = index\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of row;let p = index\" class=\"product\"\r\n [style.background]=\"'white'\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }@else {\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n }@else{\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\"\r\n [style.border-color]=\"item?.heatmap?.border\" style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <!-- <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div> -->\r\n\r\n @if(item.products.length){\r\n <div *ngFor=\"let product of item.products;let p = index\" class=\"product\"\r\n [style.background]=\"'white'\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }@else {\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n }@else {\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 align-items-center my-4\">\r\n <span class=\"heatmap-txt\">High</span>\r\n <svg style=\"height: 18px; width: auto;\" width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185872)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185872\" x1=\"0\" y1=\"19.5\" x2=\"452\" y2=\"19.5\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#FCA5A5\" />\r\n <stop offset=\"0.2\" stop-color=\"#FECACA\" />\r\n <stop offset=\"0.4\" stop-color=\"#93C5FD\" />\r\n <stop offset=\"0.6\" stop-color=\"#BAE6FD\" />\r\n <stop offset=\"0.8\" stop-color=\"#86EFAC\" />\r\n <stop offset=\"1\" stop-color=\"#BBF7D0\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <span class=\"heatmap-txt text-nowrap\">Low engagement rate</span>\r\n </div>\r\n</section>\r\n\r\n<section id=\"template-summary-skeleton\" [class.d-none]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#fixture-analytic-details .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#fixture-analytic-details #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}#fixture-analytic-details #vm-products-sum{margin-top:-12px}#fixture-analytic-details #vm-products-sum .wall-viewport{align-items:self-start;margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .body-block{position:relative;width:fit-content}#fixture-analytic-details #vm-products-sum .body-block .block{border:none}#fixture-analytic-details #vm-products-sum .body-block .product-placeholder{height:100%;width:auto}#fixture-analytic-details #vm-products-sum .product{padding:1px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:.52px solid #e6e6e6;box-shadow:0 .52px 1.04px #1018280d}#fixture-analytic-details #vm-products-sum .product img{object-fit:cover;border-radius:4px;opacity:.8}#fixture-analytic-details #vm-products-sum .product.top{border:.52px solid #ffd0d0;background-color:#ffd0d0}#fixture-analytic-details #vm-products-sum .product.least{border:.52px solid #ffe77c;background-color:#ffe77c}#fixture-analytic-details #vm-products-sum .product.non{border:.52px solid #dadada;background-color:#fff}#fixture-analytic-details #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-analytic-details #vm-products-sum #fixture-level .brand,#fixture-analytic-details #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-analytic-details #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-analytic-details #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #33b5ff);background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #section-level .brand,#fixture-analytic-details #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-analytic-details #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-analytic-details #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #shelf-level .brand,#fixture-analytic-details #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-analytic-details #vm-products-sum .brand-category .badge{color:#f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum .brand-category .badge.proper{color:#12b76a!important;background-color:#ecfdf3!important}#fixture-analytic-details #vm-products-sum .header-block{width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-analytic-details #vm-products-sum .storage-box{position:relative;bottom:70px;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid #33b5ff;background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum .storage-box .brand,#fixture-analytic-details #vm-products-sum .storage-box .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum .storage-box .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-analytic-details #vm-products-sum img{width:100%;height:100%;display:block}#fixture-analytic-details #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;z-index:1000;transition:all .3s ease;padding:1px}#fixture-analytic-details #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-analytic-details #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-analytic-details .hero-block{position:relative;background-color:#f9fafb;width:100%;display:flex;flex-direction:column;padding:16px 56px 16px 20px;justify-content:center;align-items:stretch;margin-bottom:18px}#fixture-analytic-details .hero-block .hero-content{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}#fixture-analytic-details .hero-block .hero-rank{display:flex;align-items:center;justify-content:center;gap:14px}#fixture-analytic-details .hero-block .hero-rank-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}#fixture-analytic-details .hero-block .hero-rank-meta{color:#667085;font-size:14px;font-weight:500;line-height:20px}#fixture-analytic-details .hero-block .hero-compliance{color:#101828;font-size:16px;font-weight:400;line-height:24px}#fixture-analytic-details .hero-block .hero-meta{max-width:100%;color:#475467;font-size:15px;font-weight:500;line-height:22px;margin:0;text-wrap:balance}#fixture-analytic-details .hero-block .rank-badge{--rank-bg: #e3e8f0;--rank-border: #cbd5e1;--rank-inner-bg: #f8f9fc;--rank-text: #475467;width:52px;height:52px;border-radius:50%;border:1px solid var(--rank-border);background:var(--rank-bg);display:flex;align-items:center;justify-content:center;gap:1px;position:relative;flex-shrink:0}#fixture-analytic-details .hero-block .rank-badge:before{content:\"\";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--rank-border);background:var(--rank-inner-bg)}#fixture-analytic-details .hero-block .rank-badge span{position:relative;z-index:1}#fixture-analytic-details .hero-block .rank-hash{color:var(--rank-text);font-size:16px;font-weight:400;line-height:1}#fixture-analytic-details .hero-block .rank-num{color:var(--rank-text);font-size:20px;font-weight:700;line-height:1}#fixture-analytic-details .hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}#fixture-analytic-details .hero-block p{font-weight:500;font-size:16px;line-height:24px;color:#475467;margin:0}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.w-20{width:33%}.card-body img{width:38px;height:38px;object-fit:cover}.card-image-placeholder{width:38px;height:38px;background:#f2f4f7;border:1px solid #e4e7ec}.w-25{width:50%!important}@media (max-width: 1280px){.scale-down{zoom:.55}}.list-tile:hover{cursor:pointer;background-color:#f7f7f7}\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$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
44440
44546
|
}
|
|
44441
44547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureAnalyticsComponent, decorators: [{
|
|
44442
44548
|
type: Component,
|
|
44443
|
-
args: [{ selector: "lib-fixture-analytics", template: "<section #analyticsFixtureRoot id=\"fixture-analytic-details\" class=\"scale-down\" [class.d-none]=\"isPageLoading\">\r\n <div class=\"hero-block\">\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <h1 style=\"font-size: 18px;font-weight: 400;\" class=\"mb-2\">Rank <b>#{{ fixtureDetails?.footfallRank ?? 0 }}</b>\r\n of\r\n {{allFixtures.length}}\r\n </h1>\r\n <h2 style=\"font-size: 18px;font-weight: 600;\" class=\"m-0\">{{ fixtureTemplateDetails?.header?.label }}</h2>\r\n <p>\r\n {{fixtureTemplateDetails?.fixtureCategory}} <span>•</span>\r\n {{fixtureTemplateDetails?.fixtureWidth.value}}{{fixtureTemplateDetails?.fixtureWidth.unit}}<span>•</span>\r\n {{fixtureTemplateDetails?.actualShelves?.length}} Shelves\r\n </p>\r\n </div>\r\n\r\n <div class=\"row g-3\">\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Total Footfall</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.zoneTotal?.count}}</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.zoneTotal?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.zoneTotal?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Zone Conversion</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.conversionCount?.count}}%</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.conversionCount?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.conversionCount?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell Time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.dwellTime?.count}} mins</h2>\r\n\r\n <div class=\"d-flex align-items-centergap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.dwellTime?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.dwellTime?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-end mt-2 pe-5\" style=\"margin-top:14px\">\r\n <div class=\"form-check form-switch \">\r\n <input [checked]=\"showVMs\" [(ngModel)]=\"showVMs\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Show VM\r\n </label>\r\n </div>\r\n </div> -->\r\n\r\n <div id=\"vm-products-sum\" class=\"wall-viewport my-4\">\r\n <div class=\"fixture-wrapper\">\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <div *ngIf=\"fixtureTemplateDetails?.vmConfig?.length\" [ngClass]=\"{'d-none':!showVMs}\">\r\n <ng-container *ngFor=\"let vm of fixtureTemplateDetails?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN+vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div id=\"section-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\"\r\n (click)=\"openZoneLevelProductModal(item,'section')\">\r\n <div class=\"d-flex gap-1\">\r\n <span class=\"badge inactive\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex gap-1 my-1\">\r\n <span class=\"badge inactive\">\r\n Pickups {{ item?.section?.pickupCount }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <div [id]=\"'sumShelfContainer' + i\"\r\n *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center my-4\">\r\n <span class=\"heatmap-txt\">High</span>\r\n <svg style=\"height: 18px; width: auto;\" width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185872)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185872\" x1=\"0\" y1=\"19.5\" x2=\"452\" y2=\"19.5\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#FCD6DA\" />\r\n <stop offset=\"0.17802\" stop-color=\"#FDEEDA\" />\r\n <stop offset=\"0.362811\" stop-color=\"#FCFFD5\" />\r\n <stop offset=\"0.509803\" stop-color=\"#D8E4FF\" />\r\n <stop offset=\"0.669395\" stop-color=\"#E9FBFF\" />\r\n <stop offset=\"0.845787\" stop-color=\"#F0F2F4\" />\r\n <stop offset=\"1\" stop-color=\"#FEFEFE\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <span class=\"heatmap-txt text-nowrap\">Low engagement rate</span>\r\n </div>\r\n\r\n <div class=\"row g-3\">\r\n <div class=\"w-25\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"engagersList?.['Top Engaged']?.length\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let top of topEngagers()\" (click)=\"onClickProduct(top)\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Non Engaged']?.length ||engagersList?.['Least Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least/Non Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let least of leastEngagers()\" (click)=\"onClickProduct(least)\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"least?.imageUrl ? least.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{least?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('least_Non_Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<section id=\"template-summary-skeleton\" [class.d-none]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#fixture-analytic-details .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#fixture-analytic-details #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}#fixture-analytic-details #vm-products-sum{margin-top:-12px}#fixture-analytic-details #vm-products-sum .wall-viewport{align-items:self-start;margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .body-block{position:relative;width:fit-content}#fixture-analytic-details #vm-products-sum .body-block .block{border:none}#fixture-analytic-details #vm-products-sum .body-block .product-placeholder{height:100%;width:auto}#fixture-analytic-details #vm-products-sum .product{padding:1px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:.52px solid #e6e6e6;box-shadow:0 .52px 1.04px #1018280d}#fixture-analytic-details #vm-products-sum .product img{object-fit:cover;border-radius:4px;opacity:.8}#fixture-analytic-details #vm-products-sum .product.top{border:.52px solid #ffd0d0;background-color:#ffd0d0}#fixture-analytic-details #vm-products-sum .product.least{border:.52px solid #ffe77c;background-color:#ffe77c}#fixture-analytic-details #vm-products-sum .product.non{border:.52px solid #dadada;background-color:#fff}#fixture-analytic-details #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-analytic-details #vm-products-sum #fixture-level .brand,#fixture-analytic-details #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-analytic-details #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-analytic-details #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #33b5ff);background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #section-level .brand,#fixture-analytic-details #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-analytic-details #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-analytic-details #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #shelf-level .brand,#fixture-analytic-details #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-analytic-details #vm-products-sum .brand-category .badge{color:#f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum .brand-category .badge.proper{color:#12b76a!important;background-color:#ecfdf3!important}#fixture-analytic-details #vm-products-sum .header-block{width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-analytic-details #vm-products-sum .storage-box{position:relative;bottom:70px;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid #33b5ff;background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum .storage-box .brand,#fixture-analytic-details #vm-products-sum .storage-box .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum .storage-box .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-analytic-details #vm-products-sum img{width:100%;height:100%;display:block}#fixture-analytic-details #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;z-index:1000;transition:all .3s ease;padding:1px}#fixture-analytic-details #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-analytic-details #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-analytic-details .hero-block{position:relative;background-color:#f9fafb;width:100%;display:flex;flex-direction:column;gap:6px;padding:12px;justify-content:center;align-items:center;margin-bottom:18px}#fixture-analytic-details .hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}#fixture-analytic-details .hero-block p{font-weight:500;font-size:16px;line-height:24px;color:#475467;margin:0}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.w-20{width:33%}.card-body img{width:38px;height:38px;object-fit:cover}.w-25{width:50%!important}@media (max-width: 1280px){.scale-down{zoom:.55}}.list-tile:hover{cursor:pointer;background-color:#f7f7f7}\n"] }]
|
|
44549
|
+
args: [{ selector: "lib-fixture-analytics", template: "<section #analyticsFixtureRoot id=\"fixture-analytic-details\" class=\"scale-down\" [class.d-none]=\"isPageLoading\">\r\n <div class=\"hero-block\">\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"hero-content\">\n <div class=\"hero-rank\">\n <div class=\"rank-badge\" [style.--rank-bg]=\"fixtureRankBadgeColors.bg\"\n [style.--rank-border]=\"fixtureRankBadgeColors.border\"\n [style.--rank-inner-bg]=\"fixtureRankBadgeColors.innerBg\"\n [style.--rank-text]=\"fixtureRankBadgeColors.text\">\n <span class=\"rank-hash\">#</span>\n <span class=\"rank-num\">{{ fixtureDetails?.footfallRank ?? 0 }}</span>\n </div>\n\n <div class=\"hero-rank-copy\">\n <h1>Rank based on Footfall</h1>\n <span class=\"hero-rank-meta\">Out of {{allFixtures.length}} fixtures</span>\n </div>\n </div>\n\n <h2 class=\"hero-compliance m-0\">\n Merch compliance: <b>{{fixtureTemplateDetails?.fixtureCompliance}}%</b>\n </h2>\n\n <p class=\"hero-meta\">\n <b>\n {{ fixtureTemplateDetails?.header?.label }}\n </b> <span>•</span>\n\n {{fixtureTemplateDetails?.fixtureCategory}} <span>•</span>\n {{fixtureTemplateDetails?.fixtureWidth.value}}{{fixtureTemplateDetails?.fixtureWidth.unit}}<span>•</span>\n {{fixtureTemplateDetails?.actualShelves?.length}} Shelves\n </p>\n </div>\n </div>\n\r\n <div class=\"row g-3 mb-3\">\r\n <div class=\"col-6\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Footfall</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.zoneTotal?.count}}</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.zoneTotal?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.zoneTotal?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-6\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell Time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.dwellTime?.count}} mins</h2>\r\n\r\n <div class=\"d-flex align-items-centergap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.dwellTime?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.dwellTime?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-6\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Fixture Conversion</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.conversionCount?.count}}%</h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"fixtureFootfall?.conversionCount?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.conversionCount?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"col-6\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Engagement Conversion</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">\r\n {{fixtureEngagement + '%'}}\r\n </h2>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-end mt-2 pe-5\" style=\"margin-top:14px\">\r\n <div class=\"form-check form-switch \">\r\n <input [checked]=\"showVMs\" [(ngModel)]=\"showVMs\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Show VM\r\n </label>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"row g-3\">\r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Top Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let top of topEngagers()\" (click)=\"onClickProduct(top)\">\r\n <div class=\"col-auto\">\r\n @if (top?.imageUrl && !top?.imageLoadError) {\r\n <img [src]=\"top.imageUrl\" alt=\"Product\" class=\"rounded\"\r\n (error)=\"top.imageLoadError = true\">\r\n } @else {\r\n <div class=\"card-image-placeholder rounded\"></div>\r\n }\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Non Engaged']?.length || engagersList?.['Least Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least/Non Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom mx-0 list-tile\"\r\n *ngFor=\"let least of leastEngagers()\" (click)=\"onClickProduct(least)\">\r\n <div class=\"col-auto\">\r\n @if (least?.imageUrl && !least?.imageLoadError) {\r\n <img [src]=\"least.imageUrl\" alt=\"Product\" class=\"rounded\"\r\n (error)=\"least.imageLoadError = true\">\r\n } @else {\r\n <div class=\"card-image-placeholder rounded\"></div>\r\n }\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{least?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('least_Non_Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"vm-products-sum\" class=\"wall-viewport my-4\">\r\n <div class=\"fixture-wrapper\">\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <div *ngIf=\"fixtureTemplateDetails?.vmConfig?.length\" [ngClass]=\"{'d-none':!showVMs}\">\r\n <ng-container *ngFor=\"let vm of fixtureTemplateDetails?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN+vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div id=\"section-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\"\r\n (click)=\"openZoneLevelProductModal(item,'section')\">\r\n <div class=\"d-flex gap-1\">\r\n <span class=\"badge inactive\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex gap-1 my-1\">\r\n <span class=\"badge inactive\">\r\n Pickups {{ item?.section?.pickupCount }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <div [id]=\"'sumShelfContainer' + i\"\r\n *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <!-- <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n\r\n </div>\r\n </div> -->\r\n\r\n @if(item.products.length){\r\n <div *ngFor=\"let row of item.distributedRows;let r = index\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of row;let p = index\" class=\"product\"\r\n [style.background]=\"'white'\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }@else {\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n }@else{\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\"\r\n [style.border-color]=\"item?.heatmap?.border\" style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <!-- <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n\r\n </div> -->\r\n\r\n @if(item.products.length){\r\n <div *ngFor=\"let product of item.products;let p = index\" class=\"product\"\r\n [style.background]=\"'white'\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }@else {\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n }\r\n </div>\r\n }@else {\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"\r\n [style.background]=\"item?.heatmap?.bg\" [style.border-color]=\"item?.heatmap?.border\"\r\n style=\"opacity: 0.7;\">\r\n <svg style=\"opacity: 0.5;\" width=\"40\" height=\"19\" viewBox=\"0 0 40 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M31.0536 0.000138522C31.4767 0.00329514 31.8941 0.0635538 32.3075 0.186662C33.7233 0.609655 34.3548 1.37353 35.1425 2.32045C35.2335 2.43086 35.3247 2.53814 35.3573 2.57924L39.8426 7.92397C40.0866 8.21431 40.0413 8.64307 39.7421 8.88295C39.6737 8.93661 39.5985 8.97489 39.5204 9.00014C39.0874 9.70402 38.2056 10.5156 37.9745 10.8439C37.4635 11.5604 37.0333 12.3966 36.6493 13.3087C36.0927 14.9185 35.422 16.1997 34.6278 17.1183C33.8759 17.9926 33.0105 18.5393 32.0243 18.7413C31.8941 18.7666 31.7665 18.7986 31.6395 18.8175C29.9045 19.0921 26.7539 19.1076 25.12 18.4953C24.6448 18.3185 24.2121 18.0437 23.8182 17.7091C23.2681 17.2956 22.4181 15.758 21.7704 14.3722C21.318 13.4068 20.5275 12.7978 20.0653 12.7785C19.5543 12.7564 18.7105 13.3212 18.2352 14.2902C17.8707 15.0257 17.3729 15.7267 17.0702 16.3927C16.0579 18.6213 13.5056 19.0096 10.8788 19.0001C10.1692 18.997 9.46267 18.9367 8.74988 18.8136C6.17861 18.3622 5.44608 18.0592 4.38171 15.796C3.03742 12.9489 2.85847 11.427 0.413939 9.17006C0.30334 9.03755 0.224787 8.91474 0.172728 8.79799C-0.0485357 8.55177 -0.0609602 8.18203 0.157103 7.92006L4.64538 2.57924C4.6812 2.53818 4.7691 2.43091 4.86023 2.32045C5.64465 1.37353 6.27943 0.609667 7.69519 0.186662C8.10524 0.0635809 8.52537 0.00331947 8.94519 0.000138522C9.35851 -0.00301753 9.76884 0.0478256 10.1757 0.145646C10.5532 0.234032 10.7847 0.606854 10.6903 0.969865C10.599 1.33585 10.2149 1.55943 9.8407 1.46791C9.53799 1.39531 9.24171 1.35734 8.95202 1.36049C8.67209 1.36365 8.38854 1.40221 8.10534 1.48744C7.10301 1.78736 6.58865 2.40602 5.95398 3.17299C5.90193 3.23608 5.84615 3.302 5.7323 3.43764L2.24304 7.59487C2.34395 7.58855 2.45203 7.58262 2.55945 7.57631C7.0122 6.99875 11.4358 7.43711 15.83 9.19838C17.4607 9.85179 19.0621 11.0892 20.8426 10.6378C22.0209 10.338 23.7428 9.23354 25.162 8.73158C29.5336 7.188 33.4369 7.18183 37.828 7.68373L34.2635 3.43764C34.1497 3.30205 34.0939 3.23609 34.0419 3.17299C33.4072 2.40597 32.893 1.78731 31.8905 1.48744C31.6073 1.40222 31.327 1.36049 31.0438 1.36049C30.7544 1.35738 30.4585 1.39543 30.1561 1.46791C29.7787 1.55626 29.3979 1.33577 29.3065 0.969865C29.2154 0.603756 29.4427 0.234107 29.8202 0.145646C30.2302 0.0478282 30.6403 -0.00297627 31.0536 0.000138522ZM10.7714 9.006C8.33663 8.45679 5.17599 8.10028 4.31335 9.60268C3.66559 10.7296 4.32964 12.46 4.65515 13.6437C4.95461 14.6537 5.35541 15.4964 5.86316 16.1466C7.56554 18.3244 11.6598 18.2743 14.0555 17.4601C15.7514 17.0781 16.7964 15.7801 16.7411 12.9455C16.7897 10.3004 12.9392 9.49526 10.7714 9.006ZM35.6405 9.60268C34.7778 8.10031 31.6172 8.45678 29.1825 9.006C27.0147 9.49526 23.1642 10.3004 23.2128 12.9455C23.1574 15.7801 24.2024 17.0781 25.8983 17.4601C28.294 18.2743 32.3883 18.3243 34.0907 16.1466C34.6017 15.4964 34.9992 14.6537 35.2987 13.6437C35.6242 12.46 36.2883 10.7296 35.6405 9.60268Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 align-items-center my-4\">\r\n <span class=\"heatmap-txt\">High</span>\r\n <svg style=\"height: 18px; width: auto;\" width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185872)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185872\" x1=\"0\" y1=\"19.5\" x2=\"452\" y2=\"19.5\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#FCA5A5\" />\r\n <stop offset=\"0.2\" stop-color=\"#FECACA\" />\r\n <stop offset=\"0.4\" stop-color=\"#93C5FD\" />\r\n <stop offset=\"0.6\" stop-color=\"#BAE6FD\" />\r\n <stop offset=\"0.8\" stop-color=\"#86EFAC\" />\r\n <stop offset=\"1\" stop-color=\"#BBF7D0\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <span class=\"heatmap-txt text-nowrap\">Low engagement rate</span>\r\n </div>\r\n</section>\r\n\r\n<section id=\"template-summary-skeleton\" [class.d-none]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#fixture-analytic-details .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#fixture-analytic-details #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}#fixture-analytic-details #vm-products-sum{margin-top:-12px}#fixture-analytic-details #vm-products-sum .wall-viewport{align-items:self-start;margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .body-block{position:relative;width:fit-content}#fixture-analytic-details #vm-products-sum .body-block .block{border:none}#fixture-analytic-details #vm-products-sum .body-block .product-placeholder{height:100%;width:auto}#fixture-analytic-details #vm-products-sum .product{padding:1px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:.52px solid #e6e6e6;box-shadow:0 .52px 1.04px #1018280d}#fixture-analytic-details #vm-products-sum .product img{object-fit:cover;border-radius:4px;opacity:.8}#fixture-analytic-details #vm-products-sum .product.top{border:.52px solid #ffd0d0;background-color:#ffd0d0}#fixture-analytic-details #vm-products-sum .product.least{border:.52px solid #ffe77c;background-color:#ffe77c}#fixture-analytic-details #vm-products-sum .product.non{border:.52px solid #dadada;background-color:#fff}#fixture-analytic-details #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-analytic-details #vm-products-sum #fixture-level .brand,#fixture-analytic-details #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-analytic-details #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-analytic-details #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #33b5ff);background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #section-level .brand,#fixture-analytic-details #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-analytic-details #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-analytic-details #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #shelf-level .brand,#fixture-analytic-details #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-analytic-details #vm-products-sum .brand-category .badge{color:#f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum .brand-category .badge.proper{color:#12b76a!important;background-color:#ecfdf3!important}#fixture-analytic-details #vm-products-sum .header-block{width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-analytic-details #vm-products-sum .storage-box{position:relative;bottom:70px;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid #33b5ff;background-color:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum .storage-box .brand,#fixture-analytic-details #vm-products-sum .storage-box .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum .storage-box .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-analytic-details #vm-products-sum img{width:100%;height:100%;display:block}#fixture-analytic-details #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;z-index:1000;transition:all .3s ease;padding:1px}#fixture-analytic-details #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-analytic-details #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-analytic-details .hero-block{position:relative;background-color:#f9fafb;width:100%;display:flex;flex-direction:column;padding:16px 56px 16px 20px;justify-content:center;align-items:stretch;margin-bottom:18px}#fixture-analytic-details .hero-block .hero-content{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}#fixture-analytic-details .hero-block .hero-rank{display:flex;align-items:center;justify-content:center;gap:14px}#fixture-analytic-details .hero-block .hero-rank-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}#fixture-analytic-details .hero-block .hero-rank-meta{color:#667085;font-size:14px;font-weight:500;line-height:20px}#fixture-analytic-details .hero-block .hero-compliance{color:#101828;font-size:16px;font-weight:400;line-height:24px}#fixture-analytic-details .hero-block .hero-meta{max-width:100%;color:#475467;font-size:15px;font-weight:500;line-height:22px;margin:0;text-wrap:balance}#fixture-analytic-details .hero-block .rank-badge{--rank-bg: #e3e8f0;--rank-border: #cbd5e1;--rank-inner-bg: #f8f9fc;--rank-text: #475467;width:52px;height:52px;border-radius:50%;border:1px solid var(--rank-border);background:var(--rank-bg);display:flex;align-items:center;justify-content:center;gap:1px;position:relative;flex-shrink:0}#fixture-analytic-details .hero-block .rank-badge:before{content:\"\";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--rank-border);background:var(--rank-inner-bg)}#fixture-analytic-details .hero-block .rank-badge span{position:relative;z-index:1}#fixture-analytic-details .hero-block .rank-hash{color:var(--rank-text);font-size:16px;font-weight:400;line-height:1}#fixture-analytic-details .hero-block .rank-num{color:var(--rank-text);font-size:20px;font-weight:700;line-height:1}#fixture-analytic-details .hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}#fixture-analytic-details .hero-block p{font-weight:500;font-size:16px;line-height:24px;color:#475467;margin:0}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.w-20{width:33%}.card-body img{width:38px;height:38px;object-fit:cover}.card-image-placeholder{width:38px;height:38px;background:#f2f4f7;border:1px solid #e4e7ec}.w-25{width:50%!important}@media (max-width: 1280px){.scale-down{zoom:.55}}.list-tile:hover{cursor:pointer;background-color:#f7f7f7}\n"] }]
|
|
44444
44550
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i4.ToastService }], propDecorators: { fixtureDetails: [{
|
|
44445
44551
|
type: Input
|
|
44446
44552
|
}], floorData: [{
|
|
@@ -44466,6 +44572,14 @@ class PlanoAnalyticsComponent {
|
|
|
44466
44572
|
titleCase;
|
|
44467
44573
|
ngbModal;
|
|
44468
44574
|
floorData;
|
|
44575
|
+
footfallHeatmapLegendColors = [
|
|
44576
|
+
FOOTFALL_HEATMAP_COLORS[0].bg,
|
|
44577
|
+
FOOTFALL_HEATMAP_COLORS[5].bg,
|
|
44578
|
+
FOOTFALL_HEATMAP_COLORS[10].bg,
|
|
44579
|
+
FOOTFALL_HEATMAP_COLORS[12].bg,
|
|
44580
|
+
FOOTFALL_HEATMAP_COLORS[17].bg,
|
|
44581
|
+
FOOTFALL_HEATMAP_COLORS[23].bg,
|
|
44582
|
+
];
|
|
44469
44583
|
footfallList = [];
|
|
44470
44584
|
cardData;
|
|
44471
44585
|
topPerformingZoneList = [];
|
|
@@ -45514,7 +45628,7 @@ class PlanoAnalyticsComponent {
|
|
|
45514
45628
|
canvas.add(fixtureGroup);
|
|
45515
45629
|
return fixtureGroup;
|
|
45516
45630
|
}
|
|
45517
|
-
selectFixture(target) {
|
|
45631
|
+
selectFixture(target, targetProduct) {
|
|
45518
45632
|
if (target) {
|
|
45519
45633
|
this.selectedFixture = {
|
|
45520
45634
|
fixtureType: target.fixtureType,
|
|
@@ -45536,6 +45650,7 @@ class PlanoAnalyticsComponent {
|
|
|
45536
45650
|
this.selectedFixtureData = fixture;
|
|
45537
45651
|
this.selectedFixtureData["revisionId"] = this.floorData.revisionId;
|
|
45538
45652
|
}
|
|
45653
|
+
this.selectedFixtureData["targetProduct"] = targetProduct;
|
|
45539
45654
|
if (this.selectedFixtureData?.header?.label != "CL") {
|
|
45540
45655
|
this.selectedFixture.fixtureData = this.selectedFixtureData;
|
|
45541
45656
|
}
|
|
@@ -45765,6 +45880,16 @@ class PlanoAnalyticsComponent {
|
|
|
45765
45880
|
this.highlightFixture(actionFixture, true);
|
|
45766
45881
|
this.selectFixture(actionFixture);
|
|
45767
45882
|
}
|
|
45883
|
+
onFootfallTileClick(fixtureId) {
|
|
45884
|
+
this.scrollToCanvasCard();
|
|
45885
|
+
if (!fixtureId)
|
|
45886
|
+
return;
|
|
45887
|
+
this.onChangeFixture({ fixtureId });
|
|
45888
|
+
}
|
|
45889
|
+
onEngagementTileClick(data) {
|
|
45890
|
+
this.scrollToCanvasCard();
|
|
45891
|
+
this.onClickEngagementItem(data);
|
|
45892
|
+
}
|
|
45768
45893
|
onClickClose() {
|
|
45769
45894
|
this.selectedFixture = null;
|
|
45770
45895
|
setTimeout(() => {
|
|
@@ -45786,8 +45911,9 @@ class PlanoAnalyticsComponent {
|
|
|
45786
45911
|
modalRef.componentInstance.data =
|
|
45787
45912
|
type == "footfall" ? this.footfallList : this.engagersList;
|
|
45788
45913
|
modalRef.componentInstance.type = type;
|
|
45789
|
-
modalRef.componentInstance.selectable =
|
|
45914
|
+
modalRef.componentInstance.selectable = true;
|
|
45790
45915
|
modalRef.result.then((result) => {
|
|
45916
|
+
console.log("@@ ~ result:", result);
|
|
45791
45917
|
if (result) {
|
|
45792
45918
|
this.onChangeFixture(result);
|
|
45793
45919
|
}
|
|
@@ -45801,12 +45927,35 @@ class PlanoAnalyticsComponent {
|
|
|
45801
45927
|
this.getDetails();
|
|
45802
45928
|
this.selectedFixture = null;
|
|
45803
45929
|
}
|
|
45930
|
+
scrollToCanvasCard() {
|
|
45931
|
+
this.containerRef?.nativeElement?.scrollIntoView({
|
|
45932
|
+
behavior: "smooth",
|
|
45933
|
+
block: "start",
|
|
45934
|
+
});
|
|
45935
|
+
}
|
|
45936
|
+
onClickEngagementItem(data) {
|
|
45937
|
+
console.log("@@ ~ data:", data);
|
|
45938
|
+
const fixtureId = data?.fixtureId;
|
|
45939
|
+
if (fixtureId) {
|
|
45940
|
+
const actionFixture = this.canvas
|
|
45941
|
+
.getObjects()
|
|
45942
|
+
.find((obj) => obj.objType === "fixture" && obj.fixtureId === fixtureId);
|
|
45943
|
+
if (!actionFixture)
|
|
45944
|
+
return;
|
|
45945
|
+
setTimeout(() => {
|
|
45946
|
+
this.resizeCanvas();
|
|
45947
|
+
this.fitCanvasToLayoutAnimated();
|
|
45948
|
+
}, 300);
|
|
45949
|
+
this.highlightFixture(actionFixture, true);
|
|
45950
|
+
this.selectFixture(actionFixture, data);
|
|
45951
|
+
}
|
|
45952
|
+
}
|
|
45804
45953
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoAnalyticsComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
45805
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: { floorData: "floorData" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["complianceBaseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["complianceCanvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex gap-5 flex-end align-items-center\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n <div class=\"metric-toggler\" (click)=\"showCard=!showCard\">\r\n @if(showCard) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3 scale-down\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n @if(footfallList?.length) {\r\n <div class=\"row align-items-center mx-0 py-2 border-bottom cursor-pointer list-tile\"\r\n *ngFor=\"let rankItem of topThreeFootfall; let i=index\"\r\n (click)=\"onChangeFixture({fixtureId:rankItem.fixtureDetails?._id})\">\r\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\"\r\n [ngClass]=\"rankItem?.footfallRank == 1 ? 'rank-gold' : rankItem?.footfallRank == 2 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span\r\n class=\"rank-num\">{{rankItem?.footfallRank}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{rankItem?.fixtureDetails?.header?.label}}\r\n </div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n {{ rankItem?.fixtureDetails?.productBrandName?.toString()}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('footfall')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\"\r\n *ngFor=\"let least of leastEngagers\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"least?.imageUrl ? least.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">\r\n {{least?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let non of nonEngagers\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"non?.imageUrl ? non.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{non.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{non?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Non Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\"\r\n stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <div class=\"time-selector\">\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'daily' ? 'active' : ''\"\r\n (click)=\"dataType = 'daily';getFootfallDetails()\">1D</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'weekly' ? 'active':''\"\r\n (click)=\"dataType = 'weekly';getFootfallDetails()\">1W</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'monthly' ? 'active' : ''\"\r\n (click)=\"dataType = 'monthly';getFootfallDetails()\">1M</div>\r\n </div>\r\n\r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span\r\n class=\"text-muted\">%</span></h2>\r\n </div>\r\n\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span\r\n class=\"text-muted fs-5\">mins</span></h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <div class=\"d-flex justify-content-between gap-4 w-100\">\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <span class=\"heatmap-txt\">High</span>\r\n\r\n <svg width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 18px; width: auto;\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185821)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185821\" x1=\"0\" y1=\"19.5\" x2=\"452\"\r\n y2=\"19.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#FCD6DA\" />\r\n <stop offset=\"0.0904398\" stop-color=\"#F5DFD0\" />\r\n <stop offset=\"0.182295\" stop-color=\"#FEFBD6\" />\r\n <stop offset=\"0.271796\" stop-color=\"#F9FFC9\" />\r\n <stop offset=\"0.373073\" stop-color=\"#DAF9FF\" />\r\n <stop offset=\"0.476705\" stop-color=\"#D8DBFD\" />\r\n <stop offset=\"0.570915\" stop-color=\"#E9D7FE\" />\r\n <stop offset=\"0.669837\" stop-color=\"#FAE2FF\" />\r\n <stop offset=\"0.768758\" stop-color=\"#E2E6EB\" />\r\n <stop offset=\"0.884167\" stop-color=\"#EBEDEF\" />\r\n <stop offset=\"0.980733\" stop-color=\"#FEFEFE\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n\r\n <span class=\"heatmap-txt\">Low Footfall</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <!-- Rotate Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [floorData]=\"floorData\" [startDate]=\"startDate\"\r\n [endDate]=\"endDate\" [dataType]=\"dataType\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #cardSkeleton>\r\n <div id=\"card-skeleton\"\r\n class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["#plano-analytics .invheader{background-color:#fff}#plano-analytics .w-20{width:20%}#plano-analytics .card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}#plano-analytics .card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}#plano-analytics .bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}#plano-analytics .card-body{padding:8px}#plano-analytics .rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}#plano-analytics .rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}#plano-analytics .rank-badge span{position:relative;z-index:2}#plano-analytics .rank-gold{background-color:#fef0c7;border:.35px solid #fedf89}#plano-analytics .rank-gold:before{background-color:#fffaeb;border:.35px solid #fedf89}#plano-analytics .rank-gold .rank-hash{color:#fdb022;font-weight:300}#plano-analytics .rank-gold .rank-num{color:#b54708}#plano-analytics .rank-blue{background-color:#6bcaff;border:.35px solid #6bcaff}#plano-analytics .rank-blue:before{background-color:#eaf8ff;border:.35px solid #6bcaff}#plano-analytics .rank-blue .rank-hash{color:#51c1ff;font-weight:300}#plano-analytics .rank-blue .rank-num{color:#008edf}#plano-analytics .rank-purple{background-color:#717bbc;border:.35px solid #717bbc}#plano-analytics .rank-purple:before{background-color:#f8f9fc;border:.35px solid #afb5d9}#plano-analytics .rank-purple .rank-hash{color:#717bbc;font-weight:300}#plano-analytics .rank-purple .rank-num{color:#363f72}#plano-analytics .dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}#plano-analytics .text-dark{color:#344054!important}#plano-analytics .text-muted{color:#667085!important}#plano-analytics .fw-medium{font-weight:500}#plano-analytics .fw-semibold{font-weight:600}#plano-analytics .small{font-size:14px}#plano-analytics .card-body img{width:38px;height:38px;object-fit:cover}#plano-analytics .border-bottom{border-bottom:1px solid #eaecf0!important}#plano-analytics a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}#plano-analytics a.text-primary:hover{color:#0080cc!important}#plano-analytics .metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}#plano-analytics .metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}#plano-analytics .time-selector{display:flex;flex-direction:column;gap:6px}#plano-analytics .time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}#plano-analytics .time-option.active{color:#008edf}#plano-analytics h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}#plano-analytics .text-success{color:#039855!important}#plano-analytics .text-danger{color:#f04438!important}@media (max-width: 768px){#plano-analytics .card-header{font-size:13px;padding:6px 12px}#plano-analytics h2{font-size:20px}#plano-analytics .time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){#plano-analytics .col-auto{min-width:50px}#plano-analytics .rank-badge{width:30px;height:30px;font-size:10px}#plano-analytics .rank-badge:before{width:24px;height:24px}}#plano-analytics #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#plano-analytics #header .compliance{font-size:36px;font-weight:600}#plano-analytics #header .last-check{font-size:16px;font-weight:500}#plano-analytics #body{max-height:calc(100vh - 160px)}#plano-analytics #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-analytics #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-analytics #body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#plano-analytics #body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}#plano-analytics #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}@media (max-width: 1280px) and (max-height: 730px){#plano-analytics .fixture-overview{max-width:336px!important}}@media (max-width: 1280px){#plano-analytics .scale-down{zoom:.75}}#plano-analytics .list-tile:hover{cursor:pointer;background-color:#f7f7f7}#plano-analytics #card-skeleton .shimmer{height:70px!important}#plano-analytics .metric-toggler{background-color:#fff;border:1px solid #dbdfe9;border-radius:.475rem;padding:.775rem 1rem;cursor:pointer}\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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateRangePickerComponent, selector: "lib-date-range-picker", inputs: ["value"], outputs: ["dateChange"] }, { kind: "component", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: ["fixtureDetails", "floorData", "startDate", "endDate", "dataType"], outputs: ["onClose", "changeFixture"] }] });
|
|
45954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: { floorData: "floorData" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["complianceBaseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["complianceCanvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex gap-5 flex-end align-items-center\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n <div class=\"metric-toggler\" (click)=\"showCard=!showCard\">\r\n @if(showCard) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3 scale-down\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n @if(footfallList?.length) {\r\n <div class=\"row align-items-center mx-0 py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let rankItem of topThreeFootfall; let i=index\"\n (click)=\"onFootfallTileClick(rankItem.fixtureDetails?._id)\">\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\"\r\n [ngClass]=\"rankItem?.footfallRank == 1 ? 'rank-gold' : rankItem?.footfallRank == 2 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span\r\n class=\"rank-num\">{{rankItem?.footfallRank}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{rankItem?.fixtureDetails?.header?.label}}\r\n </div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n {{ rankItem?.fixtureDetails?.productBrandName?.toString()}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('footfall')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let top of topEngagers\" (click)=\"onEngagementTileClick(top)\">\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let least of leastEngagers\" (click)=\"onEngagementTileClick(least)\">\n <div class=\"col-auto\">\r\n <img [src]=\"least?.imageUrl ? least.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">\r\n {{least?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let non of nonEngagers\" (click)=\"onEngagementTileClick(non)\">\n <div class=\"col-auto\">\r\n <img [src]=\"non?.imageUrl ? non.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{non.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{non?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Non Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\"\r\n stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <div class=\"time-selector\">\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'daily' ? 'active' : ''\"\r\n (click)=\"dataType = 'daily';getFootfallDetails()\">1D</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'weekly' ? 'active':''\"\r\n (click)=\"dataType = 'weekly';getFootfallDetails()\">1W</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'monthly' ? 'active' : ''\"\r\n (click)=\"dataType = 'monthly';getFootfallDetails()\">1M</div>\r\n </div>\r\n\r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span\r\n class=\"text-muted\">%</span></h2>\r\n </div>\r\n\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span\r\n class=\"text-muted fs-5\">mins</span></h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <div class=\"d-flex justify-content-between gap-4 w-100\">\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <span class=\"heatmap-txt\">High</span>\r\n\r\n <svg width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 18px; width: auto;\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185821)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185821\" x1=\"0\" y1=\"19.5\" x2=\"452\"\r\n y2=\"19.5\" gradientUnits=\"userSpaceOnUse\">\r\n @for (color of footfallHeatmapLegendColors; track $index) {\r\n <stop\r\n [attr.offset]=\"($index / (footfallHeatmapLegendColors.length - 1)) * 100 + '%'\"\r\n [attr.stop-color]=\"color\" />\r\n }\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n\r\n <span class=\"heatmap-txt\">Low Footfall</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <!-- Rotate Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [floorData]=\"floorData\" [startDate]=\"startDate\"\r\n [endDate]=\"endDate\" [dataType]=\"dataType\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #cardSkeleton>\r\n <div id=\"card-skeleton\"\r\n class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>\n", styles: ["#plano-analytics .invheader{background-color:#fff}#plano-analytics .w-20{width:20%}#plano-analytics .card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}#plano-analytics .card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}#plano-analytics .bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}#plano-analytics .card-body{padding:8px}#plano-analytics .rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}#plano-analytics .rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}#plano-analytics .rank-badge span{position:relative;z-index:2}#plano-analytics .rank-gold{background-color:#fef0c7;border:.35px solid #fedf89}#plano-analytics .rank-gold:before{background-color:#fffaeb;border:.35px solid #fedf89}#plano-analytics .rank-gold .rank-hash{color:#fdb022;font-weight:300}#plano-analytics .rank-gold .rank-num{color:#b54708}#plano-analytics .rank-blue{background-color:#6bcaff;border:.35px solid #6bcaff}#plano-analytics .rank-blue:before{background-color:#eaf8ff;border:.35px solid #6bcaff}#plano-analytics .rank-blue .rank-hash{color:#51c1ff;font-weight:300}#plano-analytics .rank-blue .rank-num{color:#008edf}#plano-analytics .rank-purple{background-color:#717bbc;border:.35px solid #717bbc}#plano-analytics .rank-purple:before{background-color:#f8f9fc;border:.35px solid #afb5d9}#plano-analytics .rank-purple .rank-hash{color:#717bbc;font-weight:300}#plano-analytics .rank-purple .rank-num{color:#363f72}#plano-analytics .dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}#plano-analytics .text-dark{color:#344054!important}#plano-analytics .text-muted{color:#667085!important}#plano-analytics .fw-medium{font-weight:500}#plano-analytics .fw-semibold{font-weight:600}#plano-analytics .small{font-size:14px}#plano-analytics .card-body img{width:38px;height:38px;object-fit:cover}#plano-analytics .border-bottom{border-bottom:1px solid #eaecf0!important}#plano-analytics a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}#plano-analytics a.text-primary:hover{color:#0080cc!important}#plano-analytics .metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}#plano-analytics .metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}#plano-analytics .time-selector{display:flex;flex-direction:column;gap:6px}#plano-analytics .time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}#plano-analytics .time-option.active{color:#008edf}#plano-analytics h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}#plano-analytics .text-success{color:#039855!important}#plano-analytics .text-danger{color:#f04438!important}@media (max-width: 768px){#plano-analytics .card-header{font-size:13px;padding:6px 12px}#plano-analytics h2{font-size:20px}#plano-analytics .time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){#plano-analytics .col-auto{min-width:50px}#plano-analytics .rank-badge{width:30px;height:30px;font-size:10px}#plano-analytics .rank-badge:before{width:24px;height:24px}}#plano-analytics #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#plano-analytics #header .compliance{font-size:36px;font-weight:600}#plano-analytics #header .last-check{font-size:16px;font-weight:500}#plano-analytics #body{max-height:calc(100vh - 160px)}#plano-analytics #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-analytics #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-analytics #body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#plano-analytics #body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}#plano-analytics #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}@media (max-width: 1280px) and (max-height: 730px){#plano-analytics .fixture-overview{max-width:336px!important}}@media (max-width: 1280px){#plano-analytics .scale-down{zoom:.75}}#plano-analytics .list-tile:hover{cursor:pointer;background-color:#f7f7f7}#plano-analytics #card-skeleton .shimmer{height:70px!important}#plano-analytics .metric-toggler{background-color:#fff;border:1px solid #dbdfe9;border-radius:.475rem;padding:.775rem 1rem;cursor:pointer}\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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateRangePickerComponent, selector: "lib-date-range-picker", inputs: ["value"], outputs: ["dateChange"] }, { kind: "component", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: ["fixtureDetails", "floorData", "startDate", "endDate", "dataType"], outputs: ["onClose", "changeFixture"] }] });
|
|
45806
45955
|
}
|
|
45807
45956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoAnalyticsComponent, decorators: [{
|
|
45808
45957
|
type: Component,
|
|
45809
|
-
args: [{ selector: "lib-plano-analytics", providers: [TitleCasePipe], template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex gap-5 flex-end align-items-center\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n <div class=\"metric-toggler\" (click)=\"showCard=!showCard\">\r\n @if(showCard) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3 scale-down\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n @if(footfallList?.length) {\r\n <div class=\"row align-items-center mx-0 py-2 border-bottom cursor-pointer list-tile\"\r\n *ngFor=\"let rankItem of topThreeFootfall; let i=index\"\r\n (click)=\"onChangeFixture({fixtureId:rankItem.fixtureDetails?._id})\">\r\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\"\r\n [ngClass]=\"rankItem?.footfallRank == 1 ? 'rank-gold' : rankItem?.footfallRank == 2 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span\r\n class=\"rank-num\">{{rankItem?.footfallRank}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{rankItem?.fixtureDetails?.header?.label}}\r\n </div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n {{ rankItem?.fixtureDetails?.productBrandName?.toString()}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('footfall')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\"\r\n *ngFor=\"let least of leastEngagers\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"least?.imageUrl ? least.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">\r\n {{least?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let non of nonEngagers\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"non?.imageUrl ? non.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{non.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{non?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Non Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\"\r\n stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <div class=\"time-selector\">\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'daily' ? 'active' : ''\"\r\n (click)=\"dataType = 'daily';getFootfallDetails()\">1D</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'weekly' ? 'active':''\"\r\n (click)=\"dataType = 'weekly';getFootfallDetails()\">1W</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'monthly' ? 'active' : ''\"\r\n (click)=\"dataType = 'monthly';getFootfallDetails()\">1M</div>\r\n </div>\r\n\r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span\r\n class=\"text-muted\">%</span></h2>\r\n </div>\r\n\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span\r\n class=\"text-muted fs-5\">mins</span></h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <div class=\"d-flex justify-content-between gap-4 w-100\">\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <span class=\"heatmap-txt\">High</span>\r\n\r\n <svg width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 18px; width: auto;\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185821)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185821\" x1=\"0\" y1=\"19.5\" x2=\"452\"\r\n y2=\"19.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#FCD6DA\" />\r\n <stop offset=\"0.0904398\" stop-color=\"#F5DFD0\" />\r\n <stop offset=\"0.182295\" stop-color=\"#FEFBD6\" />\r\n <stop offset=\"0.271796\" stop-color=\"#F9FFC9\" />\r\n <stop offset=\"0.373073\" stop-color=\"#DAF9FF\" />\r\n <stop offset=\"0.476705\" stop-color=\"#D8DBFD\" />\r\n <stop offset=\"0.570915\" stop-color=\"#E9D7FE\" />\r\n <stop offset=\"0.669837\" stop-color=\"#FAE2FF\" />\r\n <stop offset=\"0.768758\" stop-color=\"#E2E6EB\" />\r\n <stop offset=\"0.884167\" stop-color=\"#EBEDEF\" />\r\n <stop offset=\"0.980733\" stop-color=\"#FEFEFE\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n\r\n <span class=\"heatmap-txt\">Low Footfall</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <!-- Rotate Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [floorData]=\"floorData\" [startDate]=\"startDate\"\r\n [endDate]=\"endDate\" [dataType]=\"dataType\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #cardSkeleton>\r\n <div id=\"card-skeleton\"\r\n class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["#plano-analytics .invheader{background-color:#fff}#plano-analytics .w-20{width:20%}#plano-analytics .card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}#plano-analytics .card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}#plano-analytics .bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}#plano-analytics .card-body{padding:8px}#plano-analytics .rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}#plano-analytics .rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}#plano-analytics .rank-badge span{position:relative;z-index:2}#plano-analytics .rank-gold{background-color:#fef0c7;border:.35px solid #fedf89}#plano-analytics .rank-gold:before{background-color:#fffaeb;border:.35px solid #fedf89}#plano-analytics .rank-gold .rank-hash{color:#fdb022;font-weight:300}#plano-analytics .rank-gold .rank-num{color:#b54708}#plano-analytics .rank-blue{background-color:#6bcaff;border:.35px solid #6bcaff}#plano-analytics .rank-blue:before{background-color:#eaf8ff;border:.35px solid #6bcaff}#plano-analytics .rank-blue .rank-hash{color:#51c1ff;font-weight:300}#plano-analytics .rank-blue .rank-num{color:#008edf}#plano-analytics .rank-purple{background-color:#717bbc;border:.35px solid #717bbc}#plano-analytics .rank-purple:before{background-color:#f8f9fc;border:.35px solid #afb5d9}#plano-analytics .rank-purple .rank-hash{color:#717bbc;font-weight:300}#plano-analytics .rank-purple .rank-num{color:#363f72}#plano-analytics .dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}#plano-analytics .text-dark{color:#344054!important}#plano-analytics .text-muted{color:#667085!important}#plano-analytics .fw-medium{font-weight:500}#plano-analytics .fw-semibold{font-weight:600}#plano-analytics .small{font-size:14px}#plano-analytics .card-body img{width:38px;height:38px;object-fit:cover}#plano-analytics .border-bottom{border-bottom:1px solid #eaecf0!important}#plano-analytics a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}#plano-analytics a.text-primary:hover{color:#0080cc!important}#plano-analytics .metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}#plano-analytics .metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}#plano-analytics .time-selector{display:flex;flex-direction:column;gap:6px}#plano-analytics .time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}#plano-analytics .time-option.active{color:#008edf}#plano-analytics h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}#plano-analytics .text-success{color:#039855!important}#plano-analytics .text-danger{color:#f04438!important}@media (max-width: 768px){#plano-analytics .card-header{font-size:13px;padding:6px 12px}#plano-analytics h2{font-size:20px}#plano-analytics .time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){#plano-analytics .col-auto{min-width:50px}#plano-analytics .rank-badge{width:30px;height:30px;font-size:10px}#plano-analytics .rank-badge:before{width:24px;height:24px}}#plano-analytics #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#plano-analytics #header .compliance{font-size:36px;font-weight:600}#plano-analytics #header .last-check{font-size:16px;font-weight:500}#plano-analytics #body{max-height:calc(100vh - 160px)}#plano-analytics #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-analytics #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-analytics #body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#plano-analytics #body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}#plano-analytics #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}@media (max-width: 1280px) and (max-height: 730px){#plano-analytics .fixture-overview{max-width:336px!important}}@media (max-width: 1280px){#plano-analytics .scale-down{zoom:.75}}#plano-analytics .list-tile:hover{cursor:pointer;background-color:#f7f7f7}#plano-analytics #card-skeleton .shimmer{height:70px!important}#plano-analytics .metric-toggler{background-color:#fff;border:1px solid #dbdfe9;border-radius:.475rem;padding:.775rem 1rem;cursor:pointer}\n"] }]
|
|
45958
|
+
args: [{ selector: "lib-plano-analytics", providers: [TitleCasePipe], template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex gap-5 flex-end align-items-center\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n <div class=\"metric-toggler\" (click)=\"showCard=!showCard\">\r\n @if(showCard) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3 scale-down\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n @if(footfallList?.length) {\r\n <div class=\"row align-items-center mx-0 py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let rankItem of topThreeFootfall; let i=index\"\n (click)=\"onFootfallTileClick(rankItem.fixtureDetails?._id)\">\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\"\r\n [ngClass]=\"rankItem?.footfallRank == 1 ? 'rank-gold' : rankItem?.footfallRank == 2 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span\r\n class=\"rank-num\">{{rankItem?.footfallRank}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{rankItem?.fixtureDetails?.header?.label}}\r\n </div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n {{ rankItem?.fixtureDetails?.productBrandName?.toString()}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('footfall')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let top of topEngagers\" (click)=\"onEngagementTileClick(top)\">\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Top Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let least of leastEngagers\" (click)=\"onEngagementTileClick(least)\">\n <div class=\"col-auto\">\r\n <img [src]=\"least?.imageUrl ? least.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{least?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">\r\n {{least?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{least?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n @if(isEngagersLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom cursor-pointer list-tile\"\n *ngFor=\"let non of nonEngagers\" (click)=\"onEngagementTileClick(non)\">\n <div class=\"col-auto\">\r\n <img [src]=\"non?.imageUrl ? non.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\"\r\n alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{non.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{non?.productBrandName ?? ''}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline cursor-pointer\"\r\n (click)=\"openPopup('Non Engaged')\">\r\n View all\r\n </a>\r\n </div>\r\n }@else {\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column h-100\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(isFootfallLoading){\r\n <ng-container *ngTemplateOutlet=\"cardSkeleton\"></ng-container>\r\n }@else {\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\"\r\n stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <div class=\"time-selector\">\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'daily' ? 'active' : ''\"\r\n (click)=\"dataType = 'daily';getFootfallDetails()\">1D</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'weekly' ? 'active':''\"\r\n (click)=\"dataType = 'weekly';getFootfallDetails()\">1W</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'monthly' ? 'active' : ''\"\r\n (click)=\"dataType = 'monthly';getFootfallDetails()\">1M</div>\r\n </div>\r\n\r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span\r\n class=\"text-muted\">%</span></h2>\r\n </div>\r\n\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span\r\n class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span\r\n class=\"text-muted fs-5\">mins</span></h2>\r\n\r\n <div class=\"d-flex align-items-center gap-1 small\"\r\n [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n style=\"transform: rotate(180deg);\"\r\n *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"\r\n *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path\r\n d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\"\r\n stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev\r\n {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <div class=\"d-flex justify-content-between gap-4 w-100\">\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <span class=\"heatmap-txt\">High</span>\r\n\r\n <svg width=\"452\" height=\"39\" viewBox=\"0 0 452 39\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 18px; width: auto;\">\r\n <rect width=\"452\" height=\"39\" rx=\"6\" fill=\"url(#paint0_linear_6676_185821)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear_6676_185821\" x1=\"0\" y1=\"19.5\" x2=\"452\"\r\n y2=\"19.5\" gradientUnits=\"userSpaceOnUse\">\r\n @for (color of footfallHeatmapLegendColors; track $index) {\r\n <stop\r\n [attr.offset]=\"($index / (footfallHeatmapLegendColors.length - 1)) * 100 + '%'\"\r\n [attr.stop-color]=\"color\" />\r\n }\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n\r\n <span class=\"heatmap-txt\">Low Footfall</span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <!-- Rotate Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\"\r\n stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\"\r\n class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [floorData]=\"floorData\" [startDate]=\"startDate\"\r\n [endDate]=\"endDate\" [dataType]=\"dataType\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #cardSkeleton>\r\n <div id=\"card-skeleton\"\r\n class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>\n", styles: ["#plano-analytics .invheader{background-color:#fff}#plano-analytics .w-20{width:20%}#plano-analytics .card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}#plano-analytics .card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}#plano-analytics .bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}#plano-analytics .card-body{padding:8px}#plano-analytics .rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}#plano-analytics .rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}#plano-analytics .rank-badge span{position:relative;z-index:2}#plano-analytics .rank-gold{background-color:#fef0c7;border:.35px solid #fedf89}#plano-analytics .rank-gold:before{background-color:#fffaeb;border:.35px solid #fedf89}#plano-analytics .rank-gold .rank-hash{color:#fdb022;font-weight:300}#plano-analytics .rank-gold .rank-num{color:#b54708}#plano-analytics .rank-blue{background-color:#6bcaff;border:.35px solid #6bcaff}#plano-analytics .rank-blue:before{background-color:#eaf8ff;border:.35px solid #6bcaff}#plano-analytics .rank-blue .rank-hash{color:#51c1ff;font-weight:300}#plano-analytics .rank-blue .rank-num{color:#008edf}#plano-analytics .rank-purple{background-color:#717bbc;border:.35px solid #717bbc}#plano-analytics .rank-purple:before{background-color:#f8f9fc;border:.35px solid #afb5d9}#plano-analytics .rank-purple .rank-hash{color:#717bbc;font-weight:300}#plano-analytics .rank-purple .rank-num{color:#363f72}#plano-analytics .dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}#plano-analytics .text-dark{color:#344054!important}#plano-analytics .text-muted{color:#667085!important}#plano-analytics .fw-medium{font-weight:500}#plano-analytics .fw-semibold{font-weight:600}#plano-analytics .small{font-size:14px}#plano-analytics .card-body img{width:38px;height:38px;object-fit:cover}#plano-analytics .border-bottom{border-bottom:1px solid #eaecf0!important}#plano-analytics a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}#plano-analytics a.text-primary:hover{color:#0080cc!important}#plano-analytics .metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}#plano-analytics .metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}#plano-analytics .time-selector{display:flex;flex-direction:column;gap:6px}#plano-analytics .time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}#plano-analytics .time-option.active{color:#008edf}#plano-analytics h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}#plano-analytics .text-success{color:#039855!important}#plano-analytics .text-danger{color:#f04438!important}@media (max-width: 768px){#plano-analytics .card-header{font-size:13px;padding:6px 12px}#plano-analytics h2{font-size:20px}#plano-analytics .time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){#plano-analytics .col-auto{min-width:50px}#plano-analytics .rank-badge{width:30px;height:30px;font-size:10px}#plano-analytics .rank-badge:before{width:24px;height:24px}}#plano-analytics #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#plano-analytics #header .compliance{font-size:36px;font-weight:600}#plano-analytics #header .last-check{font-size:16px;font-weight:500}#plano-analytics #body{max-height:calc(100vh - 160px)}#plano-analytics #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-analytics #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-analytics #body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#plano-analytics #body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}#plano-analytics #heatmap-txt{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;background:#475467}@media (max-width: 1280px) and (max-height: 730px){#plano-analytics .fixture-overview{max-width:336px!important}}@media (max-width: 1280px){#plano-analytics .scale-down{zoom:.75}}#plano-analytics .list-tile:hover{cursor:pointer;background-color:#f7f7f7}#plano-analytics #card-skeleton .shimmer{height:70px!important}#plano-analytics .metric-toggler{background-color:#fff;border:1px solid #dbdfe9;border-radius:.475rem;padding:.775rem 1rem;cursor:pointer}\n"] }]
|
|
45810
45959
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i1$1.NgbModal }], propDecorators: { floorData: [{
|
|
45811
45960
|
type: Input
|
|
45812
45961
|
}], canvasEl: [{
|
|
@@ -55422,13 +55571,343 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
55422
55571
|
}] } });
|
|
55423
55572
|
|
|
55424
55573
|
class FixturePreviewComponent {
|
|
55425
|
-
|
|
55426
|
-
|
|
55574
|
+
gs;
|
|
55575
|
+
cd;
|
|
55576
|
+
fixtureData;
|
|
55577
|
+
imgCDN;
|
|
55578
|
+
clientId;
|
|
55579
|
+
shelfColors = SHELF_COLORS;
|
|
55580
|
+
sectionByZones = [];
|
|
55581
|
+
isVMInitialized = false;
|
|
55582
|
+
isBCInitialized = false;
|
|
55583
|
+
isPageLoading = true;
|
|
55584
|
+
destroy$ = new Subject();
|
|
55585
|
+
constructor(gs, cd) {
|
|
55586
|
+
this.gs = gs;
|
|
55587
|
+
this.cd = cd;
|
|
55588
|
+
}
|
|
55589
|
+
ngOnInit() {
|
|
55590
|
+
this.gs.environment
|
|
55591
|
+
.pipe(takeUntil(this.destroy$))
|
|
55592
|
+
.subscribe((env) => (this.imgCDN = env.planogramCDN));
|
|
55593
|
+
this.gs.dataRangeValue
|
|
55594
|
+
.pipe(takeUntil(this.destroy$))
|
|
55595
|
+
.subscribe(async (data) => {
|
|
55596
|
+
if (data?.client) {
|
|
55597
|
+
this.clientId = data?.client;
|
|
55598
|
+
}
|
|
55599
|
+
else {
|
|
55600
|
+
let headerData = JSON.parse(localStorage.getItem("header-filters"));
|
|
55601
|
+
this.clientId = headerData?.client;
|
|
55602
|
+
}
|
|
55603
|
+
});
|
|
55604
|
+
}
|
|
55605
|
+
ngOnChanges(changes) {
|
|
55606
|
+
if (changes["fixtureData"]?.currentValue) {
|
|
55607
|
+
console.log("@@ ~ fixtureData:", this.fixtureData);
|
|
55608
|
+
setTimeout(() => {
|
|
55609
|
+
this.applyShelfColors();
|
|
55610
|
+
this.handleVmPositionAndSize();
|
|
55611
|
+
});
|
|
55612
|
+
}
|
|
55613
|
+
}
|
|
55614
|
+
ngAfterViewChecked() {
|
|
55615
|
+
if (!this.isBCInitialized) {
|
|
55616
|
+
this.isBCInitialized = this.applyShelfColors();
|
|
55617
|
+
}
|
|
55618
|
+
if (!this.isVMInitialized) {
|
|
55619
|
+
this.isVMInitialized = this.handleVmPositionAndSize();
|
|
55620
|
+
}
|
|
55621
|
+
}
|
|
55622
|
+
handleVmPositionAndSize() {
|
|
55623
|
+
const viewPort = document.getElementById("body-block");
|
|
55624
|
+
if (!viewPort)
|
|
55625
|
+
return false;
|
|
55626
|
+
const bodyWidth = viewPort.offsetWidth;
|
|
55627
|
+
const header = document.getElementById("header-block");
|
|
55628
|
+
const footer = document.getElementById("footer-block");
|
|
55629
|
+
if (header && footer) {
|
|
55630
|
+
header.style.width = `${bodyWidth}px`;
|
|
55631
|
+
footer.style.width = `${bodyWidth}px`;
|
|
55632
|
+
}
|
|
55633
|
+
this.fixtureData?.vmConfig?.forEach((e, i) => {
|
|
55634
|
+
let startShelf = e?.startYPosition ?? 1;
|
|
55635
|
+
let endShelf = e?.endYPosition ?? this.fixtureData?.shelfConfig?.length ?? 1;
|
|
55636
|
+
const vm = viewPort.querySelector(`#vm${i}`);
|
|
55637
|
+
if (!vm)
|
|
55638
|
+
return;
|
|
55639
|
+
let x = 0;
|
|
55640
|
+
let y = 0;
|
|
55641
|
+
let yStart = 0;
|
|
55642
|
+
for (let k = 1; k < startShelf; k++) {
|
|
55643
|
+
const s = getShelfDiv(k);
|
|
55644
|
+
if (!s)
|
|
55645
|
+
return;
|
|
55646
|
+
yStart += s.offsetHeight;
|
|
55647
|
+
}
|
|
55648
|
+
let placementHeight = 0;
|
|
55649
|
+
let placementWidth = bodyWidth;
|
|
55650
|
+
for (let k = startShelf; k <= endShelf; k++) {
|
|
55651
|
+
const s = getShelfDiv(k);
|
|
55652
|
+
if (!s)
|
|
55653
|
+
return;
|
|
55654
|
+
placementHeight += s.offsetHeight;
|
|
55655
|
+
}
|
|
55656
|
+
let defaultW = placementWidth / 3;
|
|
55657
|
+
let defaultH = placementHeight / 3;
|
|
55658
|
+
let width = defaultW;
|
|
55659
|
+
let height = defaultH;
|
|
55660
|
+
switch (e?.xZone) {
|
|
55661
|
+
case "left":
|
|
55662
|
+
x = 0;
|
|
55663
|
+
width = defaultW;
|
|
55664
|
+
break;
|
|
55665
|
+
case "right":
|
|
55666
|
+
width = defaultW;
|
|
55667
|
+
x = bodyWidth - width;
|
|
55668
|
+
break;
|
|
55669
|
+
case "middle":
|
|
55670
|
+
width = defaultW;
|
|
55671
|
+
x = (bodyWidth - width) / 2;
|
|
55672
|
+
break;
|
|
55673
|
+
case "stretch":
|
|
55674
|
+
width = bodyWidth;
|
|
55675
|
+
x = 0;
|
|
55676
|
+
break;
|
|
55677
|
+
}
|
|
55678
|
+
switch (e?.yZone) {
|
|
55679
|
+
case "top":
|
|
55680
|
+
height = placementHeight < defaultH ? placementHeight - 20 : defaultH;
|
|
55681
|
+
y = yStart;
|
|
55682
|
+
break;
|
|
55683
|
+
case "middle":
|
|
55684
|
+
height = placementHeight < defaultH ? placementHeight - 20 : defaultH;
|
|
55685
|
+
y = (placementHeight - height) / 2 + yStart;
|
|
55686
|
+
break;
|
|
55687
|
+
case "bottom":
|
|
55688
|
+
height = placementHeight < defaultH ? placementHeight - 20 : defaultH;
|
|
55689
|
+
y = placementHeight - height + yStart;
|
|
55690
|
+
break;
|
|
55691
|
+
case "stretch":
|
|
55692
|
+
height = placementHeight;
|
|
55693
|
+
y = yStart;
|
|
55694
|
+
break;
|
|
55695
|
+
}
|
|
55696
|
+
vm.style.width = `${width}px`;
|
|
55697
|
+
vm.style.height = ` ${height}px`;
|
|
55698
|
+
vm.style.transform = `translate(${x}px, ${y}px)`;
|
|
55699
|
+
function getShelfDiv(k) {
|
|
55700
|
+
return (viewPort.querySelector(`#shelf${k}`) ||
|
|
55701
|
+
viewPort.querySelector(`#tray${k}`) ||
|
|
55702
|
+
viewPort.querySelector(`#vmonly${k}`));
|
|
55703
|
+
}
|
|
55704
|
+
});
|
|
55705
|
+
return true;
|
|
55706
|
+
}
|
|
55707
|
+
applyShelfColors() {
|
|
55708
|
+
const bodies = document.getElementById("body-block");
|
|
55709
|
+
if (!bodies)
|
|
55710
|
+
return false;
|
|
55711
|
+
const bodyChildren = Array.from(bodies?.children ?? []);
|
|
55712
|
+
const shelfDivs = bodyChildren
|
|
55713
|
+
.map((div) => div)
|
|
55714
|
+
.filter((d) => d?.id.includes("shelfContainer"));
|
|
55715
|
+
if (!shelfDivs)
|
|
55716
|
+
return false;
|
|
55717
|
+
const adjust = 253;
|
|
55718
|
+
switch (this.fixtureData?.productResolutionLevel) {
|
|
55719
|
+
case "L1": //fixture
|
|
55720
|
+
shelfDivs.forEach((d) => {
|
|
55721
|
+
if (d) {
|
|
55722
|
+
d.style.backgroundColor = this.shelfColors[0].bg;
|
|
55723
|
+
d.style.border = `1.4px solid ${this.shelfColors[0].border}`;
|
|
55724
|
+
}
|
|
55725
|
+
});
|
|
55726
|
+
break;
|
|
55727
|
+
case "L3": //section
|
|
55728
|
+
{
|
|
55729
|
+
const shelves = shelfDivs
|
|
55730
|
+
.map((div) => div.lastElementChild?.tagName.toLowerCase() === "div"
|
|
55731
|
+
? div.lastElementChild
|
|
55732
|
+
: null)
|
|
55733
|
+
.filter(Boolean);
|
|
55734
|
+
this.constructSequentialSection(shelves);
|
|
55735
|
+
const sectionArray = this.groupShelvesByZone(this.fixtureData?.shelfConfig ?? []);
|
|
55736
|
+
const allSectionShelves = [];
|
|
55737
|
+
sectionArray.forEach((se, i) => {
|
|
55738
|
+
const shelfIds = se.shelves?.map((sh) => sh.replace(/\s/g, "").toLowerCase()) ??
|
|
55739
|
+
[];
|
|
55740
|
+
allSectionShelves.push(...shelfIds);
|
|
55741
|
+
const secDivs = shelves.filter((item) => shelfIds?.includes(item?.id ?? ""));
|
|
55742
|
+
secDivs.forEach((d) => {
|
|
55743
|
+
if (d) {
|
|
55744
|
+
d.style.backgroundColor = this.shelfColors[i].bg;
|
|
55745
|
+
d.style.border = `1.4px solid ${this.shelfColors[i].border}`;
|
|
55746
|
+
}
|
|
55747
|
+
});
|
|
55748
|
+
});
|
|
55749
|
+
const unassignedShelves = shelfDivs.filter((item) => !allSectionShelves.includes(item.id));
|
|
55750
|
+
unassignedShelves.forEach((d) => (d.style.backgroundColor = "white"));
|
|
55751
|
+
let sectionGroupHeight = 0;
|
|
55752
|
+
setTimeout(() => {
|
|
55753
|
+
this.sectionByZones.forEach((sz, i) => {
|
|
55754
|
+
const currentSectionHeight = sz.section.shelfDivs.reduce((h, d) => h + (d?.offsetHeight ?? 0), 0);
|
|
55755
|
+
const currentSectionWidth = sz.section.shelfDivs[0]?.offsetWidth ?? 345;
|
|
55756
|
+
const bc = bodies.querySelector(`#brand-category${i}`);
|
|
55757
|
+
if (bc) {
|
|
55758
|
+
const secBg = rgbToHex(sz.section.shelfDivs[0]?.style.backgroundColor);
|
|
55759
|
+
const color = this.shelfColors.find((c) => c.bg === secBg) ??
|
|
55760
|
+
this.shelfColors[i];
|
|
55761
|
+
bc.style.borderColor = color.border;
|
|
55762
|
+
bc.style.backgroundColor = "#fff";
|
|
55763
|
+
const bcX = (currentSectionWidth - bc.offsetWidth) / 2;
|
|
55764
|
+
const bcY = (currentSectionHeight - bc.offsetHeight) / 2 +
|
|
55765
|
+
sectionGroupHeight;
|
|
55766
|
+
bc.style.transform = `translate(${bcX + adjust}px, ${bcY}px)`;
|
|
55767
|
+
sectionGroupHeight += currentSectionHeight;
|
|
55768
|
+
}
|
|
55769
|
+
});
|
|
55770
|
+
}, 0);
|
|
55771
|
+
}
|
|
55772
|
+
break;
|
|
55773
|
+
case "L2": //shelf
|
|
55774
|
+
{
|
|
55775
|
+
shelfDivs.forEach((div, i) => {
|
|
55776
|
+
div.style.backgroundColor = this.shelfColors[i].bg;
|
|
55777
|
+
div.style.border = `1.4px solid ${this.shelfColors[i].border}`;
|
|
55778
|
+
const bc = div.querySelector(`#brand-category${i}`);
|
|
55779
|
+
if (!bc)
|
|
55780
|
+
return;
|
|
55781
|
+
const bcX = (div.offsetWidth - bc.offsetWidth) / 2;
|
|
55782
|
+
const bcY = (div.offsetHeight - bc.offsetHeight) / 2;
|
|
55783
|
+
bc.style.borderColor = this.shelfColors[i].border;
|
|
55784
|
+
bc.style.backgroundColor = this.shelfColors[i].textBg;
|
|
55785
|
+
bc.style.transform = `translate(${bcX + adjust}px, ${bcY}px)`;
|
|
55786
|
+
});
|
|
55787
|
+
}
|
|
55788
|
+
break;
|
|
55789
|
+
case "L4": //spot
|
|
55790
|
+
{
|
|
55791
|
+
shelfDivs.forEach((d) => {
|
|
55792
|
+
if (d) {
|
|
55793
|
+
d.style.backgroundColor = this.shelfColors[0].bg;
|
|
55794
|
+
d.style.border = `1.4px solid ${this.shelfColors[0].border}`;
|
|
55795
|
+
}
|
|
55796
|
+
});
|
|
55797
|
+
}
|
|
55798
|
+
break;
|
|
55799
|
+
default:
|
|
55800
|
+
shelfDivs.forEach((d) => {
|
|
55801
|
+
if (d) {
|
|
55802
|
+
d.style.backgroundColor = this.shelfColors[0].bg;
|
|
55803
|
+
d.style.border = `1.4px solid ${this.shelfColors[0].border}`;
|
|
55804
|
+
}
|
|
55805
|
+
});
|
|
55806
|
+
break;
|
|
55807
|
+
}
|
|
55808
|
+
return true;
|
|
55809
|
+
}
|
|
55810
|
+
constructSequentialSection(shelfDivs) {
|
|
55811
|
+
const newSectionByZones = [];
|
|
55812
|
+
let pZone = null;
|
|
55813
|
+
for (let i = 0; i < this.fixtureData?.shelfConfig.length; i++) {
|
|
55814
|
+
const s = this.fixtureData?.shelfConfig[i];
|
|
55815
|
+
const zone = s.zone || "";
|
|
55816
|
+
const shelfId = `${s.shelfType}${s.shelfNumber}`;
|
|
55817
|
+
const shelfDiv = shelfDivs.find((d) => d?.id === shelfId);
|
|
55818
|
+
if (zone === "")
|
|
55819
|
+
continue;
|
|
55820
|
+
// const hasImproperProduct =
|
|
55821
|
+
// (s?.products?.length ?? 0) === 0 ||
|
|
55822
|
+
(s?.products ?? []).some((p) => p.status !== "proper");
|
|
55823
|
+
const shelfCapacity = s.shelfType === "tray"
|
|
55824
|
+
? s.productPerShelf * s.trayRows
|
|
55825
|
+
: s.productPerShelf;
|
|
55826
|
+
if (zone !== pZone) {
|
|
55827
|
+
newSectionByZones.push({
|
|
55828
|
+
zone,
|
|
55829
|
+
section: {
|
|
55830
|
+
brands: s.productBrandName ?? [],
|
|
55831
|
+
categories: s.productCategory ?? [],
|
|
55832
|
+
shelves: [shelfId],
|
|
55833
|
+
shelfDivs: [shelfDiv],
|
|
55834
|
+
capacity: shelfCapacity,
|
|
55835
|
+
color: this.shelfColors[i],
|
|
55836
|
+
},
|
|
55837
|
+
});
|
|
55838
|
+
pZone = zone;
|
|
55839
|
+
}
|
|
55840
|
+
else {
|
|
55841
|
+
const section = newSectionByZones[newSectionByZones.length - 1].section;
|
|
55842
|
+
section.shelves.push(shelfId);
|
|
55843
|
+
section.shelfDivs.push(shelfDiv);
|
|
55844
|
+
section.capacity += shelfCapacity;
|
|
55845
|
+
if (!section.brands.length)
|
|
55846
|
+
section.brands = s?.productBrandName ?? [];
|
|
55847
|
+
if (!section.categories.length)
|
|
55848
|
+
section.categories = s?.productCategory ?? [];
|
|
55849
|
+
}
|
|
55850
|
+
}
|
|
55851
|
+
this.sectionByZones = [...newSectionByZones];
|
|
55852
|
+
this.cd.detectChanges();
|
|
55853
|
+
}
|
|
55854
|
+
groupShelvesByZone(input) {
|
|
55855
|
+
const zoneMap = {};
|
|
55856
|
+
for (const item of input) {
|
|
55857
|
+
const zone = item?.zone ?? "";
|
|
55858
|
+
const shelfLabel = `${item.shelfType} ${item.shelfNumber}`;
|
|
55859
|
+
if (!zoneMap[zone]) {
|
|
55860
|
+
zoneMap[zone] = {
|
|
55861
|
+
shelves: [],
|
|
55862
|
+
productBrandName: this.fixtureData?.productResolutionLevel === "L2"
|
|
55863
|
+
? item.productBrandName
|
|
55864
|
+
: [],
|
|
55865
|
+
productCategory: this.fixtureData?.productResolutionLevel === "L2"
|
|
55866
|
+
? item.productCategory
|
|
55867
|
+
: [],
|
|
55868
|
+
zone: zone,
|
|
55869
|
+
};
|
|
55870
|
+
}
|
|
55871
|
+
zoneMap[zone]?.shelves?.push(shelfLabel);
|
|
55872
|
+
}
|
|
55873
|
+
return Object.values(zoneMap);
|
|
55874
|
+
}
|
|
55875
|
+
applySectionConfigToShelves(sections) {
|
|
55876
|
+
const sectionMap = new Map();
|
|
55877
|
+
for (const section of sections) {
|
|
55878
|
+
for (const shelfLabel of section.shelves) {
|
|
55879
|
+
sectionMap.set(shelfLabel, {
|
|
55880
|
+
zone: section.zone,
|
|
55881
|
+
productBrandName: section.productBrandName,
|
|
55882
|
+
productCategory: section.productCategory,
|
|
55883
|
+
});
|
|
55884
|
+
}
|
|
55885
|
+
}
|
|
55886
|
+
// Apply overrides to matching shelves
|
|
55887
|
+
return (this.fixtureData?.shelfConfig?.map((shelf) => {
|
|
55888
|
+
const shelfLabel = `${shelf.shelfType} ${shelf.shelfNumber}`;
|
|
55889
|
+
const override = sectionMap.get(shelfLabel);
|
|
55890
|
+
return {
|
|
55891
|
+
...shelf,
|
|
55892
|
+
zone: override?.zone || "",
|
|
55893
|
+
productBrandName: override?.productBrandName ?? [],
|
|
55894
|
+
productCategory: override?.productCategory ?? [],
|
|
55895
|
+
};
|
|
55896
|
+
}) ?? []);
|
|
55897
|
+
}
|
|
55898
|
+
ngOnDestroy() {
|
|
55899
|
+
this.destroy$.next();
|
|
55900
|
+
this.destroy$.complete();
|
|
55901
|
+
}
|
|
55902
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixturePreviewComponent, deps: [{ token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
55903
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixturePreviewComponent, isStandalone: true, selector: "fixture-preview", inputs: { fixtureData: "fixtureData" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"fixture-preview\">\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureData?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block\" class=\"body-block\">\r\n <div *ngIf=\"fixtureData?.vmConfig?.length\">\r\n <ng-container *ngFor=\"let vm of fixtureData?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN+vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixtureData?.productResolutionLevel === 'L1'\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"fixtureData?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixtureData?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixtureData?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixtureData?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span class=\"badge inactive mt-1\">\r\n Capacity {{fixtureData?.fixtureCapacity }}\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of fixtureData?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixtureData?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixtureData?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixtureData?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <div class=\"d-flex\">\r\n <span class=\"badge me-1\"\r\n [ngStyle]=\"{'background-color':item.section.color.textBg,'color':item.section.color.text}\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n </div>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'shelfContainer' + i\" *ngFor=\"let item of fixtureData?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixtureData?.productResolutionLevel === 'L2'\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <span class=\"badge inactive\">\r\n Capacity {{item?.productPerShelf }}\r\n </span>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n <!-- Footer block -->\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureData?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n</section>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#fixture-preview .wall-viewport{align-items:self-start}#fixture-preview .body-block{position:relative;width:fit-content}#fixture-preview .body-block .block{border:none}#fixture-preview #fixture-level .brand-category{position:absolute;width:150px;overflow:hidden;padding:4px;border-radius:8px;border:2px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-preview #fixture-level .brand,#fixture-preview #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-preview #fixture-level .category{margin-top:12px}#fixture-preview #section-level .brand-category{position:absolute;width:150px;overflow:hidden;padding:4px;border-radius:8px;border:2px solid var(--Primary-200, #99daff);transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-preview #section-level .brand,#fixture-preview #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-preview #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-preview #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-preview #section-level .separator{margin:0 4px;font-weight:600}#fixture-preview #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-preview #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-preview #shelf-level .brand-category{position:absolute;width:150px;overflow:hidden;padding:8px 4px;border-radius:8px;border:2px solid var(--Primary-200, #99daff);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-preview #shelf-level .brand,#fixture-preview #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-preview #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-preview #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-preview #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-preview .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-preview .header-block{width:fit-content}#fixture-preview .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-preview .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-preview .sub-footer{position:relative;width:48%}#fixture-preview img{width:100%;height:100%;display:block}#fixture-preview .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-preview .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-preview .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}.hero-block{background-color:#f9fafb;display:flex;flex-direction:column;gap:6px;padding:12px;justify-content:center;align-items:center;margin:24px 12px}.hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}.hero-block p{font-size:14px;font-weight:400;color:#475467;margin:0 0 8px}.fixture-image{margin-bottom:12px}.fixture-image img{object-fit:contain;width:100%}@media (max-width: 1280px){.scale-down{zoom:.55}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
55427
55904
|
}
|
|
55428
55905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixturePreviewComponent, decorators: [{
|
|
55429
55906
|
type: Component,
|
|
55430
|
-
args: [{ selector: "fixture-preview", standalone: true, template: "<p>fixture-preview works!</p>\r\n" }]
|
|
55431
|
-
}] }
|
|
55907
|
+
args: [{ selector: "fixture-preview", standalone: true, imports: [NgIf, NgFor, NgbTooltip, NgStyle], template: "<section id=\"fixture-preview\">\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureData?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block\" class=\"body-block\">\r\n <div *ngIf=\"fixtureData?.vmConfig?.length\">\r\n <ng-container *ngFor=\"let vm of fixtureData?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN+vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixtureData?.productResolutionLevel === 'L1'\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"fixtureData?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixtureData?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixtureData?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixtureData?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span class=\"badge inactive mt-1\">\r\n Capacity {{fixtureData?.fixtureCapacity }}\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of fixtureData?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixtureData?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixtureData?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixtureData?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <div class=\"d-flex\">\r\n <span class=\"badge me-1\"\r\n [ngStyle]=\"{'background-color':item.section.color.textBg,'color':item.section.color.text}\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n </div>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'shelfContainer' + i\" *ngFor=\"let item of fixtureData?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixtureData?.productResolutionLevel === 'L2'\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <span class=\"badge inactive\">\r\n Capacity {{item?.productPerShelf }}\r\n </span>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n <!-- Footer block -->\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureData?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n</section>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#fixture-preview .wall-viewport{align-items:self-start}#fixture-preview .body-block{position:relative;width:fit-content}#fixture-preview .body-block .block{border:none}#fixture-preview #fixture-level .brand-category{position:absolute;width:150px;overflow:hidden;padding:4px;border-radius:8px;border:2px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-preview #fixture-level .brand,#fixture-preview #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-preview #fixture-level .category{margin-top:12px}#fixture-preview #section-level .brand-category{position:absolute;width:150px;overflow:hidden;padding:4px;border-radius:8px;border:2px solid var(--Primary-200, #99daff);transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-preview #section-level .brand,#fixture-preview #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-preview #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-preview #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-preview #section-level .separator{margin:0 4px;font-weight:600}#fixture-preview #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-preview #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-preview #shelf-level .brand-category{position:absolute;width:150px;overflow:hidden;padding:8px 4px;border-radius:8px;border:2px solid var(--Primary-200, #99daff);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-preview #shelf-level .brand,#fixture-preview #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-preview #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-preview #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-preview #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-preview .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-preview .header-block{width:fit-content}#fixture-preview .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-preview .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-preview .sub-footer{position:relative;width:48%}#fixture-preview img{width:100%;height:100%;display:block}#fixture-preview .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-preview .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-preview .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}.hero-block{background-color:#f9fafb;display:flex;flex-direction:column;gap:6px;padding:12px;justify-content:center;align-items:center;margin:24px 12px}.hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}.hero-block p{font-size:14px;font-weight:400;color:#475467;margin:0 0 8px}.fixture-image{margin-bottom:12px}.fixture-image img{object-fit:contain;width:100%}@media (max-width: 1280px){.scale-down{zoom:.55}}\n"] }]
|
|
55908
|
+
}], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { fixtureData: [{
|
|
55909
|
+
type: Input
|
|
55910
|
+
}] } });
|
|
55432
55911
|
|
|
55433
55912
|
class OnboardFixtureComponent {
|
|
55434
55913
|
fixtureData;
|
|
@@ -55439,18 +55918,17 @@ class OnboardFixtureComponent {
|
|
|
55439
55918
|
if (changes["fixtureData"]?.currentValue) {
|
|
55440
55919
|
this.fixtureData.actualShelves =
|
|
55441
55920
|
this.fixtureData.shelfConfig?.filter((s) => s.shelfType != "vmonly") ?? [];
|
|
55442
|
-
console.log("@@ ~ this.fixtureData:", this.fixtureData);
|
|
55443
55921
|
}
|
|
55444
55922
|
}
|
|
55445
55923
|
onClickClose() {
|
|
55446
55924
|
this.onClose.emit("");
|
|
55447
55925
|
}
|
|
55448
55926
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardFixtureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55449
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardFixtureComponent, isStandalone: true, selector: "onboard-fixture", inputs: { fixtureData: "fixtureData", isAllocationRun: "isAllocationRun", allFixtures: "allFixtures" }, outputs: { onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n @if(isAllocationRun){\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n <!-- <fixture-preview></fixture-preview> -->\r\n }\r\n\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n }@else {\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n\r\n\r\n }\r\n\r\n\r\n <!-- @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n } -->\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"], dependencies: [{ kind: "component", type: IvmLogicExplorerComponent, selector: "ivm-logic-explorer", inputs: ["fixtures", "selectedFixture"] }] });
|
|
55927
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardFixtureComponent, isStandalone: true, selector: "onboard-fixture", inputs: { fixtureData: "fixtureData", isAllocationRun: "isAllocationRun", allFixtures: "allFixtures" }, outputs: { onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n @if(isAllocationRun){\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n \r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n \r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n \r\n <p>Shelves: {{fixtureData?.actualShelves?.length}}</p>\r\n\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n \r\n <p>Capacity: {{fixtureData?.fixtureCapacity}}</p>\r\n </div>\r\n </div>\r\n\r\n <fixture-preview [fixtureData]=\"fixtureData\"></fixture-preview>\r\n }\r\n\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n }@else {\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n\r\n\r\n }\r\n\r\n\r\n <!-- @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n } -->\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"], dependencies: [{ kind: "component", type: IvmLogicExplorerComponent, selector: "ivm-logic-explorer", inputs: ["fixtures", "selectedFixture"] }, { kind: "component", type: FixturePreviewComponent, selector: "fixture-preview", inputs: ["fixtureData"] }] });
|
|
55450
55928
|
}
|
|
55451
55929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardFixtureComponent, decorators: [{
|
|
55452
55930
|
type: Component,
|
|
55453
|
-
args: [{ selector: "onboard-fixture", standalone: true, imports: [IvmLogicExplorerComponent, FixturePreviewComponent], template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n @if(isAllocationRun){\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n <!-- <fixture-preview></fixture-preview> -->\r\n }\r\n\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n }@else {\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n\r\n\r\n }\r\n\r\n\r\n <!-- @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n } -->\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"] }]
|
|
55931
|
+
args: [{ selector: "onboard-fixture", standalone: true, imports: [IvmLogicExplorerComponent, FixturePreviewComponent], template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n @if(isAllocationRun){\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n \r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n \r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n \r\n <p>Shelves: {{fixtureData?.actualShelves?.length}}</p>\r\n\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n \r\n <p>Capacity: {{fixtureData?.fixtureCapacity}}</p>\r\n </div>\r\n </div>\r\n\r\n <fixture-preview [fixtureData]=\"fixtureData\"></fixture-preview>\r\n }\r\n\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n }@else {\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n\r\n\r\n }\r\n\r\n\r\n <!-- @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n } -->\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"] }]
|
|
55454
55932
|
}], propDecorators: { fixtureData: [{
|
|
55455
55933
|
type: Input
|
|
55456
55934
|
}], isAllocationRun: [{
|
|
@@ -59170,11 +59648,11 @@ class OnboardStorePlanoComponent {
|
|
|
59170
59648
|
this.destroy$.complete();
|
|
59171
59649
|
}
|
|
59172
59650
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
59173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\" class=\"btn btn-outline shadow-sm bg-white\"\r\n (click)=\"updateLayout(true)\">\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button style=\"padding: 8px 20px !important\" type=\"button\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap \" (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\" (onClose)=\"\r\n togglePanel('right');selectedFixtureData = null\" [fixtureData]=\"selectedFixtureData\"\r\n [isAllocationRun]=\"isAllocationRun\" [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
|
|
59651
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\" class=\"btn btn-outline shadow-sm bg-white\"\r\n (click)=\"updateLayout(true)\">\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button style=\"padding: 8px 20px !important\" type=\"button\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap \" (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
|
|
59174
59652
|
}
|
|
59175
59653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, decorators: [{
|
|
59176
59654
|
type: Component,
|
|
59177
|
-
args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\" class=\"btn btn-outline shadow-sm bg-white\"\r\n (click)=\"updateLayout(true)\">\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button style=\"padding: 8px 20px !important\" type=\"button\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap \" (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\" (onClose)=\"\r\n togglePanel('right');selectedFixtureData = null\" [fixtureData]=\"selectedFixtureData\"\r\n [isAllocationRun]=\"isAllocationRun\" [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
59655
|
+
args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n [style]=\"'width:' + getProgressValue + '%'\"\r\n [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\"\r\n [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n {{ getStatusText }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div\r\n [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }}\r\n {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\"\r\n stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\"\r\n ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone\r\n (dndDrop)=\"onDrop($event, i, j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\"\r\n [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\"\r\n [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container\r\n *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"otherElementList\"\r\n [id]=\"'elementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\"\r\n class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\"\r\n [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone\r\n (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\"\r\n class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n style=\"cursor: move; opacity: 0.5\"\r\n width=\"25px\" viewBox=\"0 0 16 16\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select\r\n formControlName=\"fixtureConfigId\"\r\n [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n [data]=\"fixtureTemplates\"\r\n [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container\r\n *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element\r\n {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n [id]=\"'floorElementLabel' + j\"\r\n formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input\r\n *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n type=\"text\" class=\"form-control mt-2\"\r\n formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <!-- Cancel edit -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'allocationPending'){\r\n <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Save -->\r\n @if(layoutForm.enabled){\r\n @if(getStatus === 'draft'){\r\n <button type=\"button\" class=\"btn btn-outline shadow-sm bg-white\"\r\n (click)=\"updateLayout(true)\">\r\n Save as Draft\r\n </button>\r\n }@else{\r\n <button style=\"padding: 8px 20px !important\" type=\"button\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n }\r\n }\r\n\r\n <!-- Edit Button -->\r\n @if(isEditLayoutAllowed){\r\n <button type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n }\r\n\r\n <!-- Cancel Button (From allocation) -->\r\n <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n Cancel\r\n </button>\r\n\r\n\r\n <!-- Run allocation / Complete -->\r\n @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n class=\"btn btn-primary text-nowrap \" (click)=\"onClickRunAllocation()\">\r\n {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n </button>\r\n }\r\n\r\n <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n Submit for merch allocation\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : isAllocationRun ?'680px' : '464px' }\">\r\n <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n the verification section. Are you sure you want to continue?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve & Submit</h2>\r\n <p>\r\n This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n placements are as per the plan.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n <path\r\n d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Revert Allocation</h2>\r\n <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n <div class=\"modal-body\">\r\n <div class=\"d-flex justify-content-start mb-4\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n fill=\"#009BF3\" />\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n [disabled]=\"isButtonLoading\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
59178
59656
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
|
|
59179
59657
|
type: ViewChild,
|
|
59180
59658
|
args: ["baseCanvas"]
|
|
@@ -62031,7 +62509,8 @@ class TangoStoreBuilderModule {
|
|
|
62031
62509
|
OnboardFixtureComponent,
|
|
62032
62510
|
IvmLogicExplorerComponent,
|
|
62033
62511
|
ScheduleTaskPopupComponent,
|
|
62034
|
-
DatePickerComponent
|
|
62512
|
+
DatePickerComponent,
|
|
62513
|
+
FixturePreviewComponent] });
|
|
62035
62514
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoStoreBuilderModule, imports: [TangoStoreBuilderRoutingModule,
|
|
62036
62515
|
ReactiveSelectComponent,
|
|
62037
62516
|
CommonModule,
|
|
@@ -62174,7 +62653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
62174
62653
|
OnboardFixtureComponent,
|
|
62175
62654
|
IvmLogicExplorerComponent,
|
|
62176
62655
|
ScheduleTaskPopupComponent,
|
|
62177
|
-
DatePickerComponent
|
|
62656
|
+
DatePickerComponent,
|
|
62657
|
+
FixturePreviewComponent
|
|
62178
62658
|
],
|
|
62179
62659
|
exports: [],
|
|
62180
62660
|
}]
|