tango-app-ui-store-builder 1.0.76 → 1.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/fixture-preview/fixture-preview.component.mjs +11 -0
- package/esm2022/lib/components/manage-store-plano/manage-store-plano.component.mjs +3 -3
- package/esm2022/lib/components/manage-store-plano/popups/schedule-task-popup/schedule-task-popup.component.mjs +2 -2
- package/esm2022/lib/components/onboard-store-plano/create-planogram/create-planogram.component.mjs +121 -58
- package/esm2022/lib/components/onboard-store-plano/onboard-fixture/onboard-fixture.component.mjs +5 -3
- package/esm2022/lib/components/onboard-store-plano/onboard-store-plano.component.mjs +7 -8
- package/fesm2022/tango-app-ui-store-builder.mjs +145 -74
- package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
- package/lib/components/fixture-preview/fixture-preview.component.d.ts +5 -0
- package/lib/components/manage-plano/onboard-table/onboard-table.component.d.ts +1 -1
- package/lib/components/manage-plano/rollout-table/rollout-table.component.d.ts +2 -2
- package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +5 -5
- package/lib/components/manage-store-plano/popups/schedule-task-popup/schedule-task-popup.component.d.ts +1 -1
- package/lib/components/onboard-store-plano/create-planogram/create-planogram.component.d.ts +3 -1
- package/lib/components/onboard-store-plano/onboard-store-plano.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -24,10 +24,9 @@ import JSZip from 'jszip';
|
|
|
24
24
|
import * as fabric from 'fabric';
|
|
25
25
|
import * as i2$2 from 'ngx-daterangepicker-material';
|
|
26
26
|
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
|
|
27
|
-
import * as i2$3 from 'projects/tango-store-builder/src/lib/services/store-builder.service';
|
|
28
27
|
import * as i9 from 'ngx-drag-drop';
|
|
29
28
|
import { DndModule } from 'ngx-drag-drop';
|
|
30
|
-
import * as i2$
|
|
29
|
+
import * as i2$3 from '@angular/platform-browser';
|
|
31
30
|
import { map, filter, distinctUntilChanged } from 'rxjs/operators';
|
|
32
31
|
import 'dayjs/locale/en';
|
|
33
32
|
import { Loader } from '@googlemaps/js-api-loader';
|
|
@@ -7088,13 +7087,13 @@ class ScheduleTaskPopupComponent {
|
|
|
7088
7087
|
onCancel() {
|
|
7089
7088
|
this.activeModal.dismiss();
|
|
7090
7089
|
}
|
|
7091
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScheduleTaskPopupComponent, deps: [{ token: i1$1.NgbActiveModal }, { token:
|
|
7090
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScheduleTaskPopupComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: StoreBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7092
7091
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ScheduleTaskPopupComponent, isStandalone: true, selector: "schedule-task-popup", inputs: { fixtures: "fixtures", storeName: "storeName" }, ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n <h3 class=\"mb-3\">Publish Verification Task</h3>\r\n <p>You are about to send a verification task to <b>{{storeName}}</b>. Choose if you want to schedule the task\r\n for later.\r\n </p>\r\n\r\n\r\n <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n <h4 class=\"me-auto\">MBQ for {{storeName}}</h4>\r\n\r\n <date-picker (dateChange)=\"onDateSelected($event)\">\r\n </date-picker>\r\n\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center justify-content-center bg-white shadow-sm mbq-download-btn\"\r\n (click)=\"downloadMBQSheet()\" [disabled]=\"isDownloadButtonLoading\" style=\"padding: 9px 12px;\">\r\n @if (!isDownloadButtonLoading) {\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 } @else {\r\n <svg 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 }\r\n </button>\r\n </div>\r\n\r\n @if(showInfoBanner){\r\n <div class=\"info-banner\">\r\n <svg width=\"17\" height=\"19\" viewBox=\"0 0 17 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11.6693 0.834961V4.16829M5.0026 0.834961V4.16829M0.835938 7.50163H15.8359M2.5026 2.50163H14.1693C15.0897 2.50163 15.8359 3.24782 15.8359 4.16829V15.835C15.8359 16.7554 15.0897 17.5016 14.1693 17.5016H2.5026C1.58213 17.5016 0.835938 16.7554 0.835938 15.835V4.16829C0.835938 3.24782 1.58213 2.50163 2.5026 2.50163Z\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <span>\r\n You are scheduling the layout verification task for <b>{{\r\n scheduledDate === (today | date:'yyyy-MM-dd')\r\n ? 'Today'\r\n : (scheduledDate | date:'dd MMMM, yyyy')\r\n }}</b>\r\n </span>\r\n\r\n <svg class=\"ms-auto cursor-pointer\" (click)=\"showInfoBanner = false;\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n }\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('wall')\">\r\n Wall/Floor\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'wall' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'wall' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('ufn')\">\r\n UFN\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'ufn' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'ufn' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('brand')\">\r\n Brand Category\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'brand' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'brand' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('type')\">\r\n Type\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'type' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'type' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('size')\">\r\n Size\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'size' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'size' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('partition')\">\r\n Partition\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'partition' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'partition' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <!-- <th>\r\n Display Per Partition\r\n <i class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'displayPartition' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'displayPartition' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"onSort('standardCapacity')\">\r\n Standard Capacity\r\n <i class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'standardCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'standardCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <!-- <th>\r\n Actual Capacity\r\n <i class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'actualCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'actualCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th> -->\r\n <th *ngFor=\"let zone of zoneColumns\">\r\n {{zone}} Zone Allocation\r\n <i class=\"fa ms-1 mt-1\" aria-hidden=\"true\"></i>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let item of mbqItems\">\r\n <td>{{item?.wall}}</td>\r\n <td>{{item?.ufn}}</td>\r\n <td>{{item?.brand}}</td>\r\n <td>{{item?.type}}</td>\r\n <td>{{item?.size}}</td>\r\n <td>{{item?.partition}}</td>\r\n <!-- <td>{{item?.displayPartition}}</td> -->\r\n <td>{{item?.standardCapacity}}</td>\r\n <!-- <td>{{item?.actualCapacity}}</td> -->\r\n <td *ngFor=\"let zone of zoneColumns\">{{item?.zoneAllocations?.[zone]?.join(', ') || '-'}}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"modal-actions\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"scheduleTask()\">\r\n Schedule Task\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".modal-wrapper{padding:24px}.table-responsive{max-height:58vh}.info-banner{background:#f6fcff;margin-bottom:12px;border:1px solid #6bcaff;border-radius:4px;padding:12px;display:flex;align-items:center;gap:10px;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}.btn .spinner{height:22px;width:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:currentColor;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.mbq-download-btn{min-width:38px}::ng-deep .schedule-task-modal .modal-dialog{max-width:700px;width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DatePickerComponent, selector: "date-picker", outputs: ["dateChange"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
7093
7092
|
}
|
|
7094
7093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScheduleTaskPopupComponent, decorators: [{
|
|
7095
7094
|
type: Component,
|
|
7096
7095
|
args: [{ selector: "schedule-task-popup", standalone: true, imports: [NgClass, NgStyle, NgFor, DatePickerComponent, DatePipe], template: "<div class=\"modal-wrapper\">\r\n <h3 class=\"mb-3\">Publish Verification Task</h3>\r\n <p>You are about to send a verification task to <b>{{storeName}}</b>. Choose if you want to schedule the task\r\n for later.\r\n </p>\r\n\r\n\r\n <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n <h4 class=\"me-auto\">MBQ for {{storeName}}</h4>\r\n\r\n <date-picker (dateChange)=\"onDateSelected($event)\">\r\n </date-picker>\r\n\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center justify-content-center bg-white shadow-sm mbq-download-btn\"\r\n (click)=\"downloadMBQSheet()\" [disabled]=\"isDownloadButtonLoading\" style=\"padding: 9px 12px;\">\r\n @if (!isDownloadButtonLoading) {\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 } @else {\r\n <svg 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 }\r\n </button>\r\n </div>\r\n\r\n @if(showInfoBanner){\r\n <div class=\"info-banner\">\r\n <svg width=\"17\" height=\"19\" viewBox=\"0 0 17 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11.6693 0.834961V4.16829M5.0026 0.834961V4.16829M0.835938 7.50163H15.8359M2.5026 2.50163H14.1693C15.0897 2.50163 15.8359 3.24782 15.8359 4.16829V15.835C15.8359 16.7554 15.0897 17.5016 14.1693 17.5016H2.5026C1.58213 17.5016 0.835938 16.7554 0.835938 15.835V4.16829C0.835938 3.24782 1.58213 2.50163 2.5026 2.50163Z\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <span>\r\n You are scheduling the layout verification task for <b>{{\r\n scheduledDate === (today | date:'yyyy-MM-dd')\r\n ? 'Today'\r\n : (scheduledDate | date:'dd MMMM, yyyy')\r\n }}</b>\r\n </span>\r\n\r\n <svg class=\"ms-auto cursor-pointer\" (click)=\"showInfoBanner = false;\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n }\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('wall')\">\r\n Wall/Floor\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'wall' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'wall' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('ufn')\">\r\n UFN\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'ufn' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'ufn' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('brand')\">\r\n Brand Category\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'brand' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'brand' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('type')\">\r\n Type\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'type' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'type' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('size')\">\r\n Size\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'size' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'size' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('partition')\">\r\n Partition\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'partition' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'partition' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <!-- <th>\r\n Display Per Partition\r\n <i class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'displayPartition' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'displayPartition' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"onSort('standardCapacity')\">\r\n Standard Capacity\r\n <i class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'standardCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'standardCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th>\r\n <!-- <th>\r\n Actual Capacity\r\n <i class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'actualCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'actualCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </th> -->\r\n <th *ngFor=\"let zone of zoneColumns\">\r\n {{zone}} Zone Allocation\r\n <i class=\"fa ms-1 mt-1\" aria-hidden=\"true\"></i>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let item of mbqItems\">\r\n <td>{{item?.wall}}</td>\r\n <td>{{item?.ufn}}</td>\r\n <td>{{item?.brand}}</td>\r\n <td>{{item?.type}}</td>\r\n <td>{{item?.size}}</td>\r\n <td>{{item?.partition}}</td>\r\n <!-- <td>{{item?.displayPartition}}</td> -->\r\n <td>{{item?.standardCapacity}}</td>\r\n <!-- <td>{{item?.actualCapacity}}</td> -->\r\n <td *ngFor=\"let zone of zoneColumns\">{{item?.zoneAllocations?.[zone]?.join(', ') || '-'}}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"modal-actions\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"scheduleTask()\">\r\n Schedule Task\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".modal-wrapper{padding:24px}.table-responsive{max-height:58vh}.info-banner{background:#f6fcff;margin-bottom:12px;border:1px solid #6bcaff;border-radius:4px;padding:12px;display:flex;align-items:center;gap:10px;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}.btn .spinner{height:22px;width:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:currentColor;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.mbq-download-btn{min-width:38px}::ng-deep .schedule-task-modal .modal-dialog{max-width:700px;width:100%}\n"] }]
|
|
7097
|
-
}], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type:
|
|
7096
|
+
}], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: StoreBuilderService }], propDecorators: { fixtures: [{
|
|
7098
7097
|
type: Input
|
|
7099
7098
|
}], storeName: [{
|
|
7100
7099
|
type: Input
|
|
@@ -10703,13 +10702,13 @@ class ActionConfirmPopupComponent {
|
|
|
10703
10702
|
onOk() {
|
|
10704
10703
|
this.activeModal.close({ action: "ok", remark: this.remark });
|
|
10705
10704
|
}
|
|
10706
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmPopupComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: i2$
|
|
10705
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmPopupComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
10707
10706
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionConfirmPopupComponent, selector: "lib-action-confirm-popup", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n <div class=\"d-flex gap-3 align-items-center mb-5\">\r\n <div *ngIf=\"safeIcon\" [innerHTML]=\"safeIcon\"></div>\r\n <h3 class=\"title\">{{ title }}</h3>\r\n </div>\r\n\r\n <p class=\"description\">{{ description }}</p>\r\n\r\n <div *ngIf=\"type != 'deleteVM'\" class=\"d-flex flex-column gap-2 mb-4\">\r\n <label for=\"remark\">Remarks</label>\r\n <textarea class=\"form-control\" id=\"remark\" [(ngModel)]=\"remark\" rows=\"3\"\r\n placeholder=\"Enter your remark here...\"></textarea>\r\n </div>\r\n\r\n <div class=\"modal-actions mt-5\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"onOk()\">\r\n {{btnText}}\r\n </button>\r\n </div>\r\n</div>", styles: [".modal-wrapper{padding:24px}.modal-wrapper .title{font-family:Inter;font-weight:600;font-size:18px;line-height:28px;color:#1d2939;margin:0}.modal-wrapper .description{font-family:Inter;font-weight:400;font-size:16px;line-height:24px;color:#1d2939;margin-bottom:18px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
10708
10707
|
}
|
|
10709
10708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmPopupComponent, decorators: [{
|
|
10710
10709
|
type: Component,
|
|
10711
10710
|
args: [{ selector: "lib-action-confirm-popup", template: "<div class=\"modal-wrapper\">\r\n <div class=\"d-flex gap-3 align-items-center mb-5\">\r\n <div *ngIf=\"safeIcon\" [innerHTML]=\"safeIcon\"></div>\r\n <h3 class=\"title\">{{ title }}</h3>\r\n </div>\r\n\r\n <p class=\"description\">{{ description }}</p>\r\n\r\n <div *ngIf=\"type != 'deleteVM'\" class=\"d-flex flex-column gap-2 mb-4\">\r\n <label for=\"remark\">Remarks</label>\r\n <textarea class=\"form-control\" id=\"remark\" [(ngModel)]=\"remark\" rows=\"3\"\r\n placeholder=\"Enter your remark here...\"></textarea>\r\n </div>\r\n\r\n <div class=\"modal-actions mt-5\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"onOk()\">\r\n {{btnText}}\r\n </button>\r\n </div>\r\n</div>", styles: [".modal-wrapper{padding:24px}.modal-wrapper .title{font-family:Inter;font-weight:600;font-size:18px;line-height:28px;color:#1d2939;margin:0}.modal-wrapper .description{font-family:Inter;font-weight:400;font-size:16px;line-height:24px;color:#1d2939;margin-bottom:18px}.modal-actions{display:flex;justify-content:end;gap:12px}::ng-deep .modal-content{border-radius:12px!important}\n"] }]
|
|
10712
|
-
}], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: i2$
|
|
10711
|
+
}], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: i2$3.DomSanitizer }], propDecorators: { type: [{
|
|
10713
10712
|
type: Input
|
|
10714
10713
|
}] } });
|
|
10715
10714
|
|
|
@@ -16423,11 +16422,11 @@ class ManageStorePlanoComponent {
|
|
|
16423
16422
|
this.destroy$.complete();
|
|
16424
16423
|
}
|
|
16425
16424
|
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 });
|
|
16426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <div class=\"\" *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n\r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">{{wallCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"wallCount != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"wallCount < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"wallCount > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\"\r\n [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
16425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ManageStorePlanoComponent, selector: "lib-manage-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "noStoreVideoModalRef", first: true, predicate: ["noStoreVideo"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n \r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i> \r\n <i class=\"bi bi-arrow-down\" *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n \r\n <hr>\r\n \r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\" [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">{{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}</div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout"], outputs: ["submitEvent"] }, { kind: "component", type: StorePlanoTreeViewComponent, selector: "store-plano-tree-view", inputs: ["allFixture"], outputs: ["selectedInstance"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: ["floorData", "totalFixtures", "feedbackDetails", "cdn", "showAction"], outputs: ["changeFixture", "action"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
16427
16426
|
}
|
|
16428
16427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageStorePlanoComponent, decorators: [{
|
|
16429
16428
|
type: Component,
|
|
16430
|
-
args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <div class=\"\" *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n\r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">{{wallCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"wallCount != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"wallCount < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"wallCount > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\"\r\n *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n <i class=\"bi bi-arrow-up\"\r\n *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n\r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\"\r\n [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\"\r\n [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"] }]
|
|
16429
|
+
args: [{ selector: "lib-manage-store-plano", providers: [TitleCasePipe], template: "<section id=\"manage-plano\">\r\n <!-- Loading State -->\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-6\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-- Header Accordion -->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <div style=\"margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"floorsList.length && !isPageLoading\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n </lib-reactive-select>\r\n\r\n <div class=\"cus-btn\" (click)=\"goToStoreTourPage()\">\r\n View store tour\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_408_16498)\">\r\n <path\r\n d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M5 4L8 6L5 8V4Z\" stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_408_16498\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </div>\r\n <div class=\"cus-btn\" (click)=\"goToStoreCameraPage()\">\r\n View camera\r\n\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_422_36321)\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_422_36321\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-4\">\r\n <div *ngIf=\"!editFixture\" class=\"updateClass\">Last Update: {{floorData?.updatedAt}}</div>\r\n\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <!-- Edit Fixture Mode -->\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n Save & Close\r\n </button>\r\n </ng-container>\r\n\r\n @if(!editFixture && floorData?.isPlanoApproved === false){\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\"\r\n [disabled]=\"layoutForm.enabled\">\r\n Approve Layout\r\n </button>\r\n }@else{\r\n <!-- Normal Mode -->\r\n <ng-container *ngIf=\"!editFixture && !['taskAssigned'].includes(taskStyle.fixture.class)\">\r\n <!-- Publish Buttons -->\r\n <button *ngIf=\"publishingState === 'layout'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'layout-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Layout Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'fixture-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish Fixture Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Verification\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"disabledPublish\">\r\n Publish VM Redo\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"publishingState == 'complete'\">\r\n <div class=\"indicator completed\" *ngIf=\"floorData?.verificationStatus\">Published</div>\r\n <button *ngIf=\"!floorData?.verificationStatus\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n }\r\n\r\n\r\n\r\n <!-- Revoke Button -->\r\n <button (click)=\"revokeTask()\" *ngIf=\"['taskAssigned'].includes(taskStyle.fixture.class) && !editFixture\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke\r\n </button>\r\n\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div id=\"header\" class=\"row mx-0 gap-3\">\r\n <!-- Plano Completion -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3 class=\"d-flex align-items-center gap-2\">\r\n Plano Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\">\r\n <g clip-path=\"url(#clip0_1517_129805)\">\r\n <path\r\n d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1517_129805\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </h3>\r\n <div class=\"row align-items-center mt-2\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n taskInfo?.planoProgress <= 50\r\n ? 'bg-warning'\r\n : taskInfo?.planoProgress === 75\r\n ? 'bg-primary'\r\n : 'bg-success'\r\n \" role=\"progressbar\" [style]=\"'width:' + taskInfo?.planoProgress + '%'\"\r\n [attr.aria-valuenow]=\"taskInfo?.planoProgress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ taskInfo?.planoProgress }}%</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Layout -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.floorCount }}</b> Layout</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.layout.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.layout.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.layout.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.layout.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Fixtures -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.fixtureCount }}</b> Fixtures</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n\r\n <!-- Visual Merchandise -->\r\n <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n <h3><b>{{ storeMetrics.vmCount }}</b> Visual Merchandise</h3>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.vm.class\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div id=\"body\" class=\"row\">\r\n <!-- Left Column -->\r\n <div [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture }\">\r\n <div class=\"s-card\">\r\n <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n <div ngbAccordion accordion=\"NgbAccordion\">\r\n <!-- Walls Section -->\r\n <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n <ng-container formArrayName=\"walls\">\r\n <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n <div [formGroupName]=\"i\" [ngbAccordionItem]=\"i.toString()\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-2 wall-label\">\r\n {{ group.get(\"elementType\")?.value | titlecase }} {{ group.get(\"elementNumber\")?.value }}\r\n </span>\r\n\r\n @if(layoutForm.enabled){\r\n <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n fill=\"#475467\" stroke=\"#475467\" stroke-width=\"0.00064\" />\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_62_8)\">\r\n <path\r\n d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n fill=\"#475467\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_62_8\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span class=\"me-1\" ngbTooltip=\"Remove this wall and its fixtures.\"\r\n (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_63_25)\">\r\n <path\r\n d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n fill=\"#F32B2B\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_63_25\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, i)\">\r\n <!-- Fixtures -->\r\n <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n <div formArrayName=\"fixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, i, j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n class=\"row g-0 mb-5\" [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef\r\n [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n width=\"25px\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [subTextField]=\"'subtext'\" [search]=\"true\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('wall', i)\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Other Elements -->\r\n <ng-container *ngIf=\"getWallOtherElements(i).controls.length\">\r\n <div formArrayName=\"otherElements\">\r\n <ng-container *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown bound to 'type' -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'elementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Show custom text input only when 'Others' is selected -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"\r\n viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('wall', i)\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #addWallAction>\r\n <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n class=\"btn btn-secondary w-100 p-2\">\r\n Insert new wall\r\n </button>\r\n </ng-template>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Section -->\r\n <div [ngbAccordionItem]=\"'floor'\" class=\"mb-5\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n <span class=\"me-2 wall-label\">Floor</span>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n <ng-template>\r\n <div style=\"min-height: 50px\" dndDropzone (dndDrop)=\"onDrop($event, 'floor')\">\r\n <!-- Floor Fixtures -->\r\n <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n <div formArrayName=\"floorFixtures\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\" [formGroupName]=\"j\"\r\n [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\" [dndEffectAllowed]=\"'all'\"\r\n [dndDisableDragIf]=\"layoutForm.disabled\" class=\"row g-0 mb-5\">\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-center justify-content-center h-100\">\r\n <svg dndDragImageRef style=\"cursor: move; opacity: 0.5\" width=\"25px\"\r\n viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n fill=\"grey\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-10\">\r\n <lib-reactive-select formControlName=\"fixtureConfigId\" [idField]=\"'_id'\"\r\n [nameField]=\"'name'\" [data]=\"fixtureTemplates\" [label]=\"'Fixture ' + (j + 1)\"\r\n [search]=\"true\" [subTextField]=\"'subtext'\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"deleteFixture('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewFixture('floor')\">\r\n Add fixture\r\n </a>\r\n </div>\r\n\r\n <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n <!-- Floor Other Elements -->\r\n <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n <div formArrayName=\"floorOtherElements\">\r\n <ng-container *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n <div class=\"col-11\">\r\n <label class=\"form-label mb-1\">Element {{ j + 1 }}</label>\r\n\r\n <!-- Dropdown for type -->\r\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"otherElementList\" [id]=\"'floorElementLabel' + j\" formControlName=\"type\">\r\n </lib-reactive-select>\r\n\r\n <!-- Conditional input for custom name -->\r\n <input *ngIf=\"(fixture.get('type')?.value) === 'Others'\" type=\"text\"\r\n class=\"form-control mt-2\" formControlName=\"customName\"\r\n placeholder=\"Enter custom element name\" />\r\n </div>\r\n\r\n <div class=\"col-1\">\r\n <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n [class.disabled-click]=\"layoutForm.disabled\">\r\n <svg (click)=\"removeOtherElement('floor', j)\"\r\n style=\"cursor: pointer; margin-bottom: 18px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n (click)=\"addNewOtherElements('floor')\">\r\n Add element\r\n </a>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Center Column -->\r\n <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <!-- Canvas View -->\r\n <div [ngClass]=\"{ 'd-none': selectedView === 'tree' }\">\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n </div>\r\n\r\n <!-- Tree View -->\r\n <div *ngIf=\"selectedView === 'tree'\" class=\"w-100\">\r\n <store-plano-tree-view [allFixture]=\"allFixtures\"></store-plano-tree-view>\r\n </div>\r\n\r\n <!-- Top Controls -->\r\n <div style=\"top: 24px; left: 26px; position: absolute;\" id=\"segment-btn\" class=\"pb-5\">\r\n <div class=\"w-100 d-flex justify-content-start gap-4\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" style=\"width: 200px; margin: 0\">\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'detail'\"\r\n (click)=\"selectedView = 'detail'\">\r\n Detail View\r\n </button>\r\n </li>\r\n <li class=\"nav-item flex-fill\">\r\n <button class=\"nav-link w-100 h-100\" [class.active]=\"selectedView === 'tree'\"\r\n (click)=\"selectedView = 'tree'\">\r\n Tree View\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- PID Allocation -->\r\n <!-- <div *ngIf=\"layoutForm.disabled\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"onClickApplyLogics()\">\r\n Apply Logics\r\n </button>\r\n </div> -->\r\n\r\n <!-- Entrance Button -->\r\n <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\" style=\"top: 24px; left: 234px\"\r\n class=\"position-absolute\" [disableTooltip]=\"getEntrances?.length < 2\">\r\n <button type=\"button\" style=\"padding: 9px 19px !important;\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n Add Entrance\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"layoutForm.enabled\" style=\"top: 24px; right: 176px\" class=\"position-absolute\">\r\n <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n (click)=\"cancelEdit()\">\r\n Cancel\r\n </button>\r\n </div>\r\n\r\n\r\n <!-- Edit Button -->\r\n <button *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n [disabled]=\"disableEdit || ['taskAssigned'].includes(taskStyle.fixture.class) || (taskStyle.fixture.class == 'reviewPending' && !showLayout)\"\r\n style=\"top: 24px; right: 164px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\" *ngIf=\"layoutForm.disabled && selectedView === 'detail'\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Submit Button -->\r\n <button *ngIf=\"!layoutForm.disabled\" style=\"top: 24px; right: 94px;padding: 9px 20px !important;\"\r\n type=\"button\" class=\"btn btn-primary d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"updateLayout(true)\">\r\n Save\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button *ngIf=\"selectedView === 'detail'\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\"\r\n stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Panel Collapse Handlers -->\r\n <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Edit Fixture Body -->\r\n <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <div id=\"edit-body\" class=\"row\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-basic-details>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-products>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\" [isSubmitted]=\"submitFixture\"\r\n (submitEvent)=\"onFixtureSubmit($event)\">\r\n </lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n [style]=\"{'min-width': isRightPanelCollapsed ? '0' : editFixture || showLayout ? '340px' : '1050px'}\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</section>\r\n\r\n<!-- Templates -->\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n <div *ngIf=\"showLayout && !isRightPanelCollapsed\">\r\n <div class=\"card-body\">\r\n\r\n <!-- Title -->\r\n <div class=\"storeTitle mb-3\">Store response</div>\r\n <hr>\r\n\r\n <!-- Section Header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <h5 class=\"subTitle fw-semibold mb-0\">Fixture verification</h5>\r\n <i class=\"bi bi-chevron-up text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"!toggle\"></i>\r\n <i class=\"bi bi-chevron-down text-muted cursor-pointer\" (click)=\"toggle = !toggle\" *ngIf=\"toggle\"></i>\r\n </div>\r\n <div class=\"smallText text-muted d-block mb-4\">\r\n Assigned on: {{storeFeedback?.fixtureData?.[0]?.taskData?.createdAt | date:'dd MMM YYY, hh:mm:SS a'}}\r\n </div>\r\n\r\n\r\n <div *ngIf=\"toggle\" class=\"mt-10\">\r\n <!-- Column Headings -->\r\n <div class=\"row text-muted small fw-semibold mb-5\">\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-3 text-center lightText\">Before</div>\r\n <div class=\"col-3 text-center lightText\">After</div>\r\n </div>\r\n \r\n <!-- Wall Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Wall Fixtures</div>\r\n <div class=\"col-3 text-center\">\r\n {{wallCount - clCount}}\r\n </div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"(wallCount - clCount) != storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-up\" *ngIf=\"(wallCount - clCount) < storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i> \r\n <i class=\"bi bi-arrow-down\" *ngIf=\"(wallCount - clCount) > storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures\"></i>{{storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Euro Centre Fixtures -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Euro Centre Fixtures</div>\r\n <div class=\"col-3 text-center\">{{floorData.centerFixture.length}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"floorData.centerFixture.length != storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"floorData.centerFixture.length > storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"floorData.centerFixture.length < storeFeedback.fixtureData[0]?.answers?.[0]?.floorFixtures\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures}}\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Lenses -->\r\n <div class=\"row align-items-center py-2 mb-5 wallText\">\r\n <div class=\"col-6\">Contact Lenses</div>\r\n <div class=\"col-3 text-center\">{{clCount}}</div>\r\n <div class=\"col-3 text-center fw-semibold\" [ngClass]=\"clCount != storeFeedback.fixtureData[0].answers?.[0]?.cl ? 'text-danger' : ''\">\r\n <i class=\"bi bi-arrow-down\" *ngIf=\"clCount > storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i> \r\n <i class=\"bi bi-arrow-up\" *ngIf=\"clCount < storeFeedback.fixtureData[0].answers?.[0]?.cl\"></i>\r\n {{storeFeedback.fixtureData[0].answers?.[0]?.cl}}\r\n </div>\r\n </div>\r\n \r\n <hr>\r\n \r\n <!-- Total Section -->\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-6 fw-semibold totalText\">Total</div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\">{{floorData.fixtureCount}}</div>\r\n </div>\r\n <div class=\"col-3 text-center totalText\">\r\n <div class=\"total-box\" [ngClass]=\"floorData.fixtureCount !== (storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures) ? 'text-center' :''\">{{storeFeedback.fixtureData[0].answers?.[0]?.cl + storeFeedback.fixtureData[0].answers?.[0]?.floorFixtures + storeFeedback.fixtureData[0].answers?.[0]?.wallFixtures}}</div>\r\n </div>\r\n </div>\r\n\r\n @if (storeFeedback.fixtureData[0]?.answers?.[0]?.comments.length) {\r\n <div id=\"fixture-comments\" class=\"mt-10\">\r\n <h5 class=\"mb-2\">Comments</h5>\r\n\r\n <div class=\"log-block\" *ngFor=\"let c of storeFeedback.fixtureData[0]?.answers[0]?.comments;let i= index\">\r\n <!-- User avatar -->\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n\r\n <div class=\"d-flex gap-1 flex-column\">\r\n <h4>{{c?.userName}}</h4>\r\n <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n </div>\r\n\r\n @if(c?.responsetype === 'comment'){\r\n <h5>{{c?.comment}}</h5>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <lib-verification-feedback [floorData]=\"floorData\" [ngClass]=\"{ 'd-none': isRightPanelCollapsed && !editFixture}\"\r\n [feedbackDetails]=\"selectedFixtureFeedback\" (changeFixture)=\"onChangeFixtureOnFeedbackPanel($event,true)\"\r\n [totalFixtures]=\"allFixtureInstances\" [cdn]=\"cdnUrl\" (action)=\"handleFeedbackAction($event)\"\r\n [showAction]=\"!editFixture\" *ngIf=\"!showLayout\"></lib-verification-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noStoreVideo let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">No Store Video Found</h2>\r\n <p>The video will be available once a request is raised and the store submits a complete store video.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Close</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Apply IVM Logics</h2>\r\n <p>This will analyze the current layout and apply the pre-defined fixture logics.</p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyPIDLogics()\">Proceed</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n <div class=\"modal-body\">\r\n <div>\r\n <h2 class=\"mb-3\">Approve layout/plan</h2>\r\n <p>\r\n Are you sure you want to approve the layout? Please ensure it has been thoroughly reviewed before approving.\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\">\r\n <span *ngIf=\"!isButtonLoading\">Approve</span>\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#header .cus-btn:hover{background:#e2f5ff}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}#segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#segment-btn .nav-tabs .nav-link{border:none;margin:0}#segment-btn .nav-item{text-align:center}#segment-btn .nav-item:last-child .nav-link{border:none}.link-btn{color:#33b5ff;cursor:pointer;font-weight:500}.link-btn:hover{color:#33b5ff;text-decoration:underline!important}.btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}.updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.btn .spinner{height:22px;width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.storeTitle{font-family:Inter;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.subTitle{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.smallText{font-family:Inter;font-weight:400;font-size:14px;color:#667085;line-height:20px;letter-spacing:0%}.wallText{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.totalText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#1d2939}.lightText{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#344054}.total-box{background-color:#f3f4f6;border-radius:8px;padding:8px 0;font-weight:600}.bi-arrow-up,.bi-arrow-down{color:#dc3545}.log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}.log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}.log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}\n"] }]
|
|
16431
16430
|
}], 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: [{
|
|
16432
16431
|
type: ViewChild,
|
|
16433
16432
|
args: ["baseCanvas"]
|
|
@@ -54333,8 +54332,10 @@ class CreatePlanogramComponent {
|
|
|
54333
54332
|
this.destroyCadProcessingAnimation();
|
|
54334
54333
|
}
|
|
54335
54334
|
get isValidToCreatePlano() {
|
|
54336
|
-
|
|
54337
|
-
|
|
54335
|
+
const hasStoreSelection = !!this.selectedStore || !!this.newStoreDetails;
|
|
54336
|
+
const floorNumber = this.selectedFloor || this.newStoreDetails?.floor;
|
|
54337
|
+
return (hasStoreSelection &&
|
|
54338
|
+
floorNumber &&
|
|
54338
54339
|
(this.selectedFile || this.isManual));
|
|
54339
54340
|
}
|
|
54340
54341
|
get isModalBusy() {
|
|
@@ -54388,21 +54389,24 @@ class CreatePlanogramComponent {
|
|
|
54388
54389
|
if (!this.isValidToCreatePlano)
|
|
54389
54390
|
return;
|
|
54390
54391
|
const hasCadFile = !!this.selectedFile;
|
|
54392
|
+
let shouldResetNewStoreSummary = false;
|
|
54391
54393
|
try {
|
|
54392
54394
|
this.isButtonLoading = true;
|
|
54393
54395
|
if (hasCadFile) {
|
|
54394
54396
|
this.showCadProcessingLoader();
|
|
54395
54397
|
}
|
|
54398
|
+
const storeContext = await this.ensureStoreForPlanoCreation();
|
|
54399
|
+
if (!storeContext)
|
|
54400
|
+
return;
|
|
54396
54401
|
let planoRes;
|
|
54397
54402
|
if (this.selectedFile) {
|
|
54398
|
-
|
|
54399
|
-
planoRes = await firstValueFrom(this.storeBuilderService.createPlanoFromCAD(this.selectedFile, this.selectedStore, storeName ?? this.selectedStore, this.selectedFloor));
|
|
54403
|
+
planoRes = await firstValueFrom(this.storeBuilderService.createPlanoFromCAD(this.selectedFile, storeContext.storeId, storeContext.storeName ?? storeContext.storeId, storeContext.floorNumber));
|
|
54400
54404
|
}
|
|
54401
54405
|
else {
|
|
54402
54406
|
planoRes = await firstValueFrom(this.storeBuilderService.createEmptyPlano({
|
|
54403
54407
|
clientId: this.clientId,
|
|
54404
|
-
storeId:
|
|
54405
|
-
floorNumber:
|
|
54408
|
+
storeId: storeContext.storeId,
|
|
54409
|
+
floorNumber: storeContext.floorNumber,
|
|
54406
54410
|
}));
|
|
54407
54411
|
}
|
|
54408
54412
|
if (!planoRes?.data)
|
|
@@ -54410,6 +54414,8 @@ class CreatePlanogramComponent {
|
|
|
54410
54414
|
this.activeModal.close(planoRes?.data);
|
|
54411
54415
|
}
|
|
54412
54416
|
catch (error) {
|
|
54417
|
+
shouldResetNewStoreSummary =
|
|
54418
|
+
!!this.newStoreDetails?.storeId && !!this.newStoreDetails?.infraTicketCreated;
|
|
54413
54419
|
this.toastService.getErrorToast(error?.error?.error?.errMsg ?? "Failed to extract plano from CAD file.");
|
|
54414
54420
|
console.log("@@ ~ onCreate [ERR]:", error);
|
|
54415
54421
|
}
|
|
@@ -54418,6 +54424,11 @@ class CreatePlanogramComponent {
|
|
|
54418
54424
|
if (hasCadFile) {
|
|
54419
54425
|
this.hideCadProcessingLoader();
|
|
54420
54426
|
}
|
|
54427
|
+
if (shouldResetNewStoreSummary) {
|
|
54428
|
+
this.newStoreDetails = null;
|
|
54429
|
+
this.selectedStoreFloors = [];
|
|
54430
|
+
this.isLayoutExist = false;
|
|
54431
|
+
}
|
|
54421
54432
|
}
|
|
54422
54433
|
}
|
|
54423
54434
|
showCadProcessingLoader() {
|
|
@@ -54453,60 +54464,109 @@ class CreatePlanogramComponent {
|
|
|
54453
54464
|
const spocUser = await this.getSpocUserDetails(this.createStoreForm.value.storeName.trim());
|
|
54454
54465
|
if (!spocUser)
|
|
54455
54466
|
return;
|
|
54456
|
-
|
|
54457
|
-
|
|
54458
|
-
|
|
54459
|
-
|
|
54460
|
-
|
|
54461
|
-
|
|
54462
|
-
|
|
54463
|
-
|
|
54464
|
-
|
|
54465
|
-
|
|
54466
|
-
|
|
54467
|
-
|
|
54468
|
-
|
|
54469
|
-
|
|
54470
|
-
|
|
54471
|
-
|
|
54472
|
-
|
|
54473
|
-
|
|
54474
|
-
|
|
54475
|
-
|
|
54476
|
-
|
|
54477
|
-
|
|
54478
|
-
|
|
54479
|
-
|
|
54480
|
-
|
|
54481
|
-
|
|
54482
|
-
|
|
54483
|
-
|
|
54484
|
-
|
|
54485
|
-
|
|
54467
|
+
this.selectedStore = "";
|
|
54468
|
+
this.selectedFloor = this.createStoreForm.get("floor")?.value ?? 1;
|
|
54469
|
+
this.selectedStoreFloors = [];
|
|
54470
|
+
this.isLayoutExist = false;
|
|
54471
|
+
this.newStoreDetails = this.buildPendingStoreDetails(spocUser);
|
|
54472
|
+
this.isCreateStoreMode = false;
|
|
54473
|
+
}
|
|
54474
|
+
catch (error) {
|
|
54475
|
+
this.toastService.getErrorToast("Failed to prepare store details");
|
|
54476
|
+
}
|
|
54477
|
+
finally {
|
|
54478
|
+
this.isButtonLoading = false;
|
|
54479
|
+
}
|
|
54480
|
+
}
|
|
54481
|
+
buildPendingStoreDetails(spocUser) {
|
|
54482
|
+
const createStorePayload = {
|
|
54483
|
+
storeName: this.createStoreForm.value.storeName?.toUpperCase()?.trim(),
|
|
54484
|
+
clientId: this.clientId,
|
|
54485
|
+
businessType: this.createStoreForm.value.businessType,
|
|
54486
|
+
cluster: [],
|
|
54487
|
+
storeType: {
|
|
54488
|
+
type: this.createStoreForm.value.storeType,
|
|
54489
|
+
name: this.createStoreForm.value?.storeTypeName?.trim(),
|
|
54490
|
+
},
|
|
54491
|
+
storeProfile: {
|
|
54492
|
+
storeCode: this.createStoreForm?.value?.storeCode,
|
|
54493
|
+
address: this.createStoreForm.value?.address,
|
|
54494
|
+
country: this.createStoreForm.value?.country,
|
|
54495
|
+
state: this.createStoreForm.value?.state,
|
|
54496
|
+
city: this.createStoreForm.value?.city,
|
|
54497
|
+
pincode: this.createStoreForm.value?.pincode,
|
|
54498
|
+
latitude: this.createStoreForm.value.latitude?.toString().trim()
|
|
54499
|
+
? this.createStoreForm.value.latitude
|
|
54500
|
+
: 0,
|
|
54501
|
+
longitude: this.createStoreForm.value.longitude?.toString().trim()
|
|
54502
|
+
? this.createStoreForm.value.longitude
|
|
54503
|
+
: 0,
|
|
54504
|
+
timeZone: "Asia/Kolkata",
|
|
54505
|
+
open: "10:00:00",
|
|
54506
|
+
close: "20:00:00",
|
|
54507
|
+
},
|
|
54508
|
+
edge: {
|
|
54509
|
+
serverType: false,
|
|
54510
|
+
},
|
|
54511
|
+
spocDetails: [spocUser],
|
|
54512
|
+
};
|
|
54513
|
+
return {
|
|
54514
|
+
...createStorePayload,
|
|
54515
|
+
createStorePayload,
|
|
54516
|
+
floor: this.createStoreForm.get("floor")?.value ?? 1,
|
|
54517
|
+
storeId: null,
|
|
54518
|
+
infraTicketCreated: false,
|
|
54519
|
+
};
|
|
54520
|
+
}
|
|
54521
|
+
async ensureStoreForPlanoCreation() {
|
|
54522
|
+
const floorNumber = this.selectedFloor || this.newStoreDetails?.floor;
|
|
54523
|
+
if (!this.newStoreDetails) {
|
|
54524
|
+
if (!this.selectedStore || !floorNumber)
|
|
54525
|
+
return null;
|
|
54526
|
+
const storeName = this.storeList.find((s) => s.value === this.selectedStore)?.label;
|
|
54527
|
+
return {
|
|
54528
|
+
storeId: this.selectedStore,
|
|
54529
|
+
storeName: storeName ?? this.selectedStore,
|
|
54530
|
+
floorNumber,
|
|
54486
54531
|
};
|
|
54487
|
-
|
|
54488
|
-
|
|
54489
|
-
if (
|
|
54490
|
-
const
|
|
54491
|
-
|
|
54532
|
+
}
|
|
54533
|
+
try {
|
|
54534
|
+
if (!this.newStoreDetails.storeId) {
|
|
54535
|
+
const res = await firstValueFrom(this.storeBuilderService.createStore(this.newStoreDetails.createStorePayload));
|
|
54536
|
+
const newStore = res?.data?.store;
|
|
54537
|
+
if (!newStore?.storeId) {
|
|
54538
|
+
this.toastService.getErrorToast("Unable to create store");
|
|
54539
|
+
return null;
|
|
54540
|
+
}
|
|
54541
|
+
this.newStoreDetails.storeId = newStore.storeId;
|
|
54542
|
+
this.newStoreDetails.storeName = newStore.storeName;
|
|
54543
|
+
this.selectedStore = newStore.storeId;
|
|
54544
|
+
this.selectedFloor = floorNumber;
|
|
54545
|
+
this.selectedStoreFloors = [];
|
|
54546
|
+
this.isLayoutExist = false;
|
|
54547
|
+
}
|
|
54548
|
+
if (!this.newStoreDetails.infraTicketCreated) {
|
|
54549
|
+
await firstValueFrom(this.storeBuilderService.createInfraTicket({
|
|
54550
|
+
storeId: this.newStoreDetails.storeId,
|
|
54492
54551
|
Date: new Date().toISOString().split("T")[0],
|
|
54493
54552
|
issueType: "installation",
|
|
54494
54553
|
}));
|
|
54495
|
-
|
|
54496
|
-
|
|
54554
|
+
this.newStoreDetails.infraTicketCreated = true;
|
|
54555
|
+
}
|
|
54556
|
+
const storeContext = {
|
|
54557
|
+
storeId: this.newStoreDetails.storeId,
|
|
54558
|
+
storeName: this.newStoreDetails.storeName,
|
|
54559
|
+
floorNumber,
|
|
54560
|
+
};
|
|
54561
|
+
if (this.newStoreDetails.storeId && this.newStoreDetails.infraTicketCreated) {
|
|
54562
|
+
if (!this.storeList.some((store) => store.value === this.newStoreDetails.storeId)) {
|
|
54497
54563
|
this.storeList.push({
|
|
54498
|
-
label:
|
|
54499
|
-
value:
|
|
54564
|
+
label: this.newStoreDetails.storeName,
|
|
54565
|
+
value: this.newStoreDetails.storeId,
|
|
54500
54566
|
});
|
|
54501
|
-
this.selectedStore = newStore.storeId;
|
|
54502
|
-
this.selectedFloor = this.createStoreForm.get("floor")?.value ?? 1;
|
|
54503
|
-
this.newStoreDetails = createStorePayload;
|
|
54504
|
-
this.isCreateStoreMode = false;
|
|
54505
54567
|
}
|
|
54506
54568
|
}
|
|
54507
|
-
|
|
54508
|
-
this.toastService.getErrorToast("Unable to create store");
|
|
54509
|
-
}
|
|
54569
|
+
return storeContext;
|
|
54510
54570
|
}
|
|
54511
54571
|
catch (error) {
|
|
54512
54572
|
if (error?.error?.error?.error === "StoreName already exists") {
|
|
@@ -54515,9 +54575,7 @@ class CreatePlanogramComponent {
|
|
|
54515
54575
|
else {
|
|
54516
54576
|
this.toastService.getErrorToast("Failed to create store");
|
|
54517
54577
|
}
|
|
54518
|
-
|
|
54519
|
-
finally {
|
|
54520
|
-
this.isButtonLoading = false;
|
|
54578
|
+
return null;
|
|
54521
54579
|
}
|
|
54522
54580
|
}
|
|
54523
54581
|
async getSpocUserDetails(storeName) {
|
|
@@ -54663,6 +54721,10 @@ class CreatePlanogramComponent {
|
|
|
54663
54721
|
onBack() {
|
|
54664
54722
|
if (this.isModalBusy)
|
|
54665
54723
|
return;
|
|
54724
|
+
if (!this.isCreateStoreMode && this.newStoreDetails) {
|
|
54725
|
+
this.isCreateStoreMode = true;
|
|
54726
|
+
return;
|
|
54727
|
+
}
|
|
54666
54728
|
this.isCreateStoreMode = false;
|
|
54667
54729
|
this.newStoreDetails = null;
|
|
54668
54730
|
}
|
|
@@ -54675,7 +54737,7 @@ class CreatePlanogramComponent {
|
|
|
54675
54737
|
libraries: ["places"],
|
|
54676
54738
|
}),
|
|
54677
54739
|
},
|
|
54678
|
-
], viewQueries: [{ propertyName: "cadProcessingLottieRef", first: true, predicate: ["cadProcessingLottie"], descendants: true }], ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n <div *ngIf=\"isPopupLoading\" class=\"modal-loader-overlay\">\r\n <svg class=\"modal-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 </div>\r\n\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\">\n <label for=\"storeName\" class=\"form-label mb-1\">Store name</label>\n <input type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\n placeholder=\"Type store name. eg: LKST1234\" [disabled]=\"isModalBusy\" />\n\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n\r\n @if(createStoreForm.get('storeName')?.hasError('exists')){\r\n <small class=\"text-danger\">\r\n Store already exists.\r\n </small>\r\n }@else {\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('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\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('invalidStoreName') \">\r\n Store name must be ST1234 or LKST1234 format.\r\n </small>\r\n }\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\" [label]=\"'Select floor'\"\n formControlName=\"floor\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n\n <div class=\"col-6 mb-4\">\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"businessTypeList\"\n [label]=\"'Select business type'\" formControlName=\"businessType\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n\n <div class=\"col-6 mb-4\">\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"storeTypeList\"\n [label]=\"'Select store type'\" formControlName=\"storeType\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n\n @if(createStoreForm.get('storeType')?.value == 'Mall Store'){\n <div class=\"col-12 mb-4\">\n <label for=\"storeTypeName\" class=\"form-label mb-1\">Enter Mall name</label>\n <input type=\"text\" class=\"form-control\" id=\"storeTypeName\" formControlName=\"storeTypeName\"\n placeholder=\"Enter Mall name\" [disabled]=\"isModalBusy\" />\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\">\n <label for=\"address\" class=\"form-label mb-1\">Address</label>\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\"\n placeholder=\"Search and enter address\" ngx-gp-autocomplete (onAddressChange)=\"onAddressChange($event)\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"country\" class=\"form-label mb-1\">Country</label>\n <input type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\" placeholder=\"Enter Country\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"state\" class=\"form-label mb-1\">State</label>\n <input type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\" placeholder=\"Enter State\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"city\" class=\"form-label mb-1\">City / Town</label>\n <input type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\" placeholder=\"Enter City / Town\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"pincode\" class=\"form-label mb-1\">Pin / Zip Code</label>\n <input type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\"\n placeholder=\"Enter Pin / Zip Code\" [disabled]=\"isModalBusy\" />\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\">\n <label for=\"email\" class=\"form-label mb-1\">Spoc user email (optional)</label>\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\n placeholder=\"Enter spoc user email\" [disabled]=\"isModalBusy\" />\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 class=\"new-store-txt\">{{newStoreDetails?.storeName}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Floor</p>\r\n <h3 class=\"new-store-txt\">Floor {{this.selectedFloor}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Business type</p>\r\n <h3 class=\"new-store-txt\">{{newStoreDetails?.businessType | uppercase}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store type</p>\r\n <h3 class=\"new-store-txt\">{{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\">\n <lib-reactive-select [search]=\"true\" [(ngModel)]=\"selectedStore\" [idField]=\"'value'\" [nameField]=\"'label'\"\n [data]=\"storeList\" [label]=\"'Select store'\" [action]=\"true\" (actionClick)=\"addNewStore()\"\n [actionLabel]=\"'Create new store'\" (ngModelChange)=\"onStoreChange()\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n <div class=\"col-6\">\n <lib-reactive-select [(ngModel)]=\"selectedFloor\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\"\n [label]=\"'Select floor'\" (ngModelChange)=\"onFloorChange()\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\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 @if (isCadProcessing) {\r\n <div class=\"cad-loader-panel\">\r\n <!--\r\n <div #cadProcessingLottie class=\"cad-lottie\"></div>\r\n <p class=\"cad-loader-text mb-0\">Creating planogram from CAD...</p>\r\n -->\r\n <div class=\"cad-loader-content\">\r\n <svg class=\"cad-basic-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 <p class=\"cad-loader-text mb-0\">\r\n Building layout\r\n <span class=\"loading-dots\" aria-hidden=\"true\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"row\">\n <div [ngClass]=\"selectedFile ? 'col-12' :'col-6'\">\n <file-upload [disabled]=\"isModalBusy\" (fileChange)=\"onFileChange($event)\"></file-upload>\n </div>\n <div [ngClass]=\"selectedFile ? 'd-none' :'col-6'\"\n class=\"d-flex flex-column justify-content-center align-items-center gap-3\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M55.5008 34.375H51.3752L47.6258 38.1253H42.3752V34.375H31.1252V49.3753H27.3758C26.8785 49.3676 26.3846 49.4589 25.9229 49.6439C25.4612 49.8289 25.0409 50.1039 24.6864 50.4528C24.332 50.8018 24.0506 51.2178 23.8584 51.6766C23.6663 52.1353 23.5674 52.6278 23.5674 53.1251C23.5674 53.6225 23.6663 54.1149 23.8584 54.5737C24.0506 55.0325 24.332 55.4485 24.6864 55.7975C25.0409 56.1464 25.4612 56.4214 25.9229 56.6064C26.3846 56.7914 26.8785 56.8827 27.3758 56.875H55.5008C55.998 56.875 56.4748 56.6775 56.8264 56.3259C57.178 55.9743 57.3755 55.4975 57.3755 55.0003V36.2497C57.3755 35.7525 57.178 35.2757 56.8264 34.9241C56.4748 34.5725 55.998 34.375 55.5008 34.375ZM31.1252 28.75V49.3753H27.3758C26.3813 49.3753 25.4275 49.7703 24.7242 50.4734C24.0209 51.1765 23.6257 52.1302 23.6255 53.1247V32.5003C23.6255 31.5057 24.0206 30.5518 24.7239 29.8484C25.4272 29.1451 26.3811 28.75 27.3758 28.75H31.1252Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M31.1252 49.3753V34.375H42.3752V38.1253H47.6258L51.3752 34.375H55.5008C55.998 34.375 56.4748 34.5725 56.8264 34.9241C57.178 35.2757 57.3755 35.7525 57.3755 36.2497V55.0003C57.3755 55.4975 57.178 55.9743 56.8264 56.3259C56.4748 56.6775 55.998 56.875 55.5008 56.875H27.3758C26.8785 56.8827 26.3846 56.7914 25.9229 56.6064C25.4612 56.4214 25.0409 56.1464 24.6864 55.7975C24.332 55.4485 24.0506 55.0325 23.8584 54.5737C23.6663 54.1149 23.5674 53.6225 23.5674 53.1251C23.5674 52.6278 23.6663 52.1353 23.8584 51.6766C24.0506 51.2178 24.332 50.8018 24.6864 50.4528C25.0409 50.1039 25.4612 49.8289 25.9229 49.6439C26.3846 49.4589 26.8785 49.3676 27.3758 49.3753M31.1252 49.3753H27.3758M31.1252 49.3753V28.75H27.3758C26.3811 28.75 25.4272 29.1451 24.7239 29.8484C24.0206 30.5518 23.6255 31.5057 23.6255 32.5003V53.1247C23.6257 52.1302 24.0209 51.1765 24.7242 50.4734C25.4275 49.7703 26.3813 49.3753 27.3758 49.3753\"\r\n stroke=\"#98A2B3\" stroke-width=\"0.84375\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M56.8317 26.293L54.2064 23.6686C53.856 23.3252 53.3849 23.1328 52.8942 23.1328C52.4035 23.1328 51.9324 23.3252 51.582 23.6686L42.375 32.8756V38.1253H47.6256L56.8317 28.9183C57.1751 28.5679 57.3675 28.0968 57.3675 27.6061C57.3675 27.1155 57.1751 26.6434 56.8317 26.293Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\n <div class=\"d-flex gap-1 align-items-center\">\n <input [(ngModel)]=\"isManual\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\" id=\"manual\"\n [disabled]=\"isModalBusy\">\n <label for=\"manual\">Create manually</label>\n </div>\n </div>\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"modal-actions\">\r\n @if(isCreateStoreMode){\n <button type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\" [disabled]=\"isModalBusy\">Back</button>\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid || isModalBusy\"\n (click)=\"onCreateStore()\">\n <span *ngIf=\"!isButtonLoading\">\n Next\n </span>\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 {\n <button *ngIf=\"newStoreDetails\" type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\"\n [disabled]=\"isModalBusy\">Back</button>\n <button *ngIf=\"!newStoreDetails\" type=\"button\" class=\"btn btn-outline me-auto\" (click)=\"addNewStore()\"\n [disabled]=\"isModalBusy\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.66829 0.834961V12.5016M0.834961 6.66829H12.5016\" stroke=\"#344054\" stroke-width=\"1.67\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\r\n\n Create new store\n </button>\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isModalBusy\"\n (click)=\"onCreateLayoutPlano()\">\n <span *ngIf=\"!isButtonLoading || isCadProcessing\">\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading && !isCadProcessing\" 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>\r\n", styles: [".modal-wrapper{padding:24px;position:relative;min-height:220px}.modal-loader-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#ffffffb3;border-radius:12px!important;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.cad-loader-panel{border:2px dashed #d7dce1;border-radius:12px;min-height:190px;display:flex;justify-content:center;align-items:center;text-align:center;background:#fff;transition:all .2s ease}.cad-loader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding:24px}.cad-lottie{width:220px;height:220px}.cad-basic-spinner{width:44px;height:44px;animation:cad-spin .9s linear infinite}.cad-basic-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}.cad-loader-text{color:#344054;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}.loading-dots{display:inline-flex;min-width:18px;justify-content:flex-start}.loading-dots span{animation:cad-dot-pulse 1.2s infinite;opacity:.2}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}.modal-spinner{width:44px;height:44px;animation:modal-spin .9s linear infinite}.modal-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes modal-spin{to{transform:rotate(360deg)}}@keyframes cad-spin{to{transform:rotate(360deg)}}@keyframes cad-dot-pulse{0%,80%,to{opacity:.2}40%{opacity:1}}.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%}.new-store-txt{font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.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.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.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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
54740
|
+
], viewQueries: [{ propertyName: "cadProcessingLottieRef", first: true, predicate: ["cadProcessingLottie"], descendants: true }], ngImport: i0, template: "<div class=\"modal-wrapper\">\r\n <div *ngIf=\"isPopupLoading\" class=\"modal-loader-overlay\">\r\n <svg class=\"modal-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 </div>\r\n\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. eg: LKST1234\" [disabled]=\"isModalBusy\" />\r\n\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n\r\n @if(createStoreForm.get('storeName')?.hasError('exists')){\r\n <small class=\"text-danger\">\r\n Store already exists.\r\n </small>\r\n }@else {\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('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\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('invalidStoreName') \">\r\n Store name must be ST1234 or LKST1234 format.\r\n </small>\r\n }\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\" [disabled]=\"isModalBusy\">\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\" [disabled]=\"isModalBusy\">\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\" [disabled]=\"isModalBusy\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n @if(createStoreForm.get('storeType')?.value == 'Mall Store'){\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\" [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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\" [disabled]=\"isModalBusy\" />\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 (optional)</label>\r\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\r\n placeholder=\"Enter spoc user email\" [disabled]=\"isModalBusy\" />\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 class=\"new-store-txt\">{{newStoreDetails?.storeName}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Floor</p>\r\n <h3 class=\"new-store-txt\">Floor {{this.selectedFloor}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Business type</p>\r\n <h3 class=\"new-store-txt\">{{newStoreDetails?.businessType | uppercase}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store type</p>\r\n <h3 class=\"new-store-txt\">{{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]=\"isModalBusy\">\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]=\"isModalBusy\">\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 @if (isCadProcessing) {\r\n <div class=\"cad-loader-panel\">\r\n <!--\r\n <div #cadProcessingLottie class=\"cad-lottie\"></div>\r\n <p class=\"cad-loader-text mb-0\">Creating planogram from CAD...</p>\r\n -->\r\n <div class=\"cad-loader-content\">\r\n <svg class=\"cad-basic-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 <p class=\"cad-loader-text mb-0\">\r\n Building layout\r\n <span class=\"loading-dots\" aria-hidden=\"true\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"row\">\r\n <div [ngClass]=\"selectedFile ? 'col-12' :'col-6'\">\r\n <file-upload [disabled]=\"isModalBusy\" (fileChange)=\"onFileChange($event)\"></file-upload>\r\n </div>\r\n <div [ngClass]=\"selectedFile ? 'd-none' :'col-6'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center gap-3\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M55.5008 34.375H51.3752L47.6258 38.1253H42.3752V34.375H31.1252V49.3753H27.3758C26.8785 49.3676 26.3846 49.4589 25.9229 49.6439C25.4612 49.8289 25.0409 50.1039 24.6864 50.4528C24.332 50.8018 24.0506 51.2178 23.8584 51.6766C23.6663 52.1353 23.5674 52.6278 23.5674 53.1251C23.5674 53.6225 23.6663 54.1149 23.8584 54.5737C24.0506 55.0325 24.332 55.4485 24.6864 55.7975C25.0409 56.1464 25.4612 56.4214 25.9229 56.6064C26.3846 56.7914 26.8785 56.8827 27.3758 56.875H55.5008C55.998 56.875 56.4748 56.6775 56.8264 56.3259C57.178 55.9743 57.3755 55.4975 57.3755 55.0003V36.2497C57.3755 35.7525 57.178 35.2757 56.8264 34.9241C56.4748 34.5725 55.998 34.375 55.5008 34.375ZM31.1252 28.75V49.3753H27.3758C26.3813 49.3753 25.4275 49.7703 24.7242 50.4734C24.0209 51.1765 23.6257 52.1302 23.6255 53.1247V32.5003C23.6255 31.5057 24.0206 30.5518 24.7239 29.8484C25.4272 29.1451 26.3811 28.75 27.3758 28.75H31.1252Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M31.1252 49.3753V34.375H42.3752V38.1253H47.6258L51.3752 34.375H55.5008C55.998 34.375 56.4748 34.5725 56.8264 34.9241C57.178 35.2757 57.3755 35.7525 57.3755 36.2497V55.0003C57.3755 55.4975 57.178 55.9743 56.8264 56.3259C56.4748 56.6775 55.998 56.875 55.5008 56.875H27.3758C26.8785 56.8827 26.3846 56.7914 25.9229 56.6064C25.4612 56.4214 25.0409 56.1464 24.6864 55.7975C24.332 55.4485 24.0506 55.0325 23.8584 54.5737C23.6663 54.1149 23.5674 53.6225 23.5674 53.1251C23.5674 52.6278 23.6663 52.1353 23.8584 51.6766C24.0506 51.2178 24.332 50.8018 24.6864 50.4528C25.0409 50.1039 25.4612 49.8289 25.9229 49.6439C26.3846 49.4589 26.8785 49.3676 27.3758 49.3753M31.1252 49.3753H27.3758M31.1252 49.3753V28.75H27.3758C26.3811 28.75 25.4272 29.1451 24.7239 29.8484C24.0206 30.5518 23.6255 31.5057 23.6255 32.5003V53.1247C23.6257 52.1302 24.0209 51.1765 24.7242 50.4734C25.4275 49.7703 26.3813 49.3753 27.3758 49.3753\"\r\n stroke=\"#98A2B3\" stroke-width=\"0.84375\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M56.8317 26.293L54.2064 23.6686C53.856 23.3252 53.3849 23.1328 52.8942 23.1328C52.4035 23.1328 51.9324 23.3252 51.582 23.6686L42.375 32.8756V38.1253H47.6256L56.8317 28.9183C57.1751 28.5679 57.3675 28.0968 57.3675 27.6061C57.3675 27.1155 57.1751 26.6434 56.8317 26.293Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n <div class=\"d-flex gap-1 align-items-center\">\r\n <input [(ngModel)]=\"isManual\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\" id=\"manual\"\r\n [disabled]=\"isModalBusy\">\r\n <label for=\"manual\">Create manually</label>\r\n </div>\r\n </div>\r\n </div>\r\n }\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()\" [disabled]=\"isModalBusy\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid || isModalBusy\"\r\n (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()\"\r\n [disabled]=\"isModalBusy\">Back</button>\r\n <button *ngIf=\"!newStoreDetails\" type=\"button\" class=\"btn btn-outline me-auto\" (click)=\"addNewStore()\"\r\n [disabled]=\"isModalBusy\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.66829 0.834961V12.5016M0.834961 6.66829H12.5016\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n Create new store\r\n </button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isModalBusy\"\r\n (click)=\"onCreateLayoutPlano()\">\r\n <span *ngIf=\"!isButtonLoading || isCadProcessing\">\r\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\r\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading && !isCadProcessing\" 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>\r\n", styles: [".modal-wrapper{padding:24px;position:relative;min-height:220px}.modal-loader-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#ffffffb3;border-radius:12px!important;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.cad-loader-panel{border:2px dashed #d7dce1;border-radius:12px;min-height:190px;display:flex;justify-content:center;align-items:center;text-align:center;background:#fff;transition:all .2s ease}.cad-loader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding:24px}.cad-lottie{width:220px;height:220px}.cad-basic-spinner{width:44px;height:44px;animation:cad-spin .9s linear infinite}.cad-basic-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}.cad-loader-text{color:#344054;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}.loading-dots{display:inline-flex;min-width:18px;justify-content:flex-start}.loading-dots span{animation:cad-dot-pulse 1.2s infinite;opacity:.2}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}.modal-spinner{width:44px;height:44px;animation:modal-spin .9s linear infinite}.modal-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes modal-spin{to{transform:rotate(360deg)}}@keyframes cad-spin{to{transform:rotate(360deg)}}@keyframes cad-dot-pulse{0%,80%,to{opacity:.2}40%{opacity:1}}.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%}.new-store-txt{font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.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.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.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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
54679
54741
|
}
|
|
54680
54742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreatePlanogramComponent, decorators: [{
|
|
54681
54743
|
type: Component,
|
|
@@ -54698,7 +54760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
54698
54760
|
libraries: ["places"],
|
|
54699
54761
|
}),
|
|
54700
54762
|
},
|
|
54701
|
-
], template: "<div class=\"modal-wrapper\">\r\n <div *ngIf=\"isPopupLoading\" class=\"modal-loader-overlay\">\r\n <svg class=\"modal-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 </div>\r\n\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\">\n <label for=\"storeName\" class=\"form-label mb-1\">Store name</label>\n <input type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\n placeholder=\"Type store name. eg: LKST1234\" [disabled]=\"isModalBusy\" />\n\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n\r\n @if(createStoreForm.get('storeName')?.hasError('exists')){\r\n <small class=\"text-danger\">\r\n Store already exists.\r\n </small>\r\n }@else {\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('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\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('invalidStoreName') \">\r\n Store name must be ST1234 or LKST1234 format.\r\n </small>\r\n }\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"col-6 mb-4\">\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\" [label]=\"'Select floor'\"\n formControlName=\"floor\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n\n <div class=\"col-6 mb-4\">\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"businessTypeList\"\n [label]=\"'Select business type'\" formControlName=\"businessType\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n\n <div class=\"col-6 mb-4\">\n <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"storeTypeList\"\n [label]=\"'Select store type'\" formControlName=\"storeType\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n\n @if(createStoreForm.get('storeType')?.value == 'Mall Store'){\n <div class=\"col-12 mb-4\">\n <label for=\"storeTypeName\" class=\"form-label mb-1\">Enter Mall name</label>\n <input type=\"text\" class=\"form-control\" id=\"storeTypeName\" formControlName=\"storeTypeName\"\n placeholder=\"Enter Mall name\" [disabled]=\"isModalBusy\" />\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\">\n <label for=\"address\" class=\"form-label mb-1\">Address</label>\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\"\n placeholder=\"Search and enter address\" ngx-gp-autocomplete (onAddressChange)=\"onAddressChange($event)\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"country\" class=\"form-label mb-1\">Country</label>\n <input type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\" placeholder=\"Enter Country\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"state\" class=\"form-label mb-1\">State</label>\n <input type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\" placeholder=\"Enter State\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"city\" class=\"form-label mb-1\">City / Town</label>\n <input type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\" placeholder=\"Enter City / Town\"\n [disabled]=\"isModalBusy\" />\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\">\n <label for=\"pincode\" class=\"form-label mb-1\">Pin / Zip Code</label>\n <input type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\"\n placeholder=\"Enter Pin / Zip Code\" [disabled]=\"isModalBusy\" />\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\">\n <label for=\"email\" class=\"form-label mb-1\">Spoc user email (optional)</label>\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\n placeholder=\"Enter spoc user email\" [disabled]=\"isModalBusy\" />\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 class=\"new-store-txt\">{{newStoreDetails?.storeName}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Floor</p>\r\n <h3 class=\"new-store-txt\">Floor {{this.selectedFloor}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Business type</p>\r\n <h3 class=\"new-store-txt\">{{newStoreDetails?.businessType | uppercase}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store type</p>\r\n <h3 class=\"new-store-txt\">{{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\">\n <lib-reactive-select [search]=\"true\" [(ngModel)]=\"selectedStore\" [idField]=\"'value'\" [nameField]=\"'label'\"\n [data]=\"storeList\" [label]=\"'Select store'\" [action]=\"true\" (actionClick)=\"addNewStore()\"\n [actionLabel]=\"'Create new store'\" (ngModelChange)=\"onStoreChange()\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\n <div class=\"col-6\">\n <lib-reactive-select [(ngModel)]=\"selectedFloor\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorList\"\n [label]=\"'Select floor'\" (ngModelChange)=\"onFloorChange()\" [disabled]=\"isModalBusy\">\n </lib-reactive-select>\n </div>\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 @if (isCadProcessing) {\r\n <div class=\"cad-loader-panel\">\r\n <!--\r\n <div #cadProcessingLottie class=\"cad-lottie\"></div>\r\n <p class=\"cad-loader-text mb-0\">Creating planogram from CAD...</p>\r\n -->\r\n <div class=\"cad-loader-content\">\r\n <svg class=\"cad-basic-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 <p class=\"cad-loader-text mb-0\">\r\n Building layout\r\n <span class=\"loading-dots\" aria-hidden=\"true\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"row\">\n <div [ngClass]=\"selectedFile ? 'col-12' :'col-6'\">\n <file-upload [disabled]=\"isModalBusy\" (fileChange)=\"onFileChange($event)\"></file-upload>\n </div>\n <div [ngClass]=\"selectedFile ? 'd-none' :'col-6'\"\n class=\"d-flex flex-column justify-content-center align-items-center gap-3\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M55.5008 34.375H51.3752L47.6258 38.1253H42.3752V34.375H31.1252V49.3753H27.3758C26.8785 49.3676 26.3846 49.4589 25.9229 49.6439C25.4612 49.8289 25.0409 50.1039 24.6864 50.4528C24.332 50.8018 24.0506 51.2178 23.8584 51.6766C23.6663 52.1353 23.5674 52.6278 23.5674 53.1251C23.5674 53.6225 23.6663 54.1149 23.8584 54.5737C24.0506 55.0325 24.332 55.4485 24.6864 55.7975C25.0409 56.1464 25.4612 56.4214 25.9229 56.6064C26.3846 56.7914 26.8785 56.8827 27.3758 56.875H55.5008C55.998 56.875 56.4748 56.6775 56.8264 56.3259C57.178 55.9743 57.3755 55.4975 57.3755 55.0003V36.2497C57.3755 35.7525 57.178 35.2757 56.8264 34.9241C56.4748 34.5725 55.998 34.375 55.5008 34.375ZM31.1252 28.75V49.3753H27.3758C26.3813 49.3753 25.4275 49.7703 24.7242 50.4734C24.0209 51.1765 23.6257 52.1302 23.6255 53.1247V32.5003C23.6255 31.5057 24.0206 30.5518 24.7239 29.8484C25.4272 29.1451 26.3811 28.75 27.3758 28.75H31.1252Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M31.1252 49.3753V34.375H42.3752V38.1253H47.6258L51.3752 34.375H55.5008C55.998 34.375 56.4748 34.5725 56.8264 34.9241C57.178 35.2757 57.3755 35.7525 57.3755 36.2497V55.0003C57.3755 55.4975 57.178 55.9743 56.8264 56.3259C56.4748 56.6775 55.998 56.875 55.5008 56.875H27.3758C26.8785 56.8827 26.3846 56.7914 25.9229 56.6064C25.4612 56.4214 25.0409 56.1464 24.6864 55.7975C24.332 55.4485 24.0506 55.0325 23.8584 54.5737C23.6663 54.1149 23.5674 53.6225 23.5674 53.1251C23.5674 52.6278 23.6663 52.1353 23.8584 51.6766C24.0506 51.2178 24.332 50.8018 24.6864 50.4528C25.0409 50.1039 25.4612 49.8289 25.9229 49.6439C26.3846 49.4589 26.8785 49.3676 27.3758 49.3753M31.1252 49.3753H27.3758M31.1252 49.3753V28.75H27.3758C26.3811 28.75 25.4272 29.1451 24.7239 29.8484C24.0206 30.5518 23.6255 31.5057 23.6255 32.5003V53.1247C23.6257 52.1302 24.0209 51.1765 24.7242 50.4734C25.4275 49.7703 26.3813 49.3753 27.3758 49.3753\"\r\n stroke=\"#98A2B3\" stroke-width=\"0.84375\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M56.8317 26.293L54.2064 23.6686C53.856 23.3252 53.3849 23.1328 52.8942 23.1328C52.4035 23.1328 51.9324 23.3252 51.582 23.6686L42.375 32.8756V38.1253H47.6256L56.8317 28.9183C57.1751 28.5679 57.3675 28.0968 57.3675 27.6061C57.3675 27.1155 57.1751 26.6434 56.8317 26.293Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\n <div class=\"d-flex gap-1 align-items-center\">\n <input [(ngModel)]=\"isManual\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\" id=\"manual\"\n [disabled]=\"isModalBusy\">\n <label for=\"manual\">Create manually</label>\n </div>\n </div>\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"modal-actions\">\r\n @if(isCreateStoreMode){\n <button type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\" [disabled]=\"isModalBusy\">Back</button>\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid || isModalBusy\"\n (click)=\"onCreateStore()\">\n <span *ngIf=\"!isButtonLoading\">\n Next\n </span>\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 {\n <button *ngIf=\"newStoreDetails\" type=\"button\" class=\"btn btn-link me-auto\" (click)=\"onBack()\"\n [disabled]=\"isModalBusy\">Back</button>\n <button *ngIf=\"!newStoreDetails\" type=\"button\" class=\"btn btn-outline me-auto\" (click)=\"addNewStore()\"\n [disabled]=\"isModalBusy\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.66829 0.834961V12.5016M0.834961 6.66829H12.5016\" stroke=\"#344054\" stroke-width=\"1.67\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\r\n\n Create new store\n </button>\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isModalBusy\"\n (click)=\"onCreateLayoutPlano()\">\n <span *ngIf=\"!isButtonLoading || isCadProcessing\">\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading && !isCadProcessing\" 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>\r\n", styles: [".modal-wrapper{padding:24px;position:relative;min-height:220px}.modal-loader-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#ffffffb3;border-radius:12px!important;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.cad-loader-panel{border:2px dashed #d7dce1;border-radius:12px;min-height:190px;display:flex;justify-content:center;align-items:center;text-align:center;background:#fff;transition:all .2s ease}.cad-loader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding:24px}.cad-lottie{width:220px;height:220px}.cad-basic-spinner{width:44px;height:44px;animation:cad-spin .9s linear infinite}.cad-basic-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}.cad-loader-text{color:#344054;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}.loading-dots{display:inline-flex;min-width:18px;justify-content:flex-start}.loading-dots span{animation:cad-dot-pulse 1.2s infinite;opacity:.2}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}.modal-spinner{width:44px;height:44px;animation:modal-spin .9s linear infinite}.modal-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes modal-spin{to{transform:rotate(360deg)}}@keyframes cad-spin{to{transform:rotate(360deg)}}@keyframes cad-dot-pulse{0%,80%,to{opacity:.2}40%{opacity:1}}.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%}.new-store-txt{font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.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"] }]
|
|
54763
|
+
], template: "<div class=\"modal-wrapper\">\r\n <div *ngIf=\"isPopupLoading\" class=\"modal-loader-overlay\">\r\n <svg class=\"modal-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 </div>\r\n\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. eg: LKST1234\" [disabled]=\"isModalBusy\" />\r\n\r\n <ng-container *ngIf=\"createStoreForm.get('storeName')?.touched && createStoreForm.get('storeName')?.invalid\">\r\n\r\n @if(createStoreForm.get('storeName')?.hasError('exists')){\r\n <small class=\"text-danger\">\r\n Store already exists.\r\n </small>\r\n }@else {\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('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\r\n <small class=\"text-danger\" *ngIf=\"createStoreForm.get('storeName')?.hasError('invalidStoreName') \">\r\n Store name must be ST1234 or LKST1234 format.\r\n </small>\r\n }\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\" [disabled]=\"isModalBusy\">\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\" [disabled]=\"isModalBusy\">\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\" [disabled]=\"isModalBusy\">\r\n </lib-reactive-select>\r\n </div>\r\n\r\n @if(createStoreForm.get('storeType')?.value == 'Mall Store'){\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\" [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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 [disabled]=\"isModalBusy\" />\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\" [disabled]=\"isModalBusy\" />\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 (optional)</label>\r\n <input type=\"text\" class=\"form-control\" id=\"email\" formControlName=\"email\"\r\n placeholder=\"Enter spoc user email\" [disabled]=\"isModalBusy\" />\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 class=\"new-store-txt\">{{newStoreDetails?.storeName}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Floor</p>\r\n <h3 class=\"new-store-txt\">Floor {{this.selectedFloor}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Business type</p>\r\n <h3 class=\"new-store-txt\">{{newStoreDetails?.businessType | uppercase}}</h3>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-2\">Store type</p>\r\n <h3 class=\"new-store-txt\">{{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]=\"isModalBusy\">\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]=\"isModalBusy\">\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 @if (isCadProcessing) {\r\n <div class=\"cad-loader-panel\">\r\n <!--\r\n <div #cadProcessingLottie class=\"cad-lottie\"></div>\r\n <p class=\"cad-loader-text mb-0\">Creating planogram from CAD...</p>\r\n -->\r\n <div class=\"cad-loader-content\">\r\n <svg class=\"cad-basic-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 <p class=\"cad-loader-text mb-0\">\r\n Building layout\r\n <span class=\"loading-dots\" aria-hidden=\"true\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"row\">\r\n <div [ngClass]=\"selectedFile ? 'col-12' :'col-6'\">\r\n <file-upload [disabled]=\"isModalBusy\" (fileChange)=\"onFileChange($event)\"></file-upload>\r\n </div>\r\n <div [ngClass]=\"selectedFile ? 'd-none' :'col-6'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center gap-3\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M55.5008 34.375H51.3752L47.6258 38.1253H42.3752V34.375H31.1252V49.3753H27.3758C26.8785 49.3676 26.3846 49.4589 25.9229 49.6439C25.4612 49.8289 25.0409 50.1039 24.6864 50.4528C24.332 50.8018 24.0506 51.2178 23.8584 51.6766C23.6663 52.1353 23.5674 52.6278 23.5674 53.1251C23.5674 53.6225 23.6663 54.1149 23.8584 54.5737C24.0506 55.0325 24.332 55.4485 24.6864 55.7975C25.0409 56.1464 25.4612 56.4214 25.9229 56.6064C26.3846 56.7914 26.8785 56.8827 27.3758 56.875H55.5008C55.998 56.875 56.4748 56.6775 56.8264 56.3259C57.178 55.9743 57.3755 55.4975 57.3755 55.0003V36.2497C57.3755 35.7525 57.178 35.2757 56.8264 34.9241C56.4748 34.5725 55.998 34.375 55.5008 34.375ZM31.1252 28.75V49.3753H27.3758C26.3813 49.3753 25.4275 49.7703 24.7242 50.4734C24.0209 51.1765 23.6257 52.1302 23.6255 53.1247V32.5003C23.6255 31.5057 24.0206 30.5518 24.7239 29.8484C25.4272 29.1451 26.3811 28.75 27.3758 28.75H31.1252Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M31.1252 49.3753V34.375H42.3752V38.1253H47.6258L51.3752 34.375H55.5008C55.998 34.375 56.4748 34.5725 56.8264 34.9241C57.178 35.2757 57.3755 35.7525 57.3755 36.2497V55.0003C57.3755 55.4975 57.178 55.9743 56.8264 56.3259C56.4748 56.6775 55.998 56.875 55.5008 56.875H27.3758C26.8785 56.8827 26.3846 56.7914 25.9229 56.6064C25.4612 56.4214 25.0409 56.1464 24.6864 55.7975C24.332 55.4485 24.0506 55.0325 23.8584 54.5737C23.6663 54.1149 23.5674 53.6225 23.5674 53.1251C23.5674 52.6278 23.6663 52.1353 23.8584 51.6766C24.0506 51.2178 24.332 50.8018 24.6864 50.4528C25.0409 50.1039 25.4612 49.8289 25.9229 49.6439C26.3846 49.4589 26.8785 49.3676 27.3758 49.3753M31.1252 49.3753H27.3758M31.1252 49.3753V28.75H27.3758C26.3811 28.75 25.4272 29.1451 24.7239 29.8484C24.0206 30.5518 23.6255 31.5057 23.6255 32.5003V53.1247C23.6257 52.1302 24.0209 51.1765 24.7242 50.4734C25.4275 49.7703 26.3813 49.3753 27.3758 49.3753\"\r\n stroke=\"#98A2B3\" stroke-width=\"0.84375\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M56.8317 26.293L54.2064 23.6686C53.856 23.3252 53.3849 23.1328 52.8942 23.1328C52.4035 23.1328 51.9324 23.3252 51.582 23.6686L42.375 32.8756V38.1253H47.6256L56.8317 28.9183C57.1751 28.5679 57.3675 28.0968 57.3675 27.6061C57.3675 27.1155 57.1751 26.6434 56.8317 26.293Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n <div class=\"d-flex gap-1 align-items-center\">\r\n <input [(ngModel)]=\"isManual\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\" id=\"manual\"\r\n [disabled]=\"isModalBusy\">\r\n <label for=\"manual\">Create manually</label>\r\n </div>\r\n </div>\r\n </div>\r\n }\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()\" [disabled]=\"isModalBusy\">Back</button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"createStoreForm.invalid || isModalBusy\"\r\n (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()\"\r\n [disabled]=\"isModalBusy\">Back</button>\r\n <button *ngIf=\"!newStoreDetails\" type=\"button\" class=\"btn btn-outline me-auto\" (click)=\"addNewStore()\"\r\n [disabled]=\"isModalBusy\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.66829 0.834961V12.5016M0.834961 6.66829H12.5016\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n Create new store\r\n </button>\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"onCancel()\" [disabled]=\"isModalBusy\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary \" [disabled]=\"!isValidToCreatePlano || isModalBusy\"\r\n (click)=\"onCreateLayoutPlano()\">\r\n <span *ngIf=\"!isButtonLoading || isCadProcessing\">\r\n {{isLayoutExist ? 'Overwrite' : 'Create'}}\r\n </span>\r\n\r\n <svg *ngIf=\"isButtonLoading && !isCadProcessing\" 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>\r\n", styles: [".modal-wrapper{padding:24px;position:relative;min-height:220px}.modal-loader-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#ffffffb3;border-radius:12px!important;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.cad-loader-panel{border:2px dashed #d7dce1;border-radius:12px;min-height:190px;display:flex;justify-content:center;align-items:center;text-align:center;background:#fff;transition:all .2s ease}.cad-loader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding:24px}.cad-lottie{width:220px;height:220px}.cad-basic-spinner{width:44px;height:44px;animation:cad-spin .9s linear infinite}.cad-basic-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}.cad-loader-text{color:#344054;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}.loading-dots{display:inline-flex;min-width:18px;justify-content:flex-start}.loading-dots span{animation:cad-dot-pulse 1.2s infinite;opacity:.2}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}.modal-spinner{width:44px;height:44px;animation:modal-spin .9s linear infinite}.modal-spinner .path{stroke:#344054;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes modal-spin{to{transform:rotate(360deg)}}@keyframes cad-spin{to{transform:rotate(360deg)}}@keyframes cad-dot-pulse{0%,80%,to{opacity:.2}40%{opacity:1}}.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%}.new-store-txt{font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%;color:#101828}.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"] }]
|
|
54702
54764
|
}], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: StoreBuilderService }, { type: i4.ToastService }, { type: i1$2.FormBuilder }], propDecorators: { clientId: [{
|
|
54703
54765
|
type: Input
|
|
54704
54766
|
}], cadProcessingLottieRef: [{
|
|
@@ -55359,6 +55421,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
55359
55421
|
type: Input
|
|
55360
55422
|
}] } });
|
|
55361
55423
|
|
|
55424
|
+
class FixturePreviewComponent {
|
|
55425
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixturePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55426
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FixturePreviewComponent, isStandalone: true, selector: "fixture-preview", ngImport: i0, template: "<p>fixture-preview works!</p>\r\n", styles: [""] });
|
|
55427
|
+
}
|
|
55428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixturePreviewComponent, decorators: [{
|
|
55429
|
+
type: Component,
|
|
55430
|
+
args: [{ selector: "fixture-preview", standalone: true, template: "<p>fixture-preview works!</p>\r\n" }]
|
|
55431
|
+
}] });
|
|
55432
|
+
|
|
55362
55433
|
class OnboardFixtureComponent {
|
|
55363
55434
|
fixtureData;
|
|
55364
55435
|
isAllocationRun = false;
|
|
@@ -55368,17 +55439,18 @@ class OnboardFixtureComponent {
|
|
|
55368
55439
|
if (changes["fixtureData"]?.currentValue) {
|
|
55369
55440
|
this.fixtureData.actualShelves =
|
|
55370
55441
|
this.fixtureData.shelfConfig?.filter((s) => s.shelfType != "vmonly") ?? [];
|
|
55442
|
+
console.log("@@ ~ this.fixtureData:", this.fixtureData);
|
|
55371
55443
|
}
|
|
55372
55444
|
}
|
|
55373
55445
|
onClickClose() {
|
|
55374
55446
|
this.onClose.emit("");
|
|
55375
55447
|
}
|
|
55376
55448
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardFixtureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardFixtureComponent, isStandalone: true, selector: "onboard-fixture", inputs: { fixtureData: "fixtureData", isAllocationRun: "isAllocationRun", allFixtures: "allFixtures" }, outputs: { onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"], dependencies: [{ kind: "component", type: IvmLogicExplorerComponent, selector: "ivm-logic-explorer", inputs: ["fixtures", "selectedFixture"] }] });
|
|
55449
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardFixtureComponent, isStandalone: true, selector: "onboard-fixture", inputs: { fixtureData: "fixtureData", isAllocationRun: "isAllocationRun", allFixtures: "allFixtures" }, outputs: { onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n @if(isAllocationRun){\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n <!-- <fixture-preview></fixture-preview> -->\r\n }\r\n\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n }@else {\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n\r\n\r\n }\r\n\r\n\r\n <!-- @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n } -->\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"], dependencies: [{ kind: "component", type: IvmLogicExplorerComponent, selector: "ivm-logic-explorer", inputs: ["fixtures", "selectedFixture"] }] });
|
|
55378
55450
|
}
|
|
55379
55451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardFixtureComponent, decorators: [{
|
|
55380
55452
|
type: Component,
|
|
55381
|
-
args: [{ selector: "onboard-fixture", standalone: true, imports: [IvmLogicExplorerComponent], template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"] }]
|
|
55453
|
+
args: [{ selector: "onboard-fixture", standalone: true, imports: [IvmLogicExplorerComponent, FixturePreviewComponent], template: "<section id=\"onboard-fixture\" #onboardFixture>\r\n\r\n <svg (click)=\"onClickClose()\" class=\"close-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n @if(isAllocationRun){\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n <!-- <fixture-preview></fixture-preview> -->\r\n }\r\n\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n }@else {\r\n @if(fixtureData){\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n\r\n\r\n }\r\n\r\n\r\n <!-- @if(fixtureData){\r\n\r\n <div id=\"basic-details\" class=\"d-flex flex-column align-items-center justify-content-center gap-2 my-5\">\r\n <h2>{{fixtureData?.header?.label}}</h2>\r\n\r\n <div class=\"d-flex gap-3 align-items-center justify-content-center\">\r\n <p>{{fixtureData?.fixtureCategory}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.fixtureWidth?.value}} {{fixtureData?.fixtureWidth?.unit}}</p>\r\n <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#D0D5DD\" />\r\n </svg>\r\n <p>{{fixtureData?.actualShelves?.length}} Shelves</p>\r\n </div>\r\n </div>\r\n\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"fixtureData\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n }@else {\r\n @if(isAllocationRun) {\r\n <ivm-logic-explorer [fixtures]=\"allFixtures\" [selectedFixture]=\"null\"></ivm-logic-explorer>\r\n } @else {\r\n <div class=\"info-container mt-5\">\r\n <svg width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"6.66699\" y=\"6.6665\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <path\r\n d=\"M48.334 50C42.734 50 40.9007 52.25 40.3007 53.7333C42.084 54.5 43.334 56.2667 43.334 58.3333C43.334 59.6594 42.8072 60.9312 41.8695 61.8689C40.9319 62.8065 39.6601 63.3333 38.334 63.3333C37.0079 63.3333 35.7362 62.8065 34.7985 61.8689C33.8608 60.9312 33.334 59.6594 33.334 58.3333C33.334 56.15 34.7173 54.3 36.6673 53.6167V39.7167C35.6907 39.374 34.845 38.7357 34.2477 37.8905C33.6504 37.0452 33.331 36.035 33.334 35C33.334 33.6739 33.8608 32.4021 34.7985 31.4645C35.7362 30.5268 37.0079 30 38.334 30C39.6601 30 40.9319 30.5268 41.8695 31.4645C42.8072 32.4021 43.334 33.6739 43.334 35C43.334 37.1833 41.9507 39.0333 40.0007 39.7167V48.5333C41.4673 47.45 43.6007 46.6667 46.6673 46.6667C51.1173 46.6667 52.6007 44.4333 53.084 42.95C52.1722 42.5701 51.393 41.9292 50.8444 41.1078C50.2958 40.2864 50.0023 39.3211 50.0007 38.3333C50.0007 37.0073 50.5275 35.7355 51.4651 34.7978C52.4028 33.8601 53.6746 33.3333 55.0007 33.3333C56.3268 33.3333 57.5985 33.8601 58.5362 34.7978C59.4739 35.7355 60.0007 37.0073 60.0007 38.3333C60.0007 40.5667 58.534 42.5 56.5173 43.1C56.084 45.4833 54.4673 50 48.334 50ZM38.334 56.6667C37.892 56.6667 37.4681 56.8423 37.1555 57.1548C36.8429 57.4674 36.6673 57.8913 36.6673 58.3333C36.6673 58.7754 36.8429 59.1993 37.1555 59.5118C37.4681 59.8244 37.892 60 38.334 60C38.776 60 39.2 59.8244 39.5125 59.5118C39.8251 59.1993 40.0007 58.7754 40.0007 58.3333C40.0007 57.8913 39.8251 57.4674 39.5125 57.1548C39.2 56.8423 38.776 56.6667 38.334 56.6667ZM38.334 33.3333C37.892 33.3333 37.4681 33.5089 37.1555 33.8215C36.8429 34.134 36.6673 34.558 36.6673 35C36.6673 35.442 36.8429 35.866 37.1555 36.1785C37.4681 36.4911 37.892 36.6667 38.334 36.6667C38.776 36.6667 39.2 36.4911 39.5125 36.1785C39.8251 35.866 40.0007 35.442 40.0007 35C40.0007 34.558 39.8251 34.134 39.5125 33.8215C39.2 33.5089 38.776 33.3333 38.334 33.3333ZM55.0007 36.6667C54.5586 36.6667 54.1347 36.8423 53.8222 37.1548C53.5096 37.4674 53.334 37.8913 53.334 38.3333C53.334 38.7754 53.5096 39.1993 53.8222 39.5118C54.1347 39.8244 54.5586 40 55.0007 40C55.4427 40 55.8666 39.8244 56.1792 39.5118C56.4917 39.1993 56.6673 38.7754 56.6673 38.3333C56.6673 37.8913 56.4917 37.4674 56.1792 37.1548C55.8666 36.8423 55.4427 36.6667 55.0007 36.6667Z\"\r\n fill=\"#33B5FF\" />\r\n </svg>\r\n\r\n <h2>Allocation Pending</h2>\r\n <p>Preview will be available once the allocations are done</p>\r\n </div>\r\n }\r\n } -->\r\n</section>", styles: ["#onboard-fixture .close-icon{cursor:pointer;margin:10px;right:0;top:0;position:absolute}#onboard-fixture #basic-details h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%}#onboard-fixture #basic-details p{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}#onboard-fixture .info-container{background:#f9fafb;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:16px;min-height:300px}#onboard-fixture .info-container h2{margin:0;color:#1d2939;font-weight:600;font-size:16px;line-height:28px;letter-spacing:0%}#onboard-fixture .info-container p{margin:0;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}\n"] }]
|
|
55382
55454
|
}], propDecorators: { fixtureData: [{
|
|
55383
55455
|
type: Input
|
|
55384
55456
|
}], isAllocationRun: [{
|
|
@@ -57193,14 +57265,12 @@ class OnboardStorePlanoComponent {
|
|
|
57193
57265
|
}
|
|
57194
57266
|
fixtureGroup.on("mousedown", (event) => {
|
|
57195
57267
|
const target = event.target;
|
|
57196
|
-
if (
|
|
57197
|
-
|
|
57198
|
-
this.togglePanel("right", false);
|
|
57199
|
-
}
|
|
57200
|
-
this.highlightFixture(target);
|
|
57201
|
-
this.selectFixtureOnCanvasClick(target, true);
|
|
57202
|
-
this.selectedFixtureData = fixtureData;
|
|
57268
|
+
if (this.layoutForm.disabled) {
|
|
57269
|
+
this.togglePanel("right", false);
|
|
57203
57270
|
}
|
|
57271
|
+
this.highlightFixture(target);
|
|
57272
|
+
this.selectFixtureOnCanvasClick(target, true);
|
|
57273
|
+
this.selectedFixtureData = fixtureData;
|
|
57204
57274
|
});
|
|
57205
57275
|
fixtureGroup.fixtureType = fixtureData.fixtureType;
|
|
57206
57276
|
fixtureGroup.wallIndex = fixtureData.associatedElementNumber;
|
|
@@ -58791,6 +58861,7 @@ class OnboardStorePlanoComponent {
|
|
|
58791
58861
|
this.isAllocationRun = true;
|
|
58792
58862
|
this.disableEdit = true;
|
|
58793
58863
|
this.extractAllFixtures(this.floorData);
|
|
58864
|
+
this.selectedFixtureData = null;
|
|
58794
58865
|
this.renderFloor(false);
|
|
58795
58866
|
this.togglePanel("left", true);
|
|
58796
58867
|
this.togglePanel("right", false);
|