tango-app-ui-store-builder 1.0.37 → 1.0.39
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/manage-plano/popups/create-planogram/create-planogram.component.mjs +19 -8
- package/esm2022/lib/components/manage-plano/verification-table/verification-table.component.mjs +8 -2
- package/esm2022/lib/components/manage-store-plano/manage-store-plano.component.mjs +60 -39
- package/esm2022/lib/components/manage-store-plano/verification-feedback/editable-fixture/editable-fixture.component.mjs +14 -15
- package/esm2022/lib/components/manage-store-plano/verification-feedback/fixture/fixture.component.mjs +13 -14
- package/esm2022/lib/components/manage-store-plano/verification-feedback/verification-feedback.component.mjs +30 -31
- package/esm2022/lib/components/plano-tools/plano-migrate/plano-migrate.component.mjs +54 -7
- package/esm2022/lib/components/plano-tools/tools-parent/tools-parent.component.mjs +3 -3
- package/esm2022/lib/components/planogram/plano-table/plano-filter/plano-filter.component.mjs +13 -12
- package/esm2022/lib/components/planogram/plano-table/plano-table.component.mjs +4 -4
- package/fesm2022/tango-app-ui-store-builder.mjs +207 -125
- package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
- package/lib/components/manage-plano/popups/create-planogram/create-planogram.component.d.ts +1 -0
- package/lib/components/manage-plano/rollout-table/rollout-table.component.d.ts +1 -1
- package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +2 -2
- package/lib/components/manage-store-plano/manage-store-plano.component.d.ts +2 -4
- package/lib/components/manage-store-plano/verification-feedback/editable-fixture/editable-fixture.component.d.ts +1 -4
- package/lib/components/manage-store-plano/verification-feedback/fixture/fixture.component.d.ts +1 -4
- package/lib/components/manage-store-plano/verification-feedback/verification-feedback.component.d.ts +1 -4
- package/lib/components/plano-tools/plano-migrate/plano-migrate.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import * as i2 from '@angular/router';
|
|
|
4
4
|
import { NavigationEnd, RouterLink, RouterModule } from '@angular/router';
|
|
5
5
|
import * as i2$1 from 'tango-app-ui-global';
|
|
6
6
|
import * as i5 from '@angular/common';
|
|
7
|
-
import { CommonModule, NgClass, NgIf, NgFor, TitleCasePipe, NgStyle } from '@angular/common';
|
|
7
|
+
import { CommonModule, NgClass, NgIf, NgFor, TitleCasePipe, UpperCasePipe, NgStyle } from '@angular/common';
|
|
8
8
|
import * as i1$2 from '@angular/forms';
|
|
9
9
|
import { FormControl, FormGroup, NG_VALUE_ACCESSOR, FormsModule, FormArray, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
10
10
|
import * as i7 from '@angular/cdk/drag-drop';
|
|
@@ -10234,7 +10234,7 @@ class FixtureComponent {
|
|
|
10234
10234
|
gs;
|
|
10235
10235
|
cd;
|
|
10236
10236
|
fixture;
|
|
10237
|
-
vmList = [];
|
|
10237
|
+
// @Input() vmList: VmLibraryList[] = [];
|
|
10238
10238
|
showColors = true;
|
|
10239
10239
|
showVMs = true;
|
|
10240
10240
|
showBCs = true;
|
|
@@ -10287,14 +10287,15 @@ class FixtureComponent {
|
|
|
10287
10287
|
this.isVMInitialized = this.handleVmPositionAndSize();
|
|
10288
10288
|
}
|
|
10289
10289
|
}
|
|
10290
|
-
getSelectedVM(vm) {
|
|
10291
|
-
|
|
10292
|
-
|
|
10293
|
-
|
|
10294
|
-
|
|
10295
|
-
|
|
10296
|
-
|
|
10297
|
-
}
|
|
10290
|
+
// getSelectedVM(vm: any) {
|
|
10291
|
+
// if (vm?.vmId) {
|
|
10292
|
+
// return this.vmList.find((v) => v.id === vm.vmId);
|
|
10293
|
+
// } else {
|
|
10294
|
+
// return this.vmList.find(
|
|
10295
|
+
// (v) => v.name === vm.vmName && v.type === vm.vmType
|
|
10296
|
+
// );
|
|
10297
|
+
// }
|
|
10298
|
+
// }
|
|
10298
10299
|
get bodyEl() {
|
|
10299
10300
|
return (this.fixtureRoot?.nativeElement?.querySelector("#body-block-sum") ?? null);
|
|
10300
10301
|
}
|
|
@@ -10610,15 +10611,13 @@ class FixtureComponent {
|
|
|
10610
10611
|
this.destroy$.complete();
|
|
10611
10612
|
}
|
|
10612
10613
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
10613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureComponent, isStandalone: true, selector: "fixture", inputs: { fixture: "fixture", vmList: "vmList", showColors: "showColors", showVMs: "showVMs", showBCs: "showBCs" }, viewQueries: [{ propertyName: "fixtureRoot", first: true, predicate: ["fixtureRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\" *ngIf=\"fixture?.header?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <p>{{ fixture?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"fixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of fixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container *ngIf=\"getSelectedVM(vm) as selectedVM\">\r\n <img *ngIf=\"selectedVM?.imgUrl; else placeholder\" [src]=\"selectedVM?.imgUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ selectedVM?.name }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"fixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of fixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n <div class=\"capacity\">{{item.productPerShelf}}</div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n <div class=\"capacity\">{{item.productPerShelf * item.trayRows}}</div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\" *ngIf=\"fixture?.footer?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .capacity{position:absolute;right:12px;top:8px;border:1px solid #98a2b3;color:#1d2939;box-shadow:0 .77px 1.55px #1018280d;background:#fff;border-radius:50%;padding:6px 12px;font-weight:600;font-size:12px;line-height:18px;height:36px;width:36px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid var(--Primary-200, #99daff);background:#f6fcff;top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
10614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureComponent, isStandalone: true, selector: "fixture", inputs: { fixture: "fixture", showColors: "showColors", showVMs: "showVMs", showBCs: "showBCs" }, viewQueries: [{ propertyName: "fixtureRoot", first: true, predicate: ["fixtureRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\" *ngIf=\"fixture?.header?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <p>{{ fixture?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"fixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of fixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN + vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"fixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of fixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n <div class=\"capacity\">{{item.productPerShelf}}</div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n <div class=\"capacity\">{{item.productPerShelf * item.trayRows}}</div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\" *ngIf=\"fixture?.footer?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .capacity{position:absolute;right:12px;top:8px;border:1px solid #98a2b3;color:#1d2939;box-shadow:0 .77px 1.55px #1018280d;background:#fff;border-radius:50%;padding:6px 12px;font-weight:600;font-size:12px;line-height:18px;height:36px;width:36px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid var(--Primary-200, #99daff);background:#f6fcff;top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
10614
10615
|
}
|
|
10615
10616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureComponent, decorators: [{
|
|
10616
10617
|
type: Component,
|
|
10617
|
-
args: [{ selector: "fixture", standalone: true, imports: [NgIf, NgFor, NgbTooltip], template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\" *ngIf=\"fixture?.header?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <p>{{ fixture?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"fixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of fixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container *ngIf=\"getSelectedVM(vm) as selectedVM\">\r\n <img *ngIf=\"selectedVM?.imgUrl; else placeholder\" [src]=\"selectedVM?.imgUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ selectedVM?.name }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"fixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of fixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n <div class=\"capacity\">{{item.productPerShelf}}</div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n <div class=\"capacity\">{{item.productPerShelf * item.trayRows}}</div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\" *ngIf=\"fixture?.footer?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .capacity{position:absolute;right:12px;top:8px;border:1px solid #98a2b3;color:#1d2939;box-shadow:0 .77px 1.55px #1018280d;background:#fff;border-radius:50%;padding:6px 12px;font-weight:600;font-size:12px;line-height:18px;height:36px;width:36px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid var(--Primary-200, #99daff);background:#f6fcff;top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}\n"] }]
|
|
10618
|
+
args: [{ selector: "fixture", standalone: true, imports: [NgIf, NgFor, NgbTooltip], template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\" *ngIf=\"fixture?.header?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <p>{{ fixture?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"fixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of fixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImageUrl; else placeholder\" [src]=\"imgCDN + vm?.vmImageUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"fixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of fixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n <div class=\"capacity\">{{item.productPerShelf}}</div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n <div class=\"capacity\">{{item.productPerShelf * item.trayRows}}</div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\" *ngIf=\"fixture?.footer?.isEnabled && fixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .capacity{position:absolute;right:12px;top:8px;border:1px solid #98a2b3;color:#1d2939;box-shadow:0 .77px 1.55px #1018280d;background:#fff;border-radius:50%;padding:6px 12px;font-weight:600;font-size:12px;line-height:18px;height:36px;width:36px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid var(--Primary-200, #99daff);background:#f6fcff;top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1px solid;background:#f6fcff;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}\n"] }]
|
|
10618
10619
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { fixture: [{
|
|
10619
10620
|
type: Input
|
|
10620
|
-
}], vmList: [{
|
|
10621
|
-
type: Input
|
|
10622
10621
|
}], showColors: [{
|
|
10623
10622
|
type: Input
|
|
10624
10623
|
}], showVMs: [{
|
|
@@ -10634,7 +10633,7 @@ class EditableFixtureComponent {
|
|
|
10634
10633
|
gs;
|
|
10635
10634
|
cd;
|
|
10636
10635
|
ngbModal;
|
|
10637
|
-
vmList = [];
|
|
10636
|
+
// @Input() vmList: VmLibraryList[] = [];
|
|
10638
10637
|
fixture;
|
|
10639
10638
|
editingAiFixture = null;
|
|
10640
10639
|
editFixtureQuickDetails = [];
|
|
@@ -10746,14 +10745,15 @@ class EditableFixtureComponent {
|
|
|
10746
10745
|
});
|
|
10747
10746
|
return list;
|
|
10748
10747
|
}
|
|
10749
|
-
getSelectedVM(vm) {
|
|
10750
|
-
|
|
10751
|
-
|
|
10752
|
-
|
|
10753
|
-
|
|
10754
|
-
|
|
10755
|
-
|
|
10756
|
-
}
|
|
10748
|
+
// getSelectedVM(vm: any) {
|
|
10749
|
+
// if (vm?.vmId) {
|
|
10750
|
+
// return this.vmList.find((v) => v.id === vm.vmId);
|
|
10751
|
+
// } else {
|
|
10752
|
+
// return this.vmList.find(
|
|
10753
|
+
// (v) => v.name === vm.vmName && v.type === vm.vmType
|
|
10754
|
+
// );
|
|
10755
|
+
// }
|
|
10756
|
+
// }
|
|
10757
10757
|
get bodyEl() {
|
|
10758
10758
|
return (this.fixtureRoot?.nativeElement?.querySelector("#body-block-sum") ?? null);
|
|
10759
10759
|
}
|
|
@@ -11201,14 +11201,12 @@ class EditableFixtureComponent {
|
|
|
11201
11201
|
this.destroy$.complete();
|
|
11202
11202
|
}
|
|
11203
11203
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableFixtureComponent, deps: [{ token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
11204
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EditableFixtureComponent, isStandalone: true, selector: "editable-fixture", inputs: { vmList: "vmList", fixture: "fixture", showColors: "showColors", showVMs: "showVMs", showBCs: "showBCs", editMode: "editMode" }, outputs: { onCancel: "onCancel", onDone: "onDone", editTab: "editTab" }, viewQueries: [{ propertyName: "fixtureRoot", first: true, predicate: ["fixtureRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <div *ngIf=\"editMode\" class=\"quick-edit-actions\">\r\n <button class=\"btn btn-outline quick-btn\" type=\"button\" (click)=\"onClickCancel()\">\r\n Cancel\r\n </button>\r\n <button class=\"btn btn-primary quick-btn\" type=\"button\" (click)=\"onClickDone()\">\r\n Submit\r\n </button>\r\n </div>\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"editingAiFixture?.header?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n @if(editMode){\r\n\r\n <div class=\"d-flex flex-column align-items-start w-100\">\r\n <input [class.diff]=\"editingAiFixture?.header?.isDifferent\"\r\n class=\"col-6 value edit-input form-control w-100\" type=\"text\" maxlength=\"150\"\r\n [ngModel]=\"headerItem?.value\" (ngModelChange)=\"onQuickValueChange(headerItem!, $event)\" />\r\n\r\n @if (isInvalidHeaderValue(headerItem?.value) && isQuickEditSubmitted) {\r\n <p class=\"text-danger m-0 mt-1 ms-1\" style=\"font-size: 11px;\">\r\n Cannot be empty\r\n </p>\r\n }\r\n </div>\r\n\r\n }@else {\r\n <p [class.diff]=\"editingAiFixture?.header?.isDifferent\">{{ editingAiFixture?.header?.label }}</p>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"editingAiFixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of editingAiFixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container *ngIf=\"getSelectedVM(vm) as selectedVM\">\r\n <img *ngIf=\"selectedVM?.imgUrl; else placeholder\" [src]=\"selectedVM?.imgUrl\"\r\n alt=\"Vm Image\" class=\"cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\" />\r\n\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\">\r\n <h3>{{ selectedVM?.name }}</h3>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"editMode\" class=\"vm-actions\">\r\n <svg (click)=\"deleteVm(i)\" class=\"cursor-pointer\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <path\r\n d=\"M8.5 10H9.5M9.5 10H17.5M9.5 10V17C9.5 17.2652 9.60536 17.5196 9.79289 17.7071C9.98043 17.8946 10.2348 18 10.5 18H15.5C15.7652 18 16.0196 17.8946 16.2071 17.7071C16.3946 17.5196 16.5 17.2652 16.5 17V10H9.5ZM11 10V9C11 8.73478 11.1054 8.48043 11.2929 8.29289C11.4804 8.10536 11.7348 8 12 8H14C14.2652 8 14.5196 8.10536 14.7071 8.29289C14.8946 8.48043 15 8.73478 15 9V10M12 12.5V15.5M14 12.5V15.5\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg (click)=\"editVm()\" class=\"cursor-pointer ms-1\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <g clip-path=\"url(#clip0_476_30801)\">\r\n <path\r\n d=\"M15.5 8.50015C15.6313 8.36883 15.7872 8.26466 15.9588 8.19359C16.1304 8.12252 16.3143 8.08594 16.5 8.08594C16.6857 8.08594 16.8696 8.12252 17.0412 8.19359C17.2128 8.26466 17.3687 8.36883 17.5 8.50015C17.6313 8.63147 17.7355 8.78737 17.8066 8.95895C17.8776 9.13054 17.9142 9.31443 17.9142 9.50015C17.9142 9.68587 17.8776 9.86977 17.8066 10.0413C17.7355 10.2129 17.6313 10.3688 17.5 10.5002L10.75 17.2502L8 18.0002L8.75 15.2502L15.5 8.50015Z\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_476_30801\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(7 7)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"editingAiFixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of editingAiFixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of editingAiFixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n\r\n <div class=\"input-container\">\r\n <input [class.diff]=\"item?.isDifferent\" class=\"value edit-input form-control\"\r\n type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\"\r\n [disabled]=\"!editMode\" [value]=\"getQuickItem(item.shelfType + (i + 1))?.value\"\r\n (input)=\"onCapacityInput($event, getQuickItem(item.shelfType + (i + 1))!)\"\r\n [ngClass]=\"{\r\n 'border-red': isInvalidQuickValue(getQuickItem(item.shelfType + (i + 1))?.value) && isQuickEditSubmitted\r\n }\" />\r\n </div>\r\n\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n\r\n <!-- Tray visual -->\r\n <div *ngFor=\"let row of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n\r\n <!-- Tray inputs -->\r\n <div class=\"input-container\">\r\n <div class=\"row-container d-flex gap-1 align-items-center\"\r\n [ngClass]=\"{'border-red': isInvalidTray(item) && isQuickEditSubmitted}\">\r\n <!-- ngbTooltip=\"Total rows x Capacity per row = Total capacity\" -->\r\n <!-- Tray rows -->\r\n <input class=\"value edit-input form-control\" style=\"right: 58px;\" type=\"text\"\r\n inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"R\"\r\n [disabled]=\"!editMode\" [value]=\"item.trayRows\"\r\n (input)=\"onTrayRowChange($event, item)\" />\r\n x\r\n <!-- Products per row -->\r\n <input class=\"value edit-input form-control\" type=\"text\" inputmode=\"numeric\"\r\n pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"C\" [disabled]=\"!editMode\"\r\n [value]=\"item.productPerShelf\" (input)=\"onTrayProductChange($event, item)\" />\r\n =\r\n <span style=\"font-size: 14px; font-weight: 400;\"\r\n [class.diff]=\"item?.isDifferent\">{{item.trayRows && item.productPerShelf ? item.trayRows * item.productPerShelf : 0}}</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"editingAiFixture?.footer?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ editingAiFixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}.quick-btn:hover{box-shadow:0 1px 2px #10182834}.quick-edit-actions{margin-top:-36px;margin-bottom:12px;width:100%;display:flex;justify-content:end;align-items:center;gap:6px}.diff{color:#d92d20!important;font-weight:600}.diff-border{border:4px solid var(--Black, rgb(255, 0, 0))}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .row-container{border:.77px solid rgb(208,213,221);box-shadow:0 .77px 1.55px #1018280d;padding:4px 8px;background:#fff;border-radius:6px}#fixture-view #vm-products-sum .body-block .block .row-container .edit-input{width:37px;padding:8px 2px;background:transparent;border:none!important}#fixture-view #vm-products-sum .body-block .block .edit-input{border-radius:6px;padding:14px 4px;width:40px;height:26px;box-shadow:0 .77px 1.55px #1018280d;text-align:center;background:#fff;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .input-container{position:absolute;right:12px;top:10px;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .border-red{border-color:#e03131!important}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-block:hover .vm-actions{display:flex;width:100%;position:absolute;height:100%;justify-content:center;align-items:center;top:0}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-view #vm-products-sum .vm-actions{display:none;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
11204
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EditableFixtureComponent, isStandalone: true, selector: "editable-fixture", inputs: { fixture: "fixture", showColors: "showColors", showVMs: "showVMs", showBCs: "showBCs", editMode: "editMode" }, outputs: { onCancel: "onCancel", onDone: "onDone", editTab: "editTab" }, viewQueries: [{ propertyName: "fixtureRoot", first: true, predicate: ["fixtureRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <div *ngIf=\"editMode\" class=\"quick-edit-actions\">\r\n <button class=\"btn btn-outline quick-btn\" type=\"button\" (click)=\"onClickCancel()\">\r\n Cancel\r\n </button>\r\n <button class=\"btn btn-primary quick-btn\" type=\"button\" (click)=\"onClickDone()\">\r\n Submit\r\n </button>\r\n </div>\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"editingAiFixture?.header?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n @if(editMode){\r\n\r\n <div class=\"d-flex flex-column align-items-start w-100\">\r\n <input [class.diff]=\"editingAiFixture?.header?.isDifferent\"\r\n class=\"col-6 value edit-input form-control w-100\" type=\"text\" maxlength=\"150\"\r\n [ngModel]=\"headerItem?.value\" (ngModelChange)=\"onQuickValueChange(headerItem!, $event)\" />\r\n\r\n @if (isInvalidHeaderValue(headerItem?.value) && isQuickEditSubmitted) {\r\n <p class=\"text-danger m-0 mt-1 ms-1\" style=\"font-size: 11px;\">\r\n Cannot be empty\r\n </p>\r\n }\r\n </div>\r\n\r\n }@else {\r\n <p [class.diff]=\"editingAiFixture?.header?.isDifferent\">{{ editingAiFixture?.header?.label }}</p>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"editingAiFixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of editingAiFixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImage; else placeholder\" [src]=\"imgCDN + vm?.vmImage\"\r\n alt=\"Vm Image\" class=\"cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\" />\r\n\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"editMode\" class=\"vm-actions\">\r\n <svg (click)=\"deleteVm(i)\" class=\"cursor-pointer\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <path\r\n d=\"M8.5 10H9.5M9.5 10H17.5M9.5 10V17C9.5 17.2652 9.60536 17.5196 9.79289 17.7071C9.98043 17.8946 10.2348 18 10.5 18H15.5C15.7652 18 16.0196 17.8946 16.2071 17.7071C16.3946 17.5196 16.5 17.2652 16.5 17V10H9.5ZM11 10V9C11 8.73478 11.1054 8.48043 11.2929 8.29289C11.4804 8.10536 11.7348 8 12 8H14C14.2652 8 14.5196 8.10536 14.7071 8.29289C14.8946 8.48043 15 8.73478 15 9V10M12 12.5V15.5M14 12.5V15.5\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg (click)=\"editVm()\" class=\"cursor-pointer ms-1\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <g clip-path=\"url(#clip0_476_30801)\">\r\n <path\r\n d=\"M15.5 8.50015C15.6313 8.36883 15.7872 8.26466 15.9588 8.19359C16.1304 8.12252 16.3143 8.08594 16.5 8.08594C16.6857 8.08594 16.8696 8.12252 17.0412 8.19359C17.2128 8.26466 17.3687 8.36883 17.5 8.50015C17.6313 8.63147 17.7355 8.78737 17.8066 8.95895C17.8776 9.13054 17.9142 9.31443 17.9142 9.50015C17.9142 9.68587 17.8776 9.86977 17.8066 10.0413C17.7355 10.2129 17.6313 10.3688 17.5 10.5002L10.75 17.2502L8 18.0002L8.75 15.2502L15.5 8.50015Z\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_476_30801\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(7 7)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"editingAiFixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of editingAiFixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of editingAiFixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n\r\n <div class=\"input-container\">\r\n <input [class.diff]=\"item?.isDifferent\" class=\"value edit-input form-control\"\r\n type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\"\r\n [disabled]=\"!editMode\" [value]=\"getQuickItem(item.shelfType + (i + 1))?.value\"\r\n (input)=\"onCapacityInput($event, getQuickItem(item.shelfType + (i + 1))!)\"\r\n [ngClass]=\"{\r\n 'border-red': isInvalidQuickValue(getQuickItem(item.shelfType + (i + 1))?.value) && isQuickEditSubmitted\r\n }\" />\r\n </div>\r\n\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n\r\n <!-- Tray visual -->\r\n <div *ngFor=\"let row of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n\r\n <!-- Tray inputs -->\r\n <div class=\"input-container\">\r\n <div class=\"row-container d-flex gap-1 align-items-center\"\r\n [ngClass]=\"{'border-red': isInvalidTray(item) && isQuickEditSubmitted}\">\r\n <!-- ngbTooltip=\"Total rows x Capacity per row = Total capacity\" -->\r\n <!-- Tray rows -->\r\n <input class=\"value edit-input form-control\" style=\"right: 58px;\" type=\"text\"\r\n inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"R\"\r\n [disabled]=\"!editMode\" [value]=\"item.trayRows\"\r\n (input)=\"onTrayRowChange($event, item)\" />\r\n x\r\n <!-- Products per row -->\r\n <input class=\"value edit-input form-control\" type=\"text\" inputmode=\"numeric\"\r\n pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"C\" [disabled]=\"!editMode\"\r\n [value]=\"item.productPerShelf\" (input)=\"onTrayProductChange($event, item)\" />\r\n =\r\n <span style=\"font-size: 14px; font-weight: 400;\"\r\n [class.diff]=\"item?.isDifferent\">{{item.trayRows && item.productPerShelf ? item.trayRows * item.productPerShelf : 0}}</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"editingAiFixture?.footer?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ editingAiFixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}.quick-btn:hover{box-shadow:0 1px 2px #10182834}.quick-edit-actions{margin-top:-36px;margin-bottom:12px;width:100%;display:flex;justify-content:end;align-items:center;gap:6px}.diff{color:#d92d20!important;font-weight:600}.diff-border{border:4px solid var(--Black, rgb(255, 0, 0))}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .row-container{border:.77px solid rgb(208,213,221);box-shadow:0 .77px 1.55px #1018280d;padding:4px 8px;background:#fff;border-radius:6px}#fixture-view #vm-products-sum .body-block .block .row-container .edit-input{width:37px;padding:8px 2px;background:transparent;border:none!important}#fixture-view #vm-products-sum .body-block .block .edit-input{border-radius:6px;padding:14px 4px;width:40px;height:26px;box-shadow:0 .77px 1.55px #1018280d;text-align:center;background:#fff;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .input-container{position:absolute;right:12px;top:10px;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .border-red{border-color:#e03131!important}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-block:hover .vm-actions{display:flex;width:100%;position:absolute;height:100%;justify-content:center;align-items:center;top:0}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-view #vm-products-sum .vm-actions{display:none;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
11205
11205
|
}
|
|
11206
11206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableFixtureComponent, decorators: [{
|
|
11207
11207
|
type: Component,
|
|
11208
|
-
args: [{ selector: "editable-fixture", standalone: true, imports: [NgIf, NgFor, NgbTooltip, NgClass, FormsModule], template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <div *ngIf=\"editMode\" class=\"quick-edit-actions\">\r\n <button class=\"btn btn-outline quick-btn\" type=\"button\" (click)=\"onClickCancel()\">\r\n Cancel\r\n </button>\r\n <button class=\"btn btn-primary quick-btn\" type=\"button\" (click)=\"onClickDone()\">\r\n Submit\r\n </button>\r\n </div>\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"editingAiFixture?.header?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n @if(editMode){\r\n\r\n <div class=\"d-flex flex-column align-items-start w-100\">\r\n <input [class.diff]=\"editingAiFixture?.header?.isDifferent\"\r\n class=\"col-6 value edit-input form-control w-100\" type=\"text\" maxlength=\"150\"\r\n [ngModel]=\"headerItem?.value\" (ngModelChange)=\"onQuickValueChange(headerItem!, $event)\" />\r\n\r\n @if (isInvalidHeaderValue(headerItem?.value) && isQuickEditSubmitted) {\r\n <p class=\"text-danger m-0 mt-1 ms-1\" style=\"font-size: 11px;\">\r\n Cannot be empty\r\n </p>\r\n }\r\n </div>\r\n\r\n }@else {\r\n <p [class.diff]=\"editingAiFixture?.header?.isDifferent\">{{ editingAiFixture?.header?.label }}</p>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"editingAiFixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of editingAiFixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container *ngIf=\"getSelectedVM(vm) as selectedVM\">\r\n <img *ngIf=\"selectedVM?.imgUrl; else placeholder\" [src]=\"selectedVM?.imgUrl\"\r\n alt=\"Vm Image\" class=\"cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\" />\r\n\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\">\r\n <h3>{{ selectedVM?.name }}</h3>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"editMode\" class=\"vm-actions\">\r\n <svg (click)=\"deleteVm(i)\" class=\"cursor-pointer\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <path\r\n d=\"M8.5 10H9.5M9.5 10H17.5M9.5 10V17C9.5 17.2652 9.60536 17.5196 9.79289 17.7071C9.98043 17.8946 10.2348 18 10.5 18H15.5C15.7652 18 16.0196 17.8946 16.2071 17.7071C16.3946 17.5196 16.5 17.2652 16.5 17V10H9.5ZM11 10V9C11 8.73478 11.1054 8.48043 11.2929 8.29289C11.4804 8.10536 11.7348 8 12 8H14C14.2652 8 14.5196 8.10536 14.7071 8.29289C14.8946 8.48043 15 8.73478 15 9V10M12 12.5V15.5M14 12.5V15.5\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg (click)=\"editVm()\" class=\"cursor-pointer ms-1\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <g clip-path=\"url(#clip0_476_30801)\">\r\n <path\r\n d=\"M15.5 8.50015C15.6313 8.36883 15.7872 8.26466 15.9588 8.19359C16.1304 8.12252 16.3143 8.08594 16.5 8.08594C16.6857 8.08594 16.8696 8.12252 17.0412 8.19359C17.2128 8.26466 17.3687 8.36883 17.5 8.50015C17.6313 8.63147 17.7355 8.78737 17.8066 8.95895C17.8776 9.13054 17.9142 9.31443 17.9142 9.50015C17.9142 9.68587 17.8776 9.86977 17.8066 10.0413C17.7355 10.2129 17.6313 10.3688 17.5 10.5002L10.75 17.2502L8 18.0002L8.75 15.2502L15.5 8.50015Z\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_476_30801\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(7 7)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"editingAiFixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of editingAiFixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of editingAiFixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n\r\n <div class=\"input-container\">\r\n <input [class.diff]=\"item?.isDifferent\" class=\"value edit-input form-control\"\r\n type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\"\r\n [disabled]=\"!editMode\" [value]=\"getQuickItem(item.shelfType + (i + 1))?.value\"\r\n (input)=\"onCapacityInput($event, getQuickItem(item.shelfType + (i + 1))!)\"\r\n [ngClass]=\"{\r\n 'border-red': isInvalidQuickValue(getQuickItem(item.shelfType + (i + 1))?.value) && isQuickEditSubmitted\r\n }\" />\r\n </div>\r\n\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n\r\n <!-- Tray visual -->\r\n <div *ngFor=\"let row of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n\r\n <!-- Tray inputs -->\r\n <div class=\"input-container\">\r\n <div class=\"row-container d-flex gap-1 align-items-center\"\r\n [ngClass]=\"{'border-red': isInvalidTray(item) && isQuickEditSubmitted}\">\r\n <!-- ngbTooltip=\"Total rows x Capacity per row = Total capacity\" -->\r\n <!-- Tray rows -->\r\n <input class=\"value edit-input form-control\" style=\"right: 58px;\" type=\"text\"\r\n inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"R\"\r\n [disabled]=\"!editMode\" [value]=\"item.trayRows\"\r\n (input)=\"onTrayRowChange($event, item)\" />\r\n x\r\n <!-- Products per row -->\r\n <input class=\"value edit-input form-control\" type=\"text\" inputmode=\"numeric\"\r\n pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"C\" [disabled]=\"!editMode\"\r\n [value]=\"item.productPerShelf\" (input)=\"onTrayProductChange($event, item)\" />\r\n =\r\n <span style=\"font-size: 14px; font-weight: 400;\"\r\n [class.diff]=\"item?.isDifferent\">{{item.trayRows && item.productPerShelf ? item.trayRows * item.productPerShelf : 0}}</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"editingAiFixture?.footer?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ editingAiFixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}.quick-btn:hover{box-shadow:0 1px 2px #10182834}.quick-edit-actions{margin-top:-36px;margin-bottom:12px;width:100%;display:flex;justify-content:end;align-items:center;gap:6px}.diff{color:#d92d20!important;font-weight:600}.diff-border{border:4px solid var(--Black, rgb(255, 0, 0))}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .row-container{border:.77px solid rgb(208,213,221);box-shadow:0 .77px 1.55px #1018280d;padding:4px 8px;background:#fff;border-radius:6px}#fixture-view #vm-products-sum .body-block .block .row-container .edit-input{width:37px;padding:8px 2px;background:transparent;border:none!important}#fixture-view #vm-products-sum .body-block .block .edit-input{border-radius:6px;padding:14px 4px;width:40px;height:26px;box-shadow:0 .77px 1.55px #1018280d;text-align:center;background:#fff;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .input-container{position:absolute;right:12px;top:10px;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .border-red{border-color:#e03131!important}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-block:hover .vm-actions{display:flex;width:100%;position:absolute;height:100%;justify-content:center;align-items:center;top:0}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-view #vm-products-sum .vm-actions{display:none;width:100%;height:100%}\n"] }]
|
|
11209
|
-
}], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }], propDecorators: {
|
|
11210
|
-
type: Input
|
|
11211
|
-
}], fixture: [{
|
|
11208
|
+
args: [{ selector: "editable-fixture", standalone: true, imports: [NgIf, NgFor, NgbTooltip, NgClass, FormsModule], template: "@if(isPageLoading){\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n}@else {\r\n\r\n <div *ngIf=\"editMode\" class=\"quick-edit-actions\">\r\n <button class=\"btn btn-outline quick-btn\" type=\"button\" (click)=\"onClickCancel()\">\r\n Cancel\r\n </button>\r\n <button class=\"btn btn-primary quick-btn\" type=\"button\" (click)=\"onClickDone()\">\r\n Submit\r\n </button>\r\n </div>\r\n\r\n <section #fixtureRoot id=\"fixture-view\">\r\n <div id=\"vm-products-sum\" class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"editingAiFixture?.header?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n @if(editMode){\r\n\r\n <div class=\"d-flex flex-column align-items-start w-100\">\r\n <input [class.diff]=\"editingAiFixture?.header?.isDifferent\"\r\n class=\"col-6 value edit-input form-control w-100\" type=\"text\" maxlength=\"150\"\r\n [ngModel]=\"headerItem?.value\" (ngModelChange)=\"onQuickValueChange(headerItem!, $event)\" />\r\n\r\n @if (isInvalidHeaderValue(headerItem?.value) && isQuickEditSubmitted) {\r\n <p class=\"text-danger m-0 mt-1 ms-1\" style=\"font-size: 11px;\">\r\n Cannot be empty\r\n </p>\r\n }\r\n </div>\r\n\r\n }@else {\r\n <p [class.diff]=\"editingAiFixture?.header?.isDifferent\">{{ editingAiFixture?.header?.label }}</p>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"editingAiFixture?.vmConfig?.length && showVMs\">\r\n <ng-container *ngFor=\"let vm of editingAiFixture?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container>\r\n <img *ngIf=\"vm?.vmImage; else placeholder\" [src]=\"imgCDN + vm?.vmImage\"\r\n alt=\"Vm Image\" class=\"cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\" />\r\n\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder cursor-pointer\" [class.diff-border]=\"vm?.isDifferent\">\r\n <h3>{{ vm?.vmName }}</h3>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"editMode\" class=\"vm-actions\">\r\n <svg (click)=\"deleteVm(i)\" class=\"cursor-pointer\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <path\r\n d=\"M8.5 10H9.5M9.5 10H17.5M9.5 10V17C9.5 17.2652 9.60536 17.5196 9.79289 17.7071C9.98043 17.8946 10.2348 18 10.5 18H15.5C15.7652 18 16.0196 17.8946 16.2071 17.7071C16.3946 17.5196 16.5 17.2652 16.5 17V10H9.5ZM11 10V9C11 8.73478 11.1054 8.48043 11.2929 8.29289C11.4804 8.10536 11.7348 8 12 8H14C14.2652 8 14.5196 8.10536 14.7071 8.29289C14.8946 8.48043 15 8.73478 15 9V10M12 12.5V15.5M14 12.5V15.5\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg (click)=\"editVm()\" class=\"cursor-pointer ms-1\" style=\"height: 22px;\" width=\"26\"\r\n height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" fill=\"#F2F4F7\" />\r\n <rect x=\"1\" y=\"1\" width=\"24\" height=\"24\" rx=\"12\" stroke=\"#EAECF0\"\r\n stroke-width=\"2\" />\r\n <g clip-path=\"url(#clip0_476_30801)\">\r\n <path\r\n d=\"M15.5 8.50015C15.6313 8.36883 15.7872 8.26466 15.9588 8.19359C16.1304 8.12252 16.3143 8.08594 16.5 8.08594C16.6857 8.08594 16.8696 8.12252 17.0412 8.19359C17.2128 8.26466 17.3687 8.36883 17.5 8.50015C17.6313 8.63147 17.7355 8.78737 17.8066 8.95895C17.8776 9.13054 17.9142 9.31443 17.9142 9.50015C17.9142 9.68587 17.8776 9.86977 17.8066 10.0413C17.7355 10.2129 17.6313 10.3688 17.5 10.5002L10.75 17.2502L8 18.0002L8.75 15.2502L15.5 8.50015Z\"\r\n stroke=\"#475467\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_476_30801\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(7 7)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L1' && showBCs\">\r\n <div id=\"brand-category\" class=\"brand-category\" *ngIf=\"editingAiFixture?.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of editingAiFixture?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"editingAiFixture?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of editingAiFixture?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L3' && showBCs\">\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\" *ngFor=\"let item of editingAiFixture?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"editingAiFixture?.productResolutionLevel === 'L2' && showBCs\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n\r\n <div class=\"input-container\">\r\n <input [class.diff]=\"item?.isDifferent\" class=\"value edit-input form-control\"\r\n type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\"\r\n [disabled]=\"!editMode\" [value]=\"getQuickItem(item.shelfType + (i + 1))?.value\"\r\n (input)=\"onCapacityInput($event, getQuickItem(item.shelfType + (i + 1))!)\"\r\n [ngClass]=\"{\r\n 'border-red': isInvalidQuickValue(getQuickItem(item.shelfType + (i + 1))?.value) && isQuickEditSubmitted\r\n }\" />\r\n </div>\r\n\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n\r\n <!-- Tray visual -->\r\n <div *ngFor=\"let row of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n\r\n <!-- Tray inputs -->\r\n <div class=\"input-container\">\r\n <div class=\"row-container d-flex gap-1 align-items-center\"\r\n [ngClass]=\"{'border-red': isInvalidTray(item) && isQuickEditSubmitted}\">\r\n <!-- ngbTooltip=\"Total rows x Capacity per row = Total capacity\" -->\r\n <!-- Tray rows -->\r\n <input class=\"value edit-input form-control\" style=\"right: 58px;\" type=\"text\"\r\n inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"R\"\r\n [disabled]=\"!editMode\" [value]=\"item.trayRows\"\r\n (input)=\"onTrayRowChange($event, item)\" />\r\n x\r\n <!-- Products per row -->\r\n <input class=\"value edit-input form-control\" type=\"text\" inputmode=\"numeric\"\r\n pattern=\"[0-9]*\" autocomplete=\"off\" placeholder=\"C\" [disabled]=\"!editMode\"\r\n [value]=\"item.productPerShelf\" (input)=\"onTrayProductChange($event, item)\" />\r\n =\r\n <span style=\"font-size: 14px; font-weight: 400;\"\r\n [class.diff]=\"item?.isDifferent\">{{item.trayRows && item.productPerShelf ? item.trayRows * item.productPerShelf : 0}}</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"editingAiFixture?.footer?.isEnabled && editingAiFixture?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ editingAiFixture?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </section>\r\n}", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}.quick-btn:hover{box-shadow:0 1px 2px #10182834}.quick-edit-actions{margin-top:-36px;margin-bottom:12px;width:100%;display:flex;justify-content:end;align-items:center;gap:6px}.diff{color:#d92d20!important;font-weight:600}.diff-border{border:4px solid var(--Black, rgb(255, 0, 0))}#fixture-view .wall-viewport{max-width:340px;width:unset}#fixture-view #vm-products-sum{margin:0 auto}#fixture-view #vm-products-sum .body-block{position:relative}#fixture-view #vm-products-sum .body-block .block{border:1px solid #98a2b3}#fixture-view #vm-products-sum .body-block .block .row-container{border:.77px solid rgb(208,213,221);box-shadow:0 .77px 1.55px #1018280d;padding:4px 8px;background:#fff;border-radius:6px}#fixture-view #vm-products-sum .body-block .block .row-container .edit-input{width:37px;padding:8px 2px;background:transparent;border:none!important}#fixture-view #vm-products-sum .body-block .block .edit-input{border-radius:6px;padding:14px 4px;width:40px;height:26px;box-shadow:0 .77px 1.55px #1018280d;text-align:center;background:#fff;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .input-container{position:absolute;right:12px;top:10px;transition:all .3s ease}#fixture-view #vm-products-sum .body-block .block .border-red{border-color:#e03131!important}#fixture-view #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:50%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-view #vm-products-sum #fixture-level .brand,#fixture-view #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-view #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-view #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-view #vm-products-sum #section-level .brand,#fixture-view #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-view #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-view #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-view #vm-products-sum #shelf-level .brand,#fixture-view #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-view #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-view #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-view #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}#fixture-view #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-view #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-view #vm-products-sum img{width:100%;height:100%;display:block}#fixture-view #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-view #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-view #vm-products-sum .vm-block:hover .vm-actions{display:flex;width:100%;position:absolute;height:100%;justify-content:center;align-items:center;top:0}#fixture-view #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-view #vm-products-sum .vm-actions{display:none;width:100%;height:100%}\n"] }]
|
|
11209
|
+
}], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }], propDecorators: { fixture: [{
|
|
11212
11210
|
type: Input
|
|
11213
11211
|
}], showColors: [{
|
|
11214
11212
|
type: Input
|
|
@@ -11237,7 +11235,7 @@ class VerificationFeedbackComponent {
|
|
|
11237
11235
|
feedbackDetails;
|
|
11238
11236
|
cdn;
|
|
11239
11237
|
showAction = true;
|
|
11240
|
-
vmList = [];
|
|
11238
|
+
// @Input() vmList: VmLibraryList[] = [];
|
|
11241
11239
|
changeFixture = new EventEmitter();
|
|
11242
11240
|
action = new EventEmitter();
|
|
11243
11241
|
selectedFeedbackData;
|
|
@@ -11280,7 +11278,7 @@ class VerificationFeedbackComponent {
|
|
|
11280
11278
|
this.totalFixtures.findIndex((f) => f._id === this.feedbackDetails?.fixtureFeedback?.fixtureId) + 1;
|
|
11281
11279
|
this.planoFixture = structuredClone(this.feedbackDetails?.fixtureFeedback?.FixtureData);
|
|
11282
11280
|
this.aiFixture = this.processAIFixtureData();
|
|
11283
|
-
this.updateVMlistWithAiData();
|
|
11281
|
+
// this.updateVMlistWithAiData();
|
|
11284
11282
|
if (!this.isApproved) {
|
|
11285
11283
|
this.compareFixture(this.aiFixture, this.planoFixture);
|
|
11286
11284
|
}
|
|
@@ -11291,7 +11289,7 @@ class VerificationFeedbackComponent {
|
|
|
11291
11289
|
...this.planoFixture,
|
|
11292
11290
|
...this.feedbackDetails?.fixtureFeedback?.fixtureAIData,
|
|
11293
11291
|
header: {
|
|
11294
|
-
...this.planoFixture
|
|
11292
|
+
...this.planoFixture?.header,
|
|
11295
11293
|
...this.feedbackDetails?.fixtureFeedback?.fixtureAIData?.header,
|
|
11296
11294
|
},
|
|
11297
11295
|
});
|
|
@@ -11349,29 +11347,30 @@ class VerificationFeedbackComponent {
|
|
|
11349
11347
|
aiVM.isDifferent = !currentVMSet.has(vmKey(aiVM));
|
|
11350
11348
|
});
|
|
11351
11349
|
}
|
|
11352
|
-
updateVMlistWithAiData() {
|
|
11353
|
-
|
|
11354
|
-
|
|
11355
|
-
|
|
11356
|
-
|
|
11357
|
-
|
|
11358
|
-
|
|
11359
|
-
|
|
11360
|
-
|
|
11361
|
-
|
|
11362
|
-
|
|
11363
|
-
|
|
11364
|
-
|
|
11365
|
-
|
|
11366
|
-
|
|
11367
|
-
|
|
11368
|
-
|
|
11369
|
-
|
|
11370
|
-
|
|
11371
|
-
|
|
11372
|
-
|
|
11373
|
-
|
|
11374
|
-
}
|
|
11350
|
+
// updateVMlistWithAiData() {
|
|
11351
|
+
// this.aiFixture?.vmConfig?.forEach((aiVm: any) => {
|
|
11352
|
+
// // console.log("@@ ~ aiVm:", aiVm);
|
|
11353
|
+
// const vmInList = this.vmList.find(
|
|
11354
|
+
// (vm) => vm.name === aiVm?.vmName && vm.type === aiVm?.vmType
|
|
11355
|
+
// );
|
|
11356
|
+
// if (vmInList) {
|
|
11357
|
+
// // vmInList.id = aiVm.vmName;
|
|
11358
|
+
// if (aiVm?.vmImage) {
|
|
11359
|
+
// vmInList.imgUrl = `${this.imgCDN}${aiVm.vmImage}`;
|
|
11360
|
+
// }
|
|
11361
|
+
// } else {
|
|
11362
|
+
// this.vmList.push({
|
|
11363
|
+
// id: aiVm.vmName,
|
|
11364
|
+
// name: aiVm.vmName,
|
|
11365
|
+
// displayName: aiVm.vmName + (aiVm?.vmType ? `(${aiVm.vmType})` : ""),
|
|
11366
|
+
// width: 100,
|
|
11367
|
+
// height: 100,
|
|
11368
|
+
// type: aiVm.vmType,
|
|
11369
|
+
// ...(aiVm.vmImage ? { imgUrl: `${this.imgCDN}${aiVm.vmImage}` } : {}),
|
|
11370
|
+
// } as any);
|
|
11371
|
+
// }
|
|
11372
|
+
// });
|
|
11373
|
+
// }
|
|
11375
11374
|
get isApproved() {
|
|
11376
11375
|
return this.feedbackDetails?.fixtureFeedback?.approvalStatus === "approved";
|
|
11377
11376
|
}
|
|
@@ -11525,11 +11524,11 @@ class VerificationFeedbackComponent {
|
|
|
11525
11524
|
this.destroy$.complete();
|
|
11526
11525
|
}
|
|
11527
11526
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VerificationFeedbackComponent, deps: [{ token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
11528
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: { floorData: "floorData", totalFixtures: "totalFixtures", feedbackDetails: "feedbackDetails", cdn: "cdn", showAction: "showAction", vmList: "vmList" }, outputs: { changeFixture: "changeFixture", action: "action" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"verification-feedback\">\r\n\r\n <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n <div ngbAccordionHeader class=\"accordion-button task-info-header\">\r\n <div ngbAccordionToggle class=\"w-100\">\r\n <h2>Fixture verification assigned</h2>\r\n <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"log-block\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n </p>\r\n <h5>Assigner</h5>\r\n </div>\r\n </div>\r\n\r\n <div class=\"log-block\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n </p>\r\n <h5>Assignee</h5>\r\n </div>\r\n </div>\r\n\r\n\r\n @if (feedbackDetails?.globalComments?.length) {\r\n <h5 class=\"mb-2\">Comments</h5>\r\n <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n <h5>{{c?.comment}}</h5>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureCategory | titlecase}}\r\n </span>\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n </span>\r\n\r\n </div>\r\n\r\n <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n </h3>\r\n\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n\r\n @if( this.aiFixture?.fixtureId){\r\n <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n @if (showAction) {\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n @if (!isApproved && showAction) {\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Keep plano\r\n </button>\r\n }\r\n </div>\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <h4 class=\"m-0\">Existing template </h4>\r\n <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_496_31664)\">\r\n <path\r\n d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_496_31664\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <fixture [fixture]=\"planoFixture\" [vmList]=\"vmList\"></fixture>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n @if (!isApproved && showAction) {\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\">\r\n Redo\r\n </button>\r\n\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Accept store response\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" />\r\n </svg>\r\n\r\n\r\n <h4>Store response </h4>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n fill=\"black\" />\r\n </svg>\r\n }@else {\r\n <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n\r\n\r\n </div>\r\n </div>\r\n <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\" [vmList]=\"vmList\"\r\n (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n <div class=\"wrapper\">\r\n <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <h4>Store Image </h4>\r\n </div>\r\n </div>\r\n @if(cdn && aiFixture?.fixtureImage){\r\n <div class=\"fixture-image\" (click)=\"onClickImagePreview(cdn + aiFixture?.fixtureImage)\">\r\n <img [src]=\"cdn + aiFixture?.fixtureImage\" alt=\"Store response image\">\r\n </div>\r\n }@else {\r\n <div class=\"text-center my-7\">\r\n <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n fill=\"#EAECF0\" />\r\n <path\r\n d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n <div class=\"row g-0\">\r\n\r\n @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n <div class=\"vm-container\" (click)=\"onClickImagePreview(cdn+vm?.vmImage)\">\r\n <div class=\"vm-img\">\r\n <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n </div>\r\n <div class=\"d-flex flex-column gap-2 vm-details \">\r\n <h5>{{vm?.vmType}}</h5>\r\n <h5>{{vm?.vmName}}</h5>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n <img [src]=\"selectedImageForPreview\" class=\"full-img\" />\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"my-6\">\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <div class=\"mt-3 text-center\">\r\n <div class=\"fw-bold h3 mt-2\">No response</div>\r\n <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }@else if(c?.responsetype === 'agree'){\r\n\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n Marked as \"Keep Plano\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n Marked as \"Keep Plano with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n Marked as \"Accept AI\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n Marked as \"Accept AI with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }@else if(c?.responsetype === 'disagree'){\r\n <h5>\r\n Marked as \"Redo\"\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback #vm-comparison .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}#verification-feedback #vm-comparison .full-img{max-width:98vw;max-height:98vh;border-radius:10px;object-fit:contain}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionToggle, selector: "[ngbAccordionToggle]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: FixtureComponent, selector: "fixture", inputs: ["fixture", "vmList", "showColors", "showVMs", "showBCs"] }, { kind: "component", type: EditableFixtureComponent, selector: "editable-fixture", inputs: ["vmList", "fixture", "showColors", "showVMs", "showBCs", "editMode"], outputs: ["onCancel", "onDone", "editTab"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
11527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: { floorData: "floorData", totalFixtures: "totalFixtures", feedbackDetails: "feedbackDetails", cdn: "cdn", showAction: "showAction" }, outputs: { changeFixture: "changeFixture", action: "action" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"verification-feedback\">\r\n\r\n <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n <div ngbAccordionHeader class=\"accordion-button task-info-header\">\r\n <div ngbAccordionToggle class=\"w-100\">\r\n <h2>Fixture verification assigned</h2>\r\n <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"log-block\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n </p>\r\n <h5>Assigner</h5>\r\n </div>\r\n </div>\r\n\r\n <div class=\"log-block\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n </p>\r\n <h5>Assignee</h5>\r\n </div>\r\n </div>\r\n\r\n\r\n @if (feedbackDetails?.globalComments?.length) {\r\n <h5 class=\"mb-2\">Comments</h5>\r\n <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n <h5>{{c?.comment}}</h5>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureCategory | titlecase}}\r\n </span>\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n </span>\r\n\r\n </div>\r\n\r\n <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n </h3>\r\n\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n\r\n @if( this.aiFixture?.fixtureId){\r\n <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n @if (showAction) {\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n @if (!isApproved && showAction) {\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Keep plano\r\n </button>\r\n }\r\n </div>\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <h4 class=\"m-0\">Existing template </h4>\r\n <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_496_31664)\">\r\n <path\r\n d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_496_31664\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <fixture [fixture]=\"planoFixture\"></fixture>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n @if (!isApproved && showAction) {\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\">\r\n Redo\r\n </button>\r\n\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Accept store response\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" />\r\n </svg>\r\n\r\n\r\n <h4>Store response </h4>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n fill=\"black\" />\r\n </svg>\r\n }@else {\r\n <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n\r\n\r\n </div>\r\n </div>\r\n <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\"\r\n (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n <div class=\"wrapper\">\r\n <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <h4>Store Image </h4>\r\n </div>\r\n </div>\r\n @if(cdn && aiFixture?.fixtureImage){\r\n <div class=\"fixture-image\" (click)=\"onClickImagePreview(cdn + aiFixture?.fixtureImage)\">\r\n <img [src]=\"cdn + aiFixture?.fixtureImage\" alt=\"Store response image\">\r\n </div>\r\n }@else {\r\n <div class=\"text-center my-7\">\r\n <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n fill=\"#EAECF0\" />\r\n <path\r\n d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n <div class=\"row g-0\">\r\n\r\n @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n <div class=\"vm-container\" (click)=\"onClickImagePreview(cdn+vm?.vmImage)\">\r\n <div class=\"vm-img\">\r\n <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n </div>\r\n <div class=\"d-flex flex-column gap-2 vm-details \">\r\n <h5>{{vm?.vmType}}</h5>\r\n <h5>{{vm?.vmName}}</h5>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n <img [src]=\"selectedImageForPreview\" class=\"full-img\" />\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"my-6\">\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <div class=\"mt-3 text-center\">\r\n <div class=\"fw-bold h3 mt-2\">No response</div>\r\n <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }@else if(c?.responsetype === 'agree'){\r\n\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n Marked as \"Keep Plano\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n Marked as \"Keep Plano with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n Marked as \"Accept AI\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n Marked as \"Accept AI with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }@else if(c?.responsetype === 'disagree'){\r\n <h5>\r\n Marked as \"Redo\"\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback #vm-comparison .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}#verification-feedback #vm-comparison .full-img{max-width:98vw;max-height:98vh;border-radius:10px;object-fit:contain}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionToggle, selector: "[ngbAccordionToggle]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: FixtureComponent, selector: "fixture", inputs: ["fixture", "showColors", "showVMs", "showBCs"] }, { kind: "component", type: EditableFixtureComponent, selector: "editable-fixture", inputs: ["fixture", "showColors", "showVMs", "showBCs", "editMode"], outputs: ["onCancel", "onDone", "editTab"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
11529
11528
|
}
|
|
11530
11529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VerificationFeedbackComponent, decorators: [{
|
|
11531
11530
|
type: Component,
|
|
11532
|
-
args: [{ selector: "lib-verification-feedback", template: "<section id=\"verification-feedback\">\r\n\r\n <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n <div ngbAccordionHeader class=\"accordion-button task-info-header\">\r\n <div ngbAccordionToggle class=\"w-100\">\r\n <h2>Fixture verification assigned</h2>\r\n <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"log-block\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n </p>\r\n <h5>Assigner</h5>\r\n </div>\r\n </div>\r\n\r\n <div class=\"log-block\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n </p>\r\n <h5>Assignee</h5>\r\n </div>\r\n </div>\r\n\r\n\r\n @if (feedbackDetails?.globalComments?.length) {\r\n <h5 class=\"mb-2\">Comments</h5>\r\n <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n <h5>{{c?.comment}}</h5>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureCategory | titlecase}}\r\n </span>\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n </span>\r\n\r\n </div>\r\n\r\n <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n </h3>\r\n\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n\r\n @if( this.aiFixture?.fixtureId){\r\n <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n @if (showAction) {\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n @if (!isApproved && showAction) {\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Keep plano\r\n </button>\r\n }\r\n </div>\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <h4 class=\"m-0\">Existing template </h4>\r\n <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_496_31664)\">\r\n <path\r\n d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_496_31664\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <fixture [fixture]=\"planoFixture\" [vmList]=\"vmList\"></fixture>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n @if (!isApproved && showAction) {\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\">\r\n Redo\r\n </button>\r\n\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Accept store response\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" />\r\n </svg>\r\n\r\n\r\n <h4>Store response </h4>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n fill=\"black\" />\r\n </svg>\r\n }@else {\r\n <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n\r\n\r\n </div>\r\n </div>\r\n <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\" [vmList]=\"vmList\"\r\n (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n <div class=\"wrapper\">\r\n <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <h4>Store Image </h4>\r\n </div>\r\n </div>\r\n @if(cdn && aiFixture?.fixtureImage){\r\n <div class=\"fixture-image\" (click)=\"onClickImagePreview(cdn + aiFixture?.fixtureImage)\">\r\n <img [src]=\"cdn + aiFixture?.fixtureImage\" alt=\"Store response image\">\r\n </div>\r\n }@else {\r\n <div class=\"text-center my-7\">\r\n <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n fill=\"#EAECF0\" />\r\n <path\r\n d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n <div class=\"row g-0\">\r\n\r\n @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n <div class=\"vm-container\" (click)=\"onClickImagePreview(cdn+vm?.vmImage)\">\r\n <div class=\"vm-img\">\r\n <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n </div>\r\n <div class=\"d-flex flex-column gap-2 vm-details \">\r\n <h5>{{vm?.vmType}}</h5>\r\n <h5>{{vm?.vmName}}</h5>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n <img [src]=\"selectedImageForPreview\" class=\"full-img\" />\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"my-6\">\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <div class=\"mt-3 text-center\">\r\n <div class=\"fw-bold h3 mt-2\">No response</div>\r\n <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }@else if(c?.responsetype === 'agree'){\r\n\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n Marked as \"Keep Plano\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n Marked as \"Keep Plano with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n Marked as \"Accept AI\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n Marked as \"Accept AI with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }@else if(c?.responsetype === 'disagree'){\r\n <h5>\r\n Marked as \"Redo\"\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback #vm-comparison .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}#verification-feedback #vm-comparison .full-img{max-width:98vw;max-height:98vh;border-radius:10px;object-fit:contain}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}\n"] }]
|
|
11531
|
+
args: [{ selector: "lib-verification-feedback", template: "<section id=\"verification-feedback\">\r\n\r\n <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n <div ngbAccordionHeader class=\"accordion-button task-info-header\">\r\n <div ngbAccordionToggle class=\"w-100\">\r\n <h2>Fixture verification assigned</h2>\r\n <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"log-block\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n </p>\r\n <h5>Assigner</h5>\r\n </div>\r\n </div>\r\n\r\n <div class=\"log-block\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n <p>\r\n {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n </p>\r\n <h5>Assignee</h5>\r\n </div>\r\n </div>\r\n\r\n\r\n @if (feedbackDetails?.globalComments?.length) {\r\n <h5 class=\"mb-2\">Comments</h5>\r\n <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n <h5>{{c?.comment}}</h5>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureCategory | titlecase}}\r\n </span>\r\n\r\n <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n </svg>\r\n\r\n <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n </span>\r\n\r\n </div>\r\n\r\n <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n </h3>\r\n\r\n <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n\r\n @if( this.aiFixture?.fixtureId){\r\n <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n @if (showAction) {\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n @if (!isApproved && showAction) {\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Keep plano\r\n </button>\r\n }\r\n </div>\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <h4 class=\"m-0\">Existing template </h4>\r\n <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_496_31664)\">\r\n <path\r\n d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_496_31664\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <fixture [fixture]=\"planoFixture\"></fixture>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-4 p-2\">\r\n <div class=\"wrapper\">\r\n @if (!isApproved && showAction) {\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\">\r\n Redo\r\n </button>\r\n\r\n <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_228_12536)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_228_12536\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n [disabled]=\"isAIQuickEdit\">\r\n Accept store response\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"mb-4\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" />\r\n </svg>\r\n\r\n\r\n <h4>Store response </h4>\r\n\r\n @if (isApproved) {\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n fill=\"black\" />\r\n </svg>\r\n }@else {\r\n <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n\r\n\r\n </div>\r\n </div>\r\n <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\"\r\n (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n <div class=\"wrapper\">\r\n <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n <div class=\"d-flex align-items-center gap-2 my-4\">\r\n <h4>Store Image </h4>\r\n </div>\r\n </div>\r\n @if(cdn && aiFixture?.fixtureImage){\r\n <div class=\"fixture-image\" (click)=\"onClickImagePreview(cdn + aiFixture?.fixtureImage)\">\r\n <img [src]=\"cdn + aiFixture?.fixtureImage\" alt=\"Store response image\">\r\n </div>\r\n }@else {\r\n <div class=\"text-center my-7\">\r\n <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n fill=\"#EAECF0\" />\r\n <path\r\n d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n <div class=\"row g-0\">\r\n\r\n @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n <div class=\"vm-container\" (click)=\"onClickImagePreview(cdn+vm?.vmImage)\">\r\n <div class=\"vm-img\">\r\n <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n </div>\r\n <div class=\"d-flex flex-column gap-2 vm-details \">\r\n <h5>{{vm?.vmType}}</h5>\r\n <h5>{{vm?.vmName}}</h5>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n <img [src]=\"selectedImageForPreview\" class=\"full-img\" />\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"my-6\">\r\n <div class=\"text-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <div class=\"mt-3 text-center\">\r\n <div class=\"fw-bold h3 mt-2\">No response</div>\r\n <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\"\r\n *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }@else if(c?.responsetype === 'agree'){\r\n\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n Marked as \"Keep Plano\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n Marked as \"Keep Plano with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n Marked as \"Accept AI\".\r\n </h5>\r\n <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n Marked as \"Accept AI with Modification\".\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }@else if(c?.responsetype === 'disagree'){\r\n <h5>\r\n Marked as \"Redo\"\r\n </h5>\r\n <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback #vm-comparison .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}#verification-feedback #vm-comparison .full-img{max-width:98vw;max-height:98vh;border-radius:10px;object-fit:contain}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}\n"] }]
|
|
11533
11532
|
}], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }], propDecorators: { floorData: [{
|
|
11534
11533
|
type: Input
|
|
11535
11534
|
}], totalFixtures: [{
|
|
@@ -11540,8 +11539,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
11540
11539
|
type: Input
|
|
11541
11540
|
}], showAction: [{
|
|
11542
11541
|
type: Input
|
|
11543
|
-
}], vmList: [{
|
|
11544
|
-
type: Input
|
|
11545
11542
|
}], changeFixture: [{
|
|
11546
11543
|
type: Output
|
|
11547
11544
|
}], action: [{
|
|
@@ -11622,10 +11619,11 @@ class ManageStorePlanoComponent {
|
|
|
11622
11619
|
];
|
|
11623
11620
|
storeList = [];
|
|
11624
11621
|
selectedStoreName;
|
|
11625
|
-
vmList = [];
|
|
11622
|
+
// vmList: VmLibraryList[] = [];
|
|
11626
11623
|
// isUserInteractedWithCanvas: boolean = false;
|
|
11627
11624
|
activeHighlight = null;
|
|
11628
11625
|
cancelHighlightBlink = false;
|
|
11626
|
+
isButtonLoading = false;
|
|
11629
11627
|
layoutBounds;
|
|
11630
11628
|
constructor(apiService, route, fb, gs, titleCase, toastService, modalService, pageInfo, location, router, cd) {
|
|
11631
11629
|
this.apiService = apiService;
|
|
@@ -11657,7 +11655,7 @@ class ManageStorePlanoComponent {
|
|
|
11657
11655
|
let headerData = JSON.parse(localStorage.getItem("header-filters"));
|
|
11658
11656
|
this.clientId = headerData?.client;
|
|
11659
11657
|
}
|
|
11660
|
-
await this.getVmsList();
|
|
11658
|
+
// await this.getVmsList();
|
|
11661
11659
|
});
|
|
11662
11660
|
}
|
|
11663
11661
|
ngAfterViewInit() {
|
|
@@ -11760,7 +11758,7 @@ class ManageStorePlanoComponent {
|
|
|
11760
11758
|
this.listenToDeleteKey();
|
|
11761
11759
|
this.togglePanel("left", true);
|
|
11762
11760
|
}
|
|
11763
|
-
updateAllPositions() {
|
|
11761
|
+
async updateAllPositions() {
|
|
11764
11762
|
this.updateWallCoordinates();
|
|
11765
11763
|
this.updateFixtureCoordinates();
|
|
11766
11764
|
this.updateOtherElementsCoordinates();
|
|
@@ -11855,29 +11853,30 @@ class ManageStorePlanoComponent {
|
|
|
11855
11853
|
},
|
|
11856
11854
|
]);
|
|
11857
11855
|
}
|
|
11858
|
-
async getVmsList() {
|
|
11859
|
-
|
|
11860
|
-
|
|
11861
|
-
|
|
11862
|
-
|
|
11863
|
-
|
|
11864
|
-
|
|
11865
|
-
|
|
11866
|
-
|
|
11867
|
-
|
|
11868
|
-
|
|
11869
|
-
|
|
11870
|
-
|
|
11871
|
-
|
|
11872
|
-
|
|
11873
|
-
|
|
11874
|
-
|
|
11875
|
-
|
|
11876
|
-
|
|
11877
|
-
|
|
11878
|
-
|
|
11879
|
-
|
|
11880
|
-
}
|
|
11856
|
+
// async getVmsList() {
|
|
11857
|
+
// try {
|
|
11858
|
+
// const res: any = await firstValueFrom(
|
|
11859
|
+
// this.apiService.getVMNameList(this.clientId),
|
|
11860
|
+
// );
|
|
11861
|
+
// if (res?.status === "success") {
|
|
11862
|
+
// this.vmList = res?.data?.map((item: any) => {
|
|
11863
|
+
// return {
|
|
11864
|
+
// id: item._id,
|
|
11865
|
+
// name: item.vmName,
|
|
11866
|
+
// displayName: item.vmName,
|
|
11867
|
+
// width: item.vmWidth.value,
|
|
11868
|
+
// height: item.vmHeight.value,
|
|
11869
|
+
// type: item.vmType,
|
|
11870
|
+
// ...(item.vmImageUrl
|
|
11871
|
+
// ? { imgUrl: `${this.cdnUrl}${item.vmImageUrl}` }
|
|
11872
|
+
// : {}),
|
|
11873
|
+
// };
|
|
11874
|
+
// });
|
|
11875
|
+
// }
|
|
11876
|
+
// } catch (error) {
|
|
11877
|
+
// console.log("@@ ~ getVmsList [ERR]:", error);
|
|
11878
|
+
// }
|
|
11879
|
+
// }
|
|
11881
11880
|
onFixtureSave() {
|
|
11882
11881
|
this.submitFixture = true;
|
|
11883
11882
|
// this.selectedFixtureData.taskType = this.publishingState;
|
|
@@ -11937,7 +11936,7 @@ class ManageStorePlanoComponent {
|
|
|
11937
11936
|
}
|
|
11938
11937
|
else {
|
|
11939
11938
|
if (event) {
|
|
11940
|
-
this.getVmsList();
|
|
11939
|
+
// this.getVmsList();
|
|
11941
11940
|
this.createForm();
|
|
11942
11941
|
this.selectedFixtureData = null;
|
|
11943
11942
|
this.editFixtureSection = "basic-details";
|
|
@@ -14356,7 +14355,7 @@ class ManageStorePlanoComponent {
|
|
|
14356
14355
|
};
|
|
14357
14356
|
await firstValueFrom(this.apiService.updateStoreFixture(updateFixturePayload));
|
|
14358
14357
|
this.createForm();
|
|
14359
|
-
this.getVmsList();
|
|
14358
|
+
// this.getVmsList();
|
|
14360
14359
|
await this.getStoreFixtures(this.planoData._id);
|
|
14361
14360
|
}
|
|
14362
14361
|
catch (error) {
|
|
@@ -15396,17 +15395,36 @@ class ManageStorePlanoComponent {
|
|
|
15396
15395
|
catch (err) { }
|
|
15397
15396
|
}
|
|
15398
15397
|
async approveLayout() {
|
|
15398
|
+
this.isButtonLoading = true;
|
|
15399
15399
|
try {
|
|
15400
|
-
const
|
|
15401
|
-
|
|
15402
|
-
this.
|
|
15403
|
-
|
|
15404
|
-
|
|
15405
|
-
|
|
15400
|
+
const floorId = this.floorData._id;
|
|
15401
|
+
const publishData = {
|
|
15402
|
+
...structuredClone(this.planoData),
|
|
15403
|
+
floorId,
|
|
15404
|
+
floorData: {
|
|
15405
|
+
...this.floorData,
|
|
15406
|
+
masterTemplates: undefined,
|
|
15407
|
+
},
|
|
15408
|
+
floors: undefined,
|
|
15409
|
+
};
|
|
15410
|
+
await Promise.all([
|
|
15411
|
+
firstValueFrom(this.apiService.updateStorePlano({
|
|
15412
|
+
floorId,
|
|
15413
|
+
data: this.floorData,
|
|
15414
|
+
})),
|
|
15415
|
+
firstValueFrom(this.apiService.publish(publishData)),
|
|
15416
|
+
firstValueFrom(this.apiService.approvePlanoLayout(floorId)),
|
|
15417
|
+
]);
|
|
15418
|
+
this.floorData.isPlanoApproved = true;
|
|
15419
|
+
this.toastService.getSuccessToast("Layout approved successfully");
|
|
15420
|
+
this.modalService.dismissAll();
|
|
15406
15421
|
}
|
|
15407
15422
|
catch (error) {
|
|
15408
|
-
console.
|
|
15409
|
-
this.toastService.getErrorToast("Failed to approve layout
|
|
15423
|
+
console.error("approveLayout failed:", error);
|
|
15424
|
+
this.toastService.getErrorToast("Failed to approve layout");
|
|
15425
|
+
}
|
|
15426
|
+
finally {
|
|
15427
|
+
this.isButtonLoading = false;
|
|
15410
15428
|
}
|
|
15411
15429
|
}
|
|
15412
15430
|
ngOnDestroy() {
|
|
@@ -15414,11 +15432,11 @@ class ManageStorePlanoComponent {
|
|
|
15414
15432
|
this.destroy$.complete();
|
|
15415
15433
|
}
|
|
15416
15434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
15417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n <!-- {{ planoData?.storeName }} -->\r\n <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n </lib-reactive-select>\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 190px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled\"\r\n [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Submit\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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n (isApproved)=\"handleApproverResponse($event)\">\r\n </app-manage-store-plano-feedback> -->\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" [vmList]=\"vmList\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">Approve</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction", "vmList"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
|
|
15435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n <!-- {{ planoData?.storeName }} -->\r\n <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n </lib-reactive-select>\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 190px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled\"\r\n [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Submit\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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n (isApproved)=\"handleApproverResponse($event)\">\r\n </app-manage-store-plano-feedback> -->\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
|
|
15418
15436
|
}
|
|
15419
15437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, decorators: [{
|
|
15420
15438
|
type: Component,
|
|
15421
|
-
args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n <!-- {{ planoData?.storeName }} -->\r\n <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n </lib-reactive-select>\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 190px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled\"\r\n [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Submit\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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n (isApproved)=\"handleApproverResponse($event)\">\r\n </app-manage-store-plano-feedback> -->\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" [vmList]=\"vmList\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">Approve</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}\n"] }]
|
|
15439
|
+
args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n <!-- {{ planoData?.storeName }} -->\r\n <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\" [idField]=\"'_id'\"\r\n [nameField]=\"'floorNum'\" [data]=\"planoData.floors\">\r\n </lib-reactive-select>\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 190px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled\"\r\n [disabled]=\"disableEdit || ['taskAssigned','reviewPending'].includes(taskStyle.fixture.class)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Submit\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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [currentPlano]=\"floorData\" [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n (isApproved)=\"handleApproverResponse($event)\">\r\n </app-manage-store-plano-feedback> -->\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
15422
15440
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
|
|
15423
15441
|
type: ViewChild,
|
|
15424
15442
|
args: ["baseCanvas"]
|
|
@@ -23422,15 +23440,16 @@ class PlanoFilterComponent {
|
|
|
23422
23440
|
{ name: "( ) Between", value: "between", checked: false },
|
|
23423
23441
|
],
|
|
23424
23442
|
},
|
|
23425
|
-
|
|
23426
|
-
|
|
23427
|
-
|
|
23428
|
-
|
|
23429
|
-
|
|
23430
|
-
|
|
23431
|
-
|
|
23432
|
-
|
|
23433
|
-
|
|
23443
|
+
{
|
|
23444
|
+
title: "Store category",
|
|
23445
|
+
type: "single",
|
|
23446
|
+
isOpened: false,
|
|
23447
|
+
options: [
|
|
23448
|
+
{ name: "All", value: "", checked: false },
|
|
23449
|
+
{ name: "IVM", value: "ivm", checked: false },
|
|
23450
|
+
{ name: "Non IVM", value: "nonivm", checked: false },
|
|
23451
|
+
],
|
|
23452
|
+
},
|
|
23434
23453
|
];
|
|
23435
23454
|
applyFilters = new EventEmitter();
|
|
23436
23455
|
resetFilters = new EventEmitter();
|
|
@@ -23738,8 +23757,8 @@ class PlanoFilterComponent {
|
|
|
23738
23757
|
const country = finalData[0].selected;
|
|
23739
23758
|
const city = finalData[1].selected;
|
|
23740
23759
|
const compliance = finalData[2].selected;
|
|
23741
|
-
|
|
23742
|
-
if (country.length || city.length || compliance) {
|
|
23760
|
+
const planoStrategy = finalData[3].selected;
|
|
23761
|
+
if (country.length || city.length || compliance || planoStrategy) {
|
|
23743
23762
|
this.isFilterApplied = true;
|
|
23744
23763
|
}
|
|
23745
23764
|
else {
|
|
@@ -24323,6 +24342,7 @@ class CreatePlanogramComponent {
|
|
|
24323
24342
|
isLayoutExist = false;
|
|
24324
24343
|
isButtonLoading = false;
|
|
24325
24344
|
isCreateStoreMode = false;
|
|
24345
|
+
newStoreDetails;
|
|
24326
24346
|
createStoreForm;
|
|
24327
24347
|
storeTypeList = [
|
|
24328
24348
|
{ label: "High Street", value: "HighStreet" },
|
|
@@ -24450,7 +24470,8 @@ class CreatePlanogramComponent {
|
|
|
24450
24470
|
});
|
|
24451
24471
|
this.selectedStore = newStore.storeId;
|
|
24452
24472
|
this.selectedFloor = this.createStoreForm.get("floor")?.value ?? 1;
|
|
24453
|
-
this.
|
|
24473
|
+
this.newStoreDetails = createStorePayload;
|
|
24474
|
+
this.isCreateStoreMode = false;
|
|
24454
24475
|
}
|
|
24455
24476
|
}
|
|
24456
24477
|
else {
|
|
@@ -24470,8 +24491,13 @@ class CreatePlanogramComponent {
|
|
|
24470
24491
|
}
|
|
24471
24492
|
}
|
|
24472
24493
|
async getSpocUserDetails(storeName) {
|
|
24473
|
-
const
|
|
24474
|
-
|
|
24494
|
+
const safeStoreName = storeName
|
|
24495
|
+
?.toLowerCase()
|
|
24496
|
+
.trim()
|
|
24497
|
+
.replace(/\s+/g, "_")
|
|
24498
|
+
.replace(/[^a-z0-9._-]/g, "");
|
|
24499
|
+
const email = this.createStoreForm.get("email")?.value?.toLowerCase() ||
|
|
24500
|
+
`${safeStoreName}_planogram@lenskart.com`;
|
|
24475
24501
|
try {
|
|
24476
24502
|
const result = await firstValueFrom(this.storeBuilderService.spocEmailCheck({
|
|
24477
24503
|
clientId: this.clientId,
|
|
@@ -24571,8 +24597,8 @@ class CreatePlanogramComponent {
|
|
|
24571
24597
|
this.activeModal.dismiss();
|
|
24572
24598
|
}
|
|
24573
24599
|
onBack() {
|
|
24574
|
-
this.createStoreForm = null;
|
|
24575
24600
|
this.isCreateStoreMode = false;
|
|
24601
|
+
this.newStoreDetails = null;
|
|
24576
24602
|
}
|
|
24577
24603
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreatePlanogramComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: StoreBuilderService }, { token: i4.ToastService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
24578
24604
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CreatePlanogramComponent, isStandalone: true, selector: "app-create-planogram", inputs: { clientId: "clientId" }, providers: [
|
|
@@ -24583,7 +24609,7 @@ class CreatePlanogramComponent {
|
|
|
24583
24609
|
libraries: ["places"],
|
|
24584
24610
|
}),
|
|
24585
24611
|
},
|
|
24586
|
-
], ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n <h3 class=\"mb-4\">Create store layout/plan from CAD</h3>\r\n @if(isCreateStoreMode){\r\n <form [formGroup]=\"createStoreForm\">\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"storeName\" class=\"form-label mb-1\">Store name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n placeholder=\"Type store name\" />\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('required')\">\r\n Store name is required.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('exists')\">\r\n Store already exists.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('whitespace')\">\r\n Store name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\" [label]=\"'Select floor'\"\r\n formControlName=\"floor\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"businessTypeList\"\r\n [label]=\"'Select business type'\" formControlName=\"businessType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"storeTypeList\"\r\n [label]=\"'Select store type'\" formControlName=\"storeType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n @if(createStoreForm.get('storeType')?.value == 'mall'){\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"storeTypeName\" class=\"form-label mb-1\">Enter Mall name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeTypeName\" formControlName=\"storeTypeName\"\r\n placeholder=\"Enter Mall name\" />\r\n <ng-container\r\n *ngIf=\"createStoreForm.get('storeTypeName')?.touched && createStoreForm.get('storeTypeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('whitespace')\">\r\n Mall name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"address\" class=\"form-label mb-1\">Address</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\"\r\n placeholder=\"Search and enter address\" ngx-gp-autocomplete (onAddressChange)=\"onAddressChange($event)\" />\r\n <ng-container *ngIf=\"createStoreForm.get('address')?.touched && createStoreForm.get('address')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"country\" class=\"form-label mb-1\">Country</label>\r\n <input type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\" placeholder=\"Enter Country\" />\r\n <ng-container *ngIf=\"createStoreForm.get('country')?.touched && createStoreForm.get('country')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"state\" class=\"form-label mb-1\">State</label>\r\n <input type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\" placeholder=\"Enter State\" />\r\n <ng-container *ngIf=\"createStoreForm.get('state')?.touched && createStoreForm.get('state')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"city\" class=\"form-label mb-1\">City / Town</label>\r\n <input type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\" placeholder=\"Enter City / Town\" />\r\n <ng-container *ngIf=\"createStoreForm.get('city')?.touched && createStoreForm.get('city')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('city')?.hasError('required')\">\r\n City / Town is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"pincode\" class=\"form-label mb-1\">Pin / Zip Code</label>\r\n <input type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\"\r\n placeholder=\"Enter Pin / Zip Code\" />\r\n <ng-container *ngIf=\"createStoreForm.get('pincode')?.touched && createStoreForm.get('pincode')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('required')\">\r\n Pin / Zip Code is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"createStoreForm.get('pincode')?.hasError('whitespace') || createStoreForm.get('pincode')?.hasError('trimSpaces')\">\r\n Pincode cannot contain whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('invalidPincode')\">\r\n Enter a valid 6-digit pincode\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"email\" class=\"form-label mb-1\">Spoc user email</label>\r\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\r\n placeholder=\"Enter spoc user email\" />\r\n <ng-container *ngIf=\"createStoreForm.get('email')?.touched && createStoreForm.get('email')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('email')?.hasError('email')\">\r\n Email is invalid.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n }\r\n @else {\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6\">\r\n <lib-reactive-select [search]=\"true\" [(ngModel)]=\"selectedStore\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"storeList\" [label]=\"'Select store'\" [action]=\"true\" (actionClick)=\"addNewStore()\"\r\n [actionLabel]=\"'Create new store'\" (ngModelChange)=\"onStoreChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n <div class=\"col-6\">\r\n <lib-reactive-select [(ngModel)]=\"selectedFloor\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\"\r\n [label]=\"'Select floor'\" (ngModelChange)=\"onFloorChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n </div>\r\n <div class=\"layout-exist-wrapper\" [class.show]=\"isLayoutExist\">\r\n <div class=\"layout-exist-warning mb-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F04438\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n This store already has a Floor {{selectedFloor}} planogram. Overwrite it? This can\u2019t be undone.\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-4\">\r\n <file-upload [disabled]=\"isButtonLoading\" (fileChange)=\"onFileChange($event)\"></file-upload>\r\n </div>\r\n }\r\n <div class=\"modal-actions\">\r\n @if(isCreateStoreMode){\r\n <button type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid\" (click)=\"onCreateStore()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n Create\r\n </span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isButtonLoading\"\r\n (click)=\"onCreateLayoutPlano()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\r\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .counter-container{padding:10px!important;border:.49px solid #d0d5dd!important;background-color:#fff!important;justify-content:space-between!important;margin-bottom:26px!important}::ng-deep .modal-content{border-radius:12px!important}.layout-exist-warning{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3f2;border:1px solid #fda29b;border-radius:8px;color:#d92d20;font-family:Inter;font-weight:600;font-size:14px;line-height:20px}.layout-exist-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .25s ease,opacity .2s ease,transform .2s ease}.layout-exist-wrapper.show{max-height:120px;opacity:1;transform:translateY(0)}::ng-deep .create-planogram-modal .modal-dialog{max-width:700px;width:100%}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "component", type: FileUploadComponent, selector: "file-upload", inputs: ["disabled"], outputs: ["fileChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxGpAutocompleteModule }, { kind: "directive", type: i5$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }] });
|
|
24612
|
+
], ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n <h3 class=\"mb-3\">Create store layout/plan from CAD</h3>\r\n @if(isCreateStoreMode){\r\n <div class=\"d-flex algn-items-center gap-2\">\r\n <p>Step 1: Onboard store with basic details</p>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"A new store will be created when you perform this action (Manage > Stores).\">\r\n <path\r\n d=\"M10.0003 13.3337V10.0003M10.0003 6.66699H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n }\r\n\r\n\r\n @if(isCreateStoreMode){\r\n <form [formGroup]=\"createStoreForm\">\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"storeName\" class=\"form-label mb-1\">Store name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n placeholder=\"Type store name\" />\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('required')\">\r\n Store name is required.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('exists')\">\r\n Store already exists.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('whitespace')\">\r\n Store name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\" [label]=\"'Select floor'\"\r\n formControlName=\"floor\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"businessTypeList\"\r\n [label]=\"'Select business type'\" formControlName=\"businessType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"storeTypeList\"\r\n [label]=\"'Select store type'\" formControlName=\"storeType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n @if(createStoreForm.get('storeType')?.value == 'mall'){\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"storeTypeName\" class=\"form-label mb-1\">Enter Mall name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeTypeName\" formControlName=\"storeTypeName\"\r\n placeholder=\"Enter Mall name\" />\r\n <ng-container\r\n *ngIf=\"createStoreForm.get('storeTypeName')?.touched && createStoreForm.get('storeTypeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('whitespace')\">\r\n Mall name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"address\" class=\"form-label mb-1\">Address</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\"\r\n placeholder=\"Search and enter address\" ngx-gp-autocomplete (onAddressChange)=\"onAddressChange($event)\" />\r\n <ng-container *ngIf=\"createStoreForm.get('address')?.touched && createStoreForm.get('address')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"country\" class=\"form-label mb-1\">Country</label>\r\n <input type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\" placeholder=\"Enter Country\" />\r\n <ng-container *ngIf=\"createStoreForm.get('country')?.touched && createStoreForm.get('country')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"state\" class=\"form-label mb-1\">State</label>\r\n <input type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\" placeholder=\"Enter State\" />\r\n <ng-container *ngIf=\"createStoreForm.get('state')?.touched && createStoreForm.get('state')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"city\" class=\"form-label mb-1\">City / Town</label>\r\n <input type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\" placeholder=\"Enter City / Town\" />\r\n <ng-container *ngIf=\"createStoreForm.get('city')?.touched && createStoreForm.get('city')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('city')?.hasError('required')\">\r\n City / Town is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"pincode\" class=\"form-label mb-1\">Pin / Zip Code</label>\r\n <input type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\"\r\n placeholder=\"Enter Pin / Zip Code\" />\r\n <ng-container *ngIf=\"createStoreForm.get('pincode')?.touched && createStoreForm.get('pincode')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('required')\">\r\n Pin / Zip Code is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"createStoreForm.get('pincode')?.hasError('whitespace') || createStoreForm.get('pincode')?.hasError('trimSpaces')\">\r\n Pincode cannot contain whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('invalidPincode')\">\r\n Enter a valid 6-digit pincode\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"email\" class=\"form-label mb-1\">Spoc user email</label>\r\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\r\n placeholder=\"Enter spoc user email\" />\r\n <ng-container *ngIf=\"createStoreForm.get('email')?.touched && createStoreForm.get('email')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('email')?.hasError('email')\">\r\n Email is invalid.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n }\r\n @else {\r\n @if(newStoreDetails){\r\n <p class=\"mb-6\">Step 2: Add CAD file</p >\r\n\r\n <div class=\"row mb-6\">\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store name</p>\r\n <h3>{{newStoreDetails?.storeName}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Floor</p>\r\n <h3>Floor {{this.selectedFloor}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Business type</p>\r\n <h3>{{newStoreDetails?.businessType | uppercase}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store type</p>\r\n <h3>{{newStoreDetails?.storeType?.type | titlecase}}</h3>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6\">\r\n <lib-reactive-select [search]=\"true\" [(ngModel)]=\"selectedStore\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"storeList\" [label]=\"'Select store'\" [action]=\"true\" (actionClick)=\"addNewStore()\"\r\n [actionLabel]=\"'Create new store'\" (ngModelChange)=\"onStoreChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n <div class=\"col-6\">\r\n <lib-reactive-select [(ngModel)]=\"selectedFloor\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\"\r\n [label]=\"'Select floor'\" (ngModelChange)=\"onFloorChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layout-exist-wrapper\" [class.show]=\"isLayoutExist\">\r\n <div class=\"layout-exist-warning mb-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F04438\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n This store already has a Floor {{selectedFloor}} planogram. Overwrite it? This can\u2019t be undone.\r\n </div>\r\n </div>\r\n }\r\n <div class=\"mb-4\">\r\n <file-upload [disabled]=\"isButtonLoading\" (fileChange)=\"onFileChange($event)\"></file-upload>\r\n </div>\r\n }\r\n <div class=\"modal-actions\">\r\n @if(isCreateStoreMode){\r\n <button type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid\" (click)=\"onCreateStore()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n Next\r\n </span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }@else {\r\n <button *ngIf=\"newStoreDetails\" type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isButtonLoading\"\r\n (click)=\"onCreateLayoutPlano()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\r\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .counter-container{padding:10px!important;border:.49px solid #d0d5dd!important;background-color:#fff!important;justify-content:space-between!important;margin-bottom:26px!important}::ng-deep .modal-content{border-radius:12px!important}.layout-exist-warning{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3f2;border:1px solid #fda29b;border-radius:8px;color:#d92d20;font-family:Inter;font-weight:600;font-size:14px;line-height:20px}.layout-exist-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .25s ease,opacity .2s ease,transform .2s ease}.layout-exist-wrapper.show{max-height:120px;opacity:1;transform:translateY(0)}::ng-deep .create-planogram-modal .modal-dialog{max-width:700px;width:100%}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "component", type: FileUploadComponent, selector: "file-upload", inputs: ["disabled"], outputs: ["fileChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxGpAutocompleteModule }, { kind: "directive", type: i5$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
|
|
24587
24613
|
}
|
|
24588
24614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreatePlanogramComponent, decorators: [{
|
|
24589
24615
|
type: Component,
|
|
@@ -24594,6 +24620,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
24594
24620
|
FileUploadComponent,
|
|
24595
24621
|
NgIf,
|
|
24596
24622
|
NgxGpAutocompleteModule,
|
|
24623
|
+
NgbTooltip,
|
|
24624
|
+
UpperCasePipe,
|
|
24625
|
+
TitleCasePipe,
|
|
24597
24626
|
], providers: [
|
|
24598
24627
|
{
|
|
24599
24628
|
provide: Loader,
|
|
@@ -24602,7 +24631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
24602
24631
|
libraries: ["places"],
|
|
24603
24632
|
}),
|
|
24604
24633
|
},
|
|
24605
|
-
], template: "<div class=\"modal-wrapper\">\r\n <h3 class=\"mb-4\">Create store layout/plan from CAD</h3>\r\n @if(isCreateStoreMode){\r\n <form [formGroup]=\"createStoreForm\">\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"storeName\" class=\"form-label mb-1\">Store name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n placeholder=\"Type store name\" />\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('required')\">\r\n Store name is required.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('exists')\">\r\n Store already exists.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('whitespace')\">\r\n Store name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\" [label]=\"'Select floor'\"\r\n formControlName=\"floor\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"businessTypeList\"\r\n [label]=\"'Select business type'\" formControlName=\"businessType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"storeTypeList\"\r\n [label]=\"'Select store type'\" formControlName=\"storeType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n @if(createStoreForm.get('storeType')?.value == 'mall'){\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"storeTypeName\" class=\"form-label mb-1\">Enter Mall name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeTypeName\" formControlName=\"storeTypeName\"\r\n placeholder=\"Enter Mall name\" />\r\n <ng-container\r\n *ngIf=\"createStoreForm.get('storeTypeName')?.touched && createStoreForm.get('storeTypeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('whitespace')\">\r\n Mall name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"address\" class=\"form-label mb-1\">Address</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\"\r\n placeholder=\"Search and enter address\" ngx-gp-autocomplete (onAddressChange)=\"onAddressChange($event)\" />\r\n <ng-container *ngIf=\"createStoreForm.get('address')?.touched && createStoreForm.get('address')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"country\" class=\"form-label mb-1\">Country</label>\r\n <input type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\" placeholder=\"Enter Country\" />\r\n <ng-container *ngIf=\"createStoreForm.get('country')?.touched && createStoreForm.get('country')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"state\" class=\"form-label mb-1\">State</label>\r\n <input type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\" placeholder=\"Enter State\" />\r\n <ng-container *ngIf=\"createStoreForm.get('state')?.touched && createStoreForm.get('state')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"city\" class=\"form-label mb-1\">City / Town</label>\r\n <input type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\" placeholder=\"Enter City / Town\" />\r\n <ng-container *ngIf=\"createStoreForm.get('city')?.touched && createStoreForm.get('city')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('city')?.hasError('required')\">\r\n City / Town is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"pincode\" class=\"form-label mb-1\">Pin / Zip Code</label>\r\n <input type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\"\r\n placeholder=\"Enter Pin / Zip Code\" />\r\n <ng-container *ngIf=\"createStoreForm.get('pincode')?.touched && createStoreForm.get('pincode')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('required')\">\r\n Pin / Zip Code is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"createStoreForm.get('pincode')?.hasError('whitespace') || createStoreForm.get('pincode')?.hasError('trimSpaces')\">\r\n Pincode cannot contain whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('invalidPincode')\">\r\n Enter a valid 6-digit pincode\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"email\" class=\"form-label mb-1\">Spoc user email</label>\r\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\r\n placeholder=\"Enter spoc user email\" />\r\n <ng-container *ngIf=\"createStoreForm.get('email')?.touched && createStoreForm.get('email')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('email')?.hasError('email')\">\r\n Email is invalid.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n }\r\n @else {\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6\">\r\n <lib-reactive-select [search]=\"true\" [(ngModel)]=\"selectedStore\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"storeList\" [label]=\"'Select store'\" [action]=\"true\" (actionClick)=\"addNewStore()\"\r\n [actionLabel]=\"'Create new store'\" (ngModelChange)=\"onStoreChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n <div class=\"col-6\">\r\n <lib-reactive-select [(ngModel)]=\"selectedFloor\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\"\r\n [label]=\"'Select floor'\" (ngModelChange)=\"onFloorChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n </div>\r\n <div class=\"layout-exist-wrapper\" [class.show]=\"isLayoutExist\">\r\n <div class=\"layout-exist-warning mb-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F04438\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n This store already has a Floor {{selectedFloor}} planogram. Overwrite it? This can\u2019t be undone.\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-4\">\r\n <file-upload [disabled]=\"isButtonLoading\" (fileChange)=\"onFileChange($event)\"></file-upload>\r\n </div>\r\n }\r\n <div class=\"modal-actions\">\r\n @if(isCreateStoreMode){\r\n <button type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid\" (click)=\"onCreateStore()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n Create\r\n </span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }@else {\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isButtonLoading\"\r\n (click)=\"onCreateLayoutPlano()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\r\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .counter-container{padding:10px!important;border:.49px solid #d0d5dd!important;background-color:#fff!important;justify-content:space-between!important;margin-bottom:26px!important}::ng-deep .modal-content{border-radius:12px!important}.layout-exist-warning{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3f2;border:1px solid #fda29b;border-radius:8px;color:#d92d20;font-family:Inter;font-weight:600;font-size:14px;line-height:20px}.layout-exist-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .25s ease,opacity .2s ease,transform .2s ease}.layout-exist-wrapper.show{max-height:120px;opacity:1;transform:translateY(0)}::ng-deep .create-planogram-modal .modal-dialog{max-width:700px;width:100%}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
24634
|
+
], template: "<div class=\"modal-wrapper\">\r\n <h3 class=\"mb-3\">Create store layout/plan from CAD</h3>\r\n @if(isCreateStoreMode){\r\n <div class=\"d-flex algn-items-center gap-2\">\r\n <p>Step 1: Onboard store with basic details</p>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"A new store will be created when you perform this action (Manage > Stores).\">\r\n <path\r\n d=\"M10.0003 13.3337V10.0003M10.0003 6.66699H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n }\r\n\r\n\r\n @if(isCreateStoreMode){\r\n <form [formGroup]=\"createStoreForm\">\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"storeName\" class=\"form-label mb-1\">Store name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n placeholder=\"Type store name\" />\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('required')\">\r\n Store name is required.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('exists')\">\r\n Store already exists.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('whitespace')\">\r\n Store name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\" [label]=\"'Select floor'\"\r\n formControlName=\"floor\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"businessTypeList\"\r\n [label]=\"'Select business type'\" formControlName=\"businessType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"storeTypeList\"\r\n [label]=\"'Select store type'\" formControlName=\"storeType\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n @if(createStoreForm.get('storeType')?.value == 'mall'){\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"storeTypeName\" class=\"form-label mb-1\">Enter Mall name</label>\r\n <input type=\"text\" class=\"form-control\" id=\"storeTypeName\" formControlName=\"storeTypeName\"\r\n placeholder=\"Enter Mall name\" />\r\n <ng-container\r\n *ngIf=\"createStoreForm.get('storeTypeName')?.touched && createStoreForm.get('storeTypeName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('whitespace')\">\r\n Mall name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeTypeName')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n </ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"address\" class=\"form-label mb-1\">Address</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\"\r\n placeholder=\"Search and enter address\" ngx-gp-autocomplete (onAddressChange)=\"onAddressChange($event)\" />\r\n <ng-container *ngIf=\"createStoreForm.get('address')?.touched && createStoreForm.get('address')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"country\" class=\"form-label mb-1\">Country</label>\r\n <input type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\" placeholder=\"Enter Country\" />\r\n <ng-container *ngIf=\"createStoreForm.get('country')?.touched && createStoreForm.get('country')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"state\" class=\"form-label mb-1\">State</label>\r\n <input type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\" placeholder=\"Enter State\" />\r\n <ng-container *ngIf=\"createStoreForm.get('state')?.touched && createStoreForm.get('state')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"city\" class=\"form-label mb-1\">City / Town</label>\r\n <input type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\" placeholder=\"Enter City / Town\" />\r\n <ng-container *ngIf=\"createStoreForm.get('city')?.touched && createStoreForm.get('city')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('city')?.hasError('required')\">\r\n City / Town is required.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\r\n <label for=\"pincode\" class=\"form-label mb-1\">Pin / Zip Code</label>\r\n <input type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\"\r\n placeholder=\"Enter Pin / Zip Code\" />\r\n <ng-container *ngIf=\"createStoreForm.get('pincode')?.touched && createStoreForm.get('pincode')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('required')\">\r\n Pin / Zip Code is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"createStoreForm.get('pincode')?.hasError('whitespace') || createStoreForm.get('pincode')?.hasError('trimSpaces')\">\r\n Pincode cannot contain whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('pincode')?.hasError('invalidPincode')\">\r\n Enter a valid 6-digit pincode\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-12 mb-4\">\r\n <label for=\"email\" class=\"form-label mb-1\">Spoc user email</label>\r\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\r\n placeholder=\"Enter spoc user email\" />\r\n <ng-container *ngIf=\"createStoreForm.get('email')?.touched && createStoreForm.get('email')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('email')?.hasError('email')\">\r\n Email is invalid.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n }\r\n @else {\r\n @if(newStoreDetails){\r\n <p class=\"mb-6\">Step 2: Add CAD file</p >\r\n\r\n <div class=\"row mb-6\">\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store name</p>\r\n <h3>{{newStoreDetails?.storeName}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Floor</p>\r\n <h3>Floor {{this.selectedFloor}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Business type</p>\r\n <h3>{{newStoreDetails?.businessType | uppercase}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store type</p>\r\n <h3>{{newStoreDetails?.storeType?.type | titlecase}}</h3>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"row mb-4\">\r\n <div class=\"col-6\">\r\n <lib-reactive-select [search]=\"true\" [(ngModel)]=\"selectedStore\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"storeList\" [label]=\"'Select store'\" [action]=\"true\" (actionClick)=\"addNewStore()\"\r\n [actionLabel]=\"'Create new store'\" (ngModelChange)=\"onStoreChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n <div class=\"col-6\">\r\n <lib-reactive-select [(ngModel)]=\"selectedFloor\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\"\r\n [label]=\"'Select floor'\" (ngModelChange)=\"onFloorChange()\" [disabled]=\"isButtonLoading\">\r\n </lib-reactive-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layout-exist-wrapper\" [class.show]=\"isLayoutExist\">\r\n <div class=\"layout-exist-warning mb-4\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n stroke=\"#F04438\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n This store already has a Floor {{selectedFloor}} planogram. Overwrite it? This can\u2019t be undone.\r\n </div>\r\n </div>\r\n }\r\n <div class=\"mb-4\">\r\n <file-upload [disabled]=\"isButtonLoading\" (fileChange)=\"onFileChange($event)\"></file-upload>\r\n </div>\r\n }\r\n <div class=\"modal-actions\">\r\n @if(isCreateStoreMode){\r\n <button type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid\" (click)=\"onCreateStore()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n Next\r\n </span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }@else {\r\n <button *ngIf=\"newStoreDetails\" type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isButtonLoading\"\r\n (click)=\"onCreateLayoutPlano()\">\r\n <span *ngIf=\"!isButtonLoading\">\r\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\r\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".modal-wrapper{padding:24px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .counter-container{padding:10px!important;border:.49px solid #d0d5dd!important;background-color:#fff!important;justify-content:space-between!important;margin-bottom:26px!important}::ng-deep .modal-content{border-radius:12px!important}.layout-exist-warning{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3f2;border:1px solid #fda29b;border-radius:8px;color:#d92d20;font-family:Inter;font-weight:600;font-size:14px;line-height:20px}.layout-exist-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .25s ease,opacity .2s ease,transform .2s ease}.layout-exist-wrapper.show{max-height:120px;opacity:1;transform:translateY(0)}::ng-deep .create-planogram-modal .modal-dialog{max-width:700px;width:100%}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
24606
24635
|
}], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: StoreBuilderService }, { type: i4.ToastService }, { type: i1$2.FormBuilder }], propDecorators: { clientId: [{
|
|
24607
24636
|
type: Input
|
|
24608
24637
|
}] } });
|
|
@@ -24884,7 +24913,13 @@ class PlanoVerificationTableComponent {
|
|
|
24884
24913
|
// if (ele.title == "Planogram Status") {
|
|
24885
24914
|
// ele.title = "status";
|
|
24886
24915
|
// }
|
|
24887
|
-
|
|
24916
|
+
let key = ele.title.toLowerCase();
|
|
24917
|
+
if (key === 'store category') {
|
|
24918
|
+
this.appliedFilters['planoStrategy'] = ele.selected;
|
|
24919
|
+
}
|
|
24920
|
+
else {
|
|
24921
|
+
this.appliedFilters[ele.title.toLowerCase()] = ele.selected;
|
|
24922
|
+
}
|
|
24888
24923
|
});
|
|
24889
24924
|
let task = this.selectedFilterTab;
|
|
24890
24925
|
if (this.selectedFilterTab == "vm") {
|
|
@@ -32992,6 +33027,7 @@ class PlanoMigrateComponent {
|
|
|
32992
33027
|
isStarted = false;
|
|
32993
33028
|
isForceStop = false;
|
|
32994
33029
|
isLayoutMode = false;
|
|
33030
|
+
includeBg = false;
|
|
32995
33031
|
stores = "";
|
|
32996
33032
|
destroy$ = new Subject();
|
|
32997
33033
|
constructor(apiService, gs, titleCase) {
|
|
@@ -33195,7 +33231,9 @@ class PlanoMigrateComponent {
|
|
|
33195
33231
|
await this.updateRenderedPlanoPosition();
|
|
33196
33232
|
}
|
|
33197
33233
|
else {
|
|
33198
|
-
|
|
33234
|
+
if (this.includeBg) {
|
|
33235
|
+
this.drawBg();
|
|
33236
|
+
}
|
|
33199
33237
|
this.downloadCanvas();
|
|
33200
33238
|
}
|
|
33201
33239
|
}
|
|
@@ -34253,8 +34291,8 @@ class PlanoMigrateComponent {
|
|
|
34253
34291
|
const width = this.toPixels(wall1.distance, wall1.unit);
|
|
34254
34292
|
const height = this.toPixels(wall2.distance, wall2.unit);
|
|
34255
34293
|
const bg = new fabric.Rect({
|
|
34256
|
-
left:
|
|
34257
|
-
top:
|
|
34294
|
+
left: 0,
|
|
34295
|
+
top: 0,
|
|
34258
34296
|
width: width,
|
|
34259
34297
|
height: height,
|
|
34260
34298
|
fill: "#eaecf0",
|
|
@@ -34442,7 +34480,8 @@ class PlanoMigrateComponent {
|
|
|
34442
34480
|
const posMap = new Map();
|
|
34443
34481
|
for (const entrance of data) {
|
|
34444
34482
|
posMap.set(`${entrance.elementData.elementType}${entrance.elementData.elementNumber}`, data.find((obj) => obj.elementData.elementType === entrance.elementData.elementType &&
|
|
34445
|
-
obj.elementData.elementNumber ===
|
|
34483
|
+
obj.elementData.elementNumber ===
|
|
34484
|
+
entrance.elementData.elementNumber));
|
|
34446
34485
|
}
|
|
34447
34486
|
this.floorData.layoutPolygon.forEach((w) => {
|
|
34448
34487
|
const entrancePos = posMap.get(`${w.elementType}${w.elementNumber}`);
|
|
@@ -34511,13 +34550,56 @@ class PlanoMigrateComponent {
|
|
|
34511
34550
|
link.download = `${this.planoData.storeName}_${this.floorData.floorName}.png`;
|
|
34512
34551
|
link.click();
|
|
34513
34552
|
}
|
|
34553
|
+
// downloadCanvas() {
|
|
34554
|
+
// if (!this.canvas) return;
|
|
34555
|
+
// const originalViewport = [
|
|
34556
|
+
// ...this.canvas.viewportTransform!,
|
|
34557
|
+
// ] as fabric.TMat2D;
|
|
34558
|
+
// this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
|
|
34559
|
+
// const bounds = this.getFullLayoutBounds();
|
|
34560
|
+
// const bg = this.createExportLayoutBackground();
|
|
34561
|
+
// this.canvas.insertAt(0, bg);
|
|
34562
|
+
// this.canvas.renderAll();
|
|
34563
|
+
// const dataURL = this.canvas.toDataURL({
|
|
34564
|
+
// format: "png",
|
|
34565
|
+
// left: bounds.left,
|
|
34566
|
+
// top: bounds.top,
|
|
34567
|
+
// width: bounds.width,
|
|
34568
|
+
// height: bounds.height,
|
|
34569
|
+
// multiplier: 2,
|
|
34570
|
+
// });
|
|
34571
|
+
// this.canvas.remove(bg);
|
|
34572
|
+
// this.canvas.setViewportTransform(originalViewport);
|
|
34573
|
+
// this.canvas.renderAll();
|
|
34574
|
+
// const link = document.createElement("a");
|
|
34575
|
+
// link.href = dataURL;
|
|
34576
|
+
// link.download = `${this.planoData.storeName}_${this.floorData.floorName}.png`;
|
|
34577
|
+
// link.click();
|
|
34578
|
+
// }
|
|
34579
|
+
// private createExportLayoutBackground() {
|
|
34580
|
+
// const points = this.buildLayoutPolygonFromWalls();
|
|
34581
|
+
// return new fabric.Polygon(points, {
|
|
34582
|
+
// fill: "#eaecf0",
|
|
34583
|
+
// selectable: false,
|
|
34584
|
+
// evented: false,
|
|
34585
|
+
// objectCaching: false,
|
|
34586
|
+
// });
|
|
34587
|
+
// }
|
|
34588
|
+
// private buildLayoutPolygonFromWalls() {
|
|
34589
|
+
// return this.floorData.layoutPolygon
|
|
34590
|
+
// .filter((w: any) => w.elementType === "wall")
|
|
34591
|
+
// .map((w: any) => ({
|
|
34592
|
+
// x: this.toPixels(w.relativePosition.x, "ft"),
|
|
34593
|
+
// y: this.toPixels(w.relativePosition.y, "ft"),
|
|
34594
|
+
// }));
|
|
34595
|
+
// }
|
|
34514
34596
|
ngOnDestroy() { }
|
|
34515
34597
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoMigrateComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
34516
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoMigrateComponent, selector: "lib-plano-migrate", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "storeItems", predicate: ["storeItem"], descendants: true }], ngImport: i0, template: "<section id=\"plano-migrate\">\r\n <div class=\"app-layout\">\r\n\r\n <!-- LEFT TOOLBAR -->\r\n <div class=\"sidebar\">\r\n <div class=\"p-3\">\r\n <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n rows=\"6\"></textarea>\r\n <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n Filter\r\n </button>\r\n\r\n <div class=\"d-flex align-items-center\">\r\n <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n <hr class=\"w-100\">\r\n </div>\r\n\r\n <div class=\"store-list\">\r\n @for (item of storeList; track $index) {\r\n
|
|
34598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoMigrateComponent, selector: "lib-plano-migrate", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "storeItems", predicate: ["storeItem"], descendants: true }], ngImport: i0, template: "<section id=\"plano-migrate\">\r\n <div class=\"app-layout\">\r\n\r\n <!-- LEFT TOOLBAR -->\r\n <div class=\"sidebar\">\r\n <div class=\"p-3\">\r\n <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n rows=\"6\"></textarea>\r\n <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n Filter\r\n </button>\r\n\r\n <div class=\"d-flex align-items-center\">\r\n <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n <hr class=\"w-100\">\r\n </div>\r\n\r\n <div class=\"store-list\">\r\n @for (item of storeList; track $index) {\r\n <div class=\"id-tile\" [class.active]='$index === currentIndex' #storeItem>\r\n <p [style]=\"{ color: $index === currentIndex ? 'red' : 'black' }\">\r\n {{ $index + 1 }}) {{ item.storeName }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT CANVAS PANEL -->\r\n <div class=\"canvas-wrapper\" #canvasContainer>\r\n\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n\r\n <div class=\"form-check form-switch\">\r\n <input [checked]=\"isLayoutMode\" [(ngModel)]=\"isLayoutMode\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" [disabled]=\"isStarted\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Layout Mode\r\n </label>\r\n </div>\r\n\r\n\r\n <button class=\"btn btn-primary\" type=\"button\" (click)=\"onProceed()\" [disabled]=\"isStarted\">\r\n {{isLayoutMode ? 'Update Layout' : 'Download Images'}}\r\n </button>\r\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"onForceStop()\" [disabled]='!isStarted'>\r\n Force stop\r\n </button>\r\n\r\n <div class=\"d-flex gap-2\">\r\n <input type=\"checkbox\" class=\"form-check\" name=\"includeBG\" id=\"includeBG\" [(ngModel)]=\"includeBg\"\r\n [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"isStarted\">\r\n <label for=\"includeBG\">Include Background</label>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Canvas -->\r\n <div class=\"canvas-area\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n</section>", styles: ["html,body{height:100%;margin:0}#plano-migrate .app-layout{display:flex;height:calc(100vh - 260px);overflow:hidden}#plano-migrate .sidebar{width:350px;min-width:350px;border-right:1px solid #ddd;background:#fafafa;overflow-y:auto}#plano-migrate .canvas-wrapper{flex:1;display:flex;flex-direction:column;background:#fff;padding:0;overflow:hidden}#plano-migrate .toolbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #e6e6e6;background:#fafafa}#plano-migrate .toggle-fixtures{display:flex;align-items:center;gap:6px;font-size:14px;-webkit-user-select:none;user-select:none}#plano-migrate .icon-btn{border:none;background:#f1f3f4;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}#plano-migrate .icon-btn:hover{background:#e2e5e7}#plano-migrate .icon-btn:active{background:#d1d4d6}#plano-migrate .icon{width:18px;height:18px;stroke:#3c3f42;stroke-width:2;fill:none}#plano-migrate .canvas-area{position:relative;flex:1;overflow:hidden}#plano-migrate .canvas-area canvas{display:block}#plano-migrate .id-tile{display:flex;align-items:center;padding:8px 12px;border-radius:6px}#plano-migrate .id-tile p{margin:0}#plano-migrate .id-tile.active{background-color:#ffecec;border:1px solid #ffb5b5}#plano-migrate .store-list{max-height:65vh;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
34517
34599
|
}
|
|
34518
34600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoMigrateComponent, decorators: [{
|
|
34519
34601
|
type: Component,
|
|
34520
|
-
args: [{ selector: "lib-plano-migrate", providers: [TitleCasePipe], template: "<section id=\"plano-migrate\">\r\n <div class=\"app-layout\">\r\n\r\n <!-- LEFT TOOLBAR -->\r\n <div class=\"sidebar\">\r\n <div class=\"p-3\">\r\n <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n rows=\"6\"></textarea>\r\n <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n Filter\r\n </button>\r\n\r\n <div class=\"d-flex align-items-center\">\r\n <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n <hr class=\"w-100\">\r\n </div>\r\n\r\n <div class=\"store-list\">\r\n @for (item of storeList; track $index) {\r\n
|
|
34602
|
+
args: [{ selector: "lib-plano-migrate", providers: [TitleCasePipe], template: "<section id=\"plano-migrate\">\r\n <div class=\"app-layout\">\r\n\r\n <!-- LEFT TOOLBAR -->\r\n <div class=\"sidebar\">\r\n <div class=\"p-3\">\r\n <textarea class=\"form-control\" [(ngModel)]=\"stores\" placeholder=\"Enter store names in commas..\"\r\n rows=\"6\"></textarea>\r\n <button class=\"btn btn-secondary w-100 my-4\" type=\"button\" (click)=\"onFilter()\" [disabled]=\"isStarted\">\r\n Filter\r\n </button>\r\n\r\n <div class=\"d-flex align-items-center\">\r\n <p class=\"m-0 text-nowrap\">Stores ({{currentIndex}}/ {{storeList.length}})</p>\r\n <hr class=\"w-100\">\r\n </div>\r\n\r\n <div class=\"store-list\">\r\n @for (item of storeList; track $index) {\r\n <div class=\"id-tile\" [class.active]='$index === currentIndex' #storeItem>\r\n <p [style]=\"{ color: $index === currentIndex ? 'red' : 'black' }\">\r\n {{ $index + 1 }}) {{ item.storeName }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT CANVAS PANEL -->\r\n <div class=\"canvas-wrapper\" #canvasContainer>\r\n\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n\r\n <div class=\"form-check form-switch\">\r\n <input [checked]=\"isLayoutMode\" [(ngModel)]=\"isLayoutMode\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" [disabled]=\"isStarted\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Layout Mode\r\n </label>\r\n </div>\r\n\r\n\r\n <button class=\"btn btn-primary\" type=\"button\" (click)=\"onProceed()\" [disabled]=\"isStarted\">\r\n {{isLayoutMode ? 'Update Layout' : 'Download Images'}}\r\n </button>\r\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"onForceStop()\" [disabled]='!isStarted'>\r\n Force stop\r\n </button>\r\n\r\n <div class=\"d-flex gap-2\">\r\n <input type=\"checkbox\" class=\"form-check\" name=\"includeBG\" id=\"includeBG\" [(ngModel)]=\"includeBg\"\r\n [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"isStarted\">\r\n <label for=\"includeBG\">Include Background</label>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Canvas -->\r\n <div class=\"canvas-area\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n</section>", styles: ["html,body{height:100%;margin:0}#plano-migrate .app-layout{display:flex;height:calc(100vh - 260px);overflow:hidden}#plano-migrate .sidebar{width:350px;min-width:350px;border-right:1px solid #ddd;background:#fafafa;overflow-y:auto}#plano-migrate .canvas-wrapper{flex:1;display:flex;flex-direction:column;background:#fff;padding:0;overflow:hidden}#plano-migrate .toolbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #e6e6e6;background:#fafafa}#plano-migrate .toggle-fixtures{display:flex;align-items:center;gap:6px;font-size:14px;-webkit-user-select:none;user-select:none}#plano-migrate .icon-btn{border:none;background:#f1f3f4;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}#plano-migrate .icon-btn:hover{background:#e2e5e7}#plano-migrate .icon-btn:active{background:#d1d4d6}#plano-migrate .icon{width:18px;height:18px;stroke:#3c3f42;stroke-width:2;fill:none}#plano-migrate .canvas-area{position:relative;flex:1;overflow:hidden}#plano-migrate .canvas-area canvas{display:block}#plano-migrate .id-tile{display:flex;align-items:center;padding:8px 12px;border-radius:6px}#plano-migrate .id-tile p{margin:0}#plano-migrate .id-tile.active{background-color:#ffecec;border:1px solid #ffb5b5}#plano-migrate .store-list{max-height:65vh;overflow:auto}\n"] }]
|
|
34521
34603
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }], propDecorators: { canvasRef: [{
|
|
34522
34604
|
type: ViewChild,
|
|
34523
34605
|
args: ["canvas"]
|
|
@@ -34679,8 +34761,8 @@ class PlanoTableComponent {
|
|
|
34679
34761
|
const country = event[0].selected;
|
|
34680
34762
|
const city = event[1].selected;
|
|
34681
34763
|
const compliance = event[2].selected;
|
|
34682
|
-
|
|
34683
|
-
if (country.length || city.length || compliance) {
|
|
34764
|
+
const planoStrategy = event[3].selected;
|
|
34765
|
+
if (country.length || city.length || compliance || planoStrategy) {
|
|
34684
34766
|
this.isFilterApplied = true;
|
|
34685
34767
|
}
|
|
34686
34768
|
else {
|
|
@@ -34690,7 +34772,7 @@ class PlanoTableComponent {
|
|
|
34690
34772
|
country,
|
|
34691
34773
|
city,
|
|
34692
34774
|
...(compliance ? { compliance: [compliance.min, compliance.max] } : {}),
|
|
34693
|
-
|
|
34775
|
+
...(planoStrategy ? { planoStrategy } : {}),
|
|
34694
34776
|
};
|
|
34695
34777
|
this.offset = 1;
|
|
34696
34778
|
this.getPlanogramTableList();
|
|
@@ -34803,11 +34885,11 @@ class ToolsParentComponent {
|
|
|
34803
34885
|
this.destroy$.complete();
|
|
34804
34886
|
}
|
|
34805
34887
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
34806
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"d-flex mb-3\">\r\n <div class=\"d-flex gap-3\">\r\n\r\n <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n Plano Builder\r\n </button
|
|
34888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"d-flex mb-3\">\r\n <div class=\"d-flex gap-3\">\r\n\r\n <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n Plano Builder\r\n </button> -->\r\n\r\n <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n Update Layout / Download Canvas\r\n </button>\r\n\r\n <button class=\"btn btn-success\" (click)=\"onClickCreateFixtureTemplate()\">\r\n Create Template\r\n </button>\r\n\r\n </div>\r\n</div>\r\n<hr>\r\n<router-outlet></router-outlet>", styles: [""], dependencies: [{ kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
34807
34889
|
}
|
|
34808
34890
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, decorators: [{
|
|
34809
34891
|
type: Component,
|
|
34810
|
-
args: [{ selector: "lib-tools-parent", template: "<div class=\"d-flex mb-3\">\r\n <div class=\"d-flex gap-3\">\r\n\r\n <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n Plano Builder\r\n </button
|
|
34892
|
+
args: [{ selector: "lib-tools-parent", template: "<div class=\"d-flex mb-3\">\r\n <div class=\"d-flex gap-3\">\r\n\r\n <!-- <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/builder\">\r\n Plano Builder\r\n </button> -->\r\n\r\n <button class=\"btn btn-outline\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n Update Layout / Download Canvas\r\n </button>\r\n\r\n <button class=\"btn btn-success\" (click)=\"onClickCreateFixtureTemplate()\">\r\n Create Template\r\n </button>\r\n\r\n </div>\r\n</div>\r\n<hr>\r\n<router-outlet></router-outlet>" }]
|
|
34811
34893
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2$1.GlobalStateService }] });
|
|
34812
34894
|
|
|
34813
34895
|
class ZoneProductsComponent {
|