tango-app-ui-store-builder 1.2.7 → 1.2.8
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/planogram/plano-overview/plano-overview.component.mjs +29 -5
- package/esm2022/lib/services/store-builder.service.mjs +4 -1
- package/fesm2022/tango-app-ui-store-builder.mjs +33 -6
- package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
- package/lib/components/planogram/plano-overview/plano-overview.component.d.ts +1 -0
- package/lib/services/store-builder.service.d.ts +4 -0
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, inject,
|
|
2
|
+
import { Component, Injectable, inject, ViewChild, Input, EventEmitter, Output, HostListener, ChangeDetectionStrategy, forwardRef, Pipe, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/router';
|
|
4
4
|
import { NavigationEnd, RouterLink, RouterOutlet, RouterModule } from '@angular/router';
|
|
5
5
|
import * as i2$1 from 'tango-app-ui-global';
|
|
6
6
|
import { GlobalStateService } from 'tango-app-ui-global';
|
|
7
7
|
import * as i5 from '@angular/common';
|
|
8
|
-
import {
|
|
8
|
+
import { CommonModule, DatePipe, NgClass, NgStyle, NgFor, NgIf, TitleCasePipe, UpperCasePipe } from '@angular/common';
|
|
9
9
|
import * as i1$2 from '@angular/forms';
|
|
10
10
|
import { FormControl, FormGroup, FormsModule, FormArray, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
11
11
|
import * as i7 from '@angular/cdk/drag-drop';
|
|
@@ -498,6 +498,9 @@ class StoreBuilderService {
|
|
|
498
498
|
updateRevisionName(data) {
|
|
499
499
|
return this.http.post(`${this.storeBuilderApiUrl}/managePlano/updateRevisionName`, data);
|
|
500
500
|
}
|
|
501
|
+
setStagingFlag(data) {
|
|
502
|
+
return this.http.post(`${this.storeBuilderApiUrl}/managePlano/setStagingFlag`, data);
|
|
503
|
+
}
|
|
501
504
|
getShelfDetails(data) {
|
|
502
505
|
return this.http.post(`${this.storeBuilderApiUrl}/shelfProduct`, data);
|
|
503
506
|
}
|
|
@@ -46499,8 +46502,11 @@ class PlanoOverviewComponent {
|
|
|
46499
46502
|
this.isPageLoading = false;
|
|
46500
46503
|
this.revisionPlanoList = res.data;
|
|
46501
46504
|
this.buildRevisionSelectItems();
|
|
46502
|
-
|
|
46503
|
-
this.
|
|
46505
|
+
const activeIndex = this.revisionPlanoList.findIndex((r) => r.isActive);
|
|
46506
|
+
this.currentSelect = activeIndex >= 0 ? activeIndex : this.revisionPlanoList.length - 1;
|
|
46507
|
+
this.previousSelect = this.currentSelect > 0
|
|
46508
|
+
? this.currentSelect - 1
|
|
46509
|
+
: Math.min(1, this.revisionPlanoList.length - 1);
|
|
46504
46510
|
this.latestFloorData = res.data[this.currentSelect]?.floorData;
|
|
46505
46511
|
if (this.latestFloorData) {
|
|
46506
46512
|
this.latestFloorData["revisionId"] =
|
|
@@ -46739,6 +46745,27 @@ class PlanoOverviewComponent {
|
|
|
46739
46745
|
}
|
|
46740
46746
|
}, () => { });
|
|
46741
46747
|
}
|
|
46748
|
+
toggleStagingFlag(revisionIndex) {
|
|
46749
|
+
const revision = this.revisionPlanoList[revisionIndex];
|
|
46750
|
+
if (!revision || revision.isActive)
|
|
46751
|
+
return;
|
|
46752
|
+
const newValue = !revision.isStaging;
|
|
46753
|
+
this.apiService
|
|
46754
|
+
.setStagingFlag({ revisionId: revision._id, isStaging: newValue })
|
|
46755
|
+
.pipe(takeUntil(this.destroy$))
|
|
46756
|
+
.subscribe({
|
|
46757
|
+
next: (res) => {
|
|
46758
|
+
if (res && res.code == 200) {
|
|
46759
|
+
revision.isStaging = newValue;
|
|
46760
|
+
this.toastService.getSuccessToast(res?.message || (newValue ? "Marked for staging" : "Unmarked from staging"));
|
|
46761
|
+
this.cd.detectChanges();
|
|
46762
|
+
}
|
|
46763
|
+
},
|
|
46764
|
+
error: () => {
|
|
46765
|
+
this.toastService.getErrorToast("Failed to update staging flag");
|
|
46766
|
+
},
|
|
46767
|
+
});
|
|
46768
|
+
}
|
|
46742
46769
|
openEditNameModal(revisionIndex) {
|
|
46743
46770
|
const revision = this.revisionPlanoList[revisionIndex];
|
|
46744
46771
|
if (!revision)
|
|
@@ -46775,11 +46802,11 @@ class PlanoOverviewComponent {
|
|
|
46775
46802
|
}, () => { });
|
|
46776
46803
|
}
|
|
46777
46804
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoOverviewComponent, deps: [{ token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i5.DatePipe }, { token: StoreBuilderService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
46778
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoOverviewComponent, selector: "plano-overview", inputs: { floorData: "floorData" }, outputs: { currentRevisionInfo: "currentRevisionInfo" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe, DatePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\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 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\"\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\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\">Published: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}</span>\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 card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\r\n <div *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-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published: {{ (previousFloorData?.createdAt || previousFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published: {{ (latestFloorData?.createdAt || latestFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </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 <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-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PlanoComparisonComponent, selector: "lib-plano-comparison", inputs: ["floorData", "totalFixtures"] }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: FixtureOverviewComponent, selector: "fixture-overview", inputs: ["fixtureDetails", "totalFixtures", "revisionId"], outputs: ["onClose", "changeFixture"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
46805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoOverviewComponent, selector: "plano-overview", inputs: { floorData: "floorData" }, outputs: { currentRevisionInfo: "currentRevisionInfo" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe, DatePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\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 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\"\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\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\">Published: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}</span>\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 card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\r\n <div *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-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published: {{ (previousFloorData?.createdAt || previousFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published: {{ (latestFloorData?.createdAt || latestFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </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 <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-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PlanoComparisonComponent, selector: "lib-plano-comparison", inputs: ["floorData", "totalFixtures"] }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: FixtureOverviewComponent, selector: "fixture-overview", inputs: ["fixtureDetails", "totalFixtures", "revisionId"], outputs: ["onClose", "changeFixture"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
46779
46806
|
}
|
|
46780
46807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoOverviewComponent, decorators: [{
|
|
46781
46808
|
type: Component,
|
|
46782
|
-
args: [{ selector: "plano-overview", providers: [TitleCasePipe, DatePipe], template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\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 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\"\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\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\">Published: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}</span>\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 card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\r\n <div *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-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published: {{ (previousFloorData?.createdAt || previousFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published: {{ (latestFloorData?.createdAt || latestFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </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 <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-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\n"] }]
|
|
46809
|
+
args: [{ selector: "plano-overview", providers: [TitleCasePipe, DatePipe], template: "<section id=\"plano-overview\">\r\n <div>\r\n <div class=\"row\" *ngIf=\"isPageLoading && !enableCompare\">\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 id=\"body\" class=\"row\" [class.d-none]=\"enableCompare\">\r\n <div class=\"col overflow-hidden position-relative overview-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #canvasContainer>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check form-switch\" style=\"top: 24px; right: 94px\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram\r\n </label>\r\n </div>\r\n <div>\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\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 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\"\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\" #baseCanvas></canvas>\r\n </div>\r\n <div class=\"active-revision-info\" *ngIf=\"floorData?.revisionName\">\r\n {{ floorData.revisionName }}\r\n <span class=\"text-muted ms-2\" *ngIf=\"floorData?.createdAt\">Published: {{ floorData.createdAt | date:\"d MMM yyyy, hh:mm a\" }}</span>\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 card\">\r\n <fixture-overview [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n [totalFixtures]=\"fixturesList\" (changeFixture)=\"onChangeFixture($event)\"\r\n [revisionId]=\"floorData?.revisionId\"></fixture-overview>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"enableCompare\" class=\"card\">\r\n\r\n <div class=\"row\">\r\n <div class=\"form-check form-switch\" style=\"margin-top:21px;\">\r\n <input class=\"form-check-input\" style=\"margin-left:-1%\" type=\"checkbox\" id=\"planoCompare\"\r\n [(ngModel)]=\"enableCompare\" (click)=\"getRevisionDetails($event)\">\r\n <label class=\"form-check-label ms-2 compareLabel\" for=\"planoCompare\">Compare Planogram </label>\r\n </div>\r\n <div *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-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row h-100\" [hidden]=\"isPageLoading\">\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\" *ngIf=\"previousFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"previousSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'previous')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[previousSelect]?.isStaging && !revisionPlanoList[previousSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(previousSelect)\" [disabled]=\"revisionPlanoList[previousSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(previousSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[previousSelect]?.isActive && toggleStagingFlag(previousSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckPrev\"\r\n [checked]=\"revisionPlanoList[previousSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[previousSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckPrev\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"previousFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"previousRenderKey && previousFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"previousFloorData\">\r\n Published: {{ (previousFloorData?.createdAt || previousFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!previousFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"d-flex align-items-center revision-header\"\r\n *ngIf=\"latestFloorData\"\r\n style=\"margin-top: 3%;margin-left: 3%;margin-right: 3%\">\r\n <lib-reactive-select\r\n class=\"revision-select\"\r\n [idField]=\"'_index'\"\r\n [nameField]=\"'displayName'\"\r\n [data]=\"revisionSelectItems\"\r\n [(ngModel)]=\"currentSelect\"\r\n (ngModelChange)=\"onRevisionChange($event, 'latest')\">\r\n </lib-reactive-select>\r\n <span class=\"current-plano-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#0086c9\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Current plano\r\n </span>\r\n <span class=\"staging-badge ms-2\" *ngIf=\"revisionPlanoList[currentSelect]?.isStaging && !revisionPlanoList[currentSelect]?.isActive\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#667085\"/>\r\n <path d=\"M3.5 6L5.2 7.7L8.5 4.3\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n Staging\r\n </span>\r\n <div class=\"kebab-menu ms-auto\" ngbDropdown placement=\"bottom-end\">\r\n <button class=\"btn btn-link kebab-btn\" ngbDropdownToggle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#344054\"/>\r\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#344054\"/>\r\n </svg>\r\n </button>\r\n <div ngbDropdownMenu>\r\n <button ngbDropdownItem (click)=\"openSetCurrentModal(currentSelect)\" [disabled]=\"revisionPlanoList[currentSelect]?.isActive\">Set as Current Plano</button>\r\n <button ngbDropdownItem (click)=\"openEditNameModal(currentSelect)\">Edit revision name</button>\r\n <div class=\"dropdown-item form-check staging-check\"\r\n [class.disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"!revisionPlanoList[currentSelect]?.isActive && toggleStagingFlag(currentSelect)\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"stagingCheckCurr\"\r\n [checked]=\"revisionPlanoList[currentSelect]?.isStaging\"\r\n [disabled]=\"revisionPlanoList[currentSelect]?.isActive\"\r\n (click)=\"$event.preventDefault()\">\r\n <label class=\"form-check-label\" for=\"stagingCheckCurr\">Mark for staging</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-plano-comparison [floorData]=\"latestFloorData\" [totalFixtures]=\"fixturesList\"\r\n *ngIf=\"latestRenderKey && latestFloorData\"></lib-plano-comparison>\r\n <div class=\"published-text\" *ngIf=\"latestFloorData\">\r\n Published: {{ (latestFloorData?.createdAt || latestFloorData?.lastUpdate) | date:\"d MMM yyyy, hh:mm a\" }}\r\n </div>\r\n <div *ngIf=\"!latestFloorData\" class=\"noDataContent\">\r\n <div>\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\"\r\n fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\"\r\n transform=\"matrix(-1 0 0 1 246.602 48.8572)\" fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\"\r\n transform=\"matrix(-1 0 0 1 56.2979 113.282)\" fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 244.965 68.8262)\" fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\"\r\n transform=\"matrix(-1 0 0 1 215.689 13.5271)\" fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\"\r\n transform=\"matrix(-1 0 0 1 104.006 138.221)\" fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\"\r\n fill=\"#6BCAFF\" stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\"\r\n fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"mainText text-center\">\r\n No Previous Revisions\r\n </div>\r\n <div class=\"subText\">\r\n There is no previous revisions available for this planogram\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </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 <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-overview{max-height:calc(100vh - 160px)}#plano-overview #body{height:calc(100vh - 160px)}#plano-overview #body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#plano-overview #body .collapsed-col{transition:all .3s ease;width:0px!important}#plano-overview #body .fixture-overview{max-width:530px;max-height:calc(100vh - 160px);overflow-y:auto}#plano-overview #body .overview-canvas{height:calc(100vh - 160px)}#plano-overview .compareLabel{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#344054}#plano-overview .updateText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#667085;margin-top:10px;margin-left:3%}#plano-overview .loader .shimmer{height:100%;width:100%}#plano-overview .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){#plano-overview .fixture-overview{max-width:336px!important}}.noDataContent{height:70%;display:flex;justify-content:center;align-items:center}.mainText{color:#1d2939;font-family:Inter;font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%}.subText{color:#475467;font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%}.currentText{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#000}.revision-header .revision-select{width:280px;flex-shrink:0}.revision-header .revision-select .custom-select,.revision-header .revision-select .form-group,.revision-header .revision-select .position-relative,.revision-header .revision-select .dropselect{width:100%}.kebab-menu .kebab-btn{padding:4px;line-height:1;text-decoration:none;color:#344054}.kebab-menu .kebab-btn:after{display:none}.published-text{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;color:#667085;padding:0 3% 20px}.current-plano-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:12px;background:#e8f5ff;border:1px solid #b3dcf5;font-weight:500;font-size:12px;color:#0086c9}.staging-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#f2f4f7;border:1px solid #d0d5dd;font-weight:500;font-size:12px;color:#475467}.kebab-menu .dropdown-item.staging-check{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.kebab-menu .dropdown-item.staging-check .form-check-input{margin:0;flex-shrink:0;cursor:pointer}.kebab-menu .dropdown-item.staging-check .form-check-label{margin:0;cursor:pointer;font-size:14px;line-height:1.4;color:#1d2939}.kebab-menu .dropdown-item.staging-check:hover:not(.disabled){background-color:#f9fafb}.kebab-menu .dropdown-item.staging-check.disabled{opacity:.5;pointer-events:none}.active-revision-info{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:8px 16px}\n"] }]
|
|
46783
46810
|
}], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i5.DatePipe }, { type: StoreBuilderService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i4.ToastService }], propDecorators: { floorData: [{
|
|
46784
46811
|
type: Input
|
|
46785
46812
|
}], currentRevisionInfo: [{
|