tango-app-ui-store-builder 1.0.99 → 1.2.1

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.
Files changed (36) hide show
  1. package/esm2022/lib/components/create-layout/create-layout.component.mjs +1 -1
  2. package/esm2022/lib/components/create-store/create-store.component.mjs +1 -1
  3. package/esm2022/lib/components/custom-select/custom-select.component.mjs +6 -3
  4. package/esm2022/lib/components/fixture-template/template-products/template-products.component.mjs +1 -1
  5. package/esm2022/lib/components/layout-summary/layout-summary.component.mjs +1 -1
  6. package/esm2022/lib/components/manage-plano/verification-table/verification-table.component.mjs +10 -2
  7. package/esm2022/lib/components/manage-store-plano/manage-store-plano.component.mjs +38 -7
  8. package/esm2022/lib/components/manage-store-plano/plano-rollout/plano-rollout.component.mjs +1 -1
  9. package/esm2022/lib/components/manage-store-plano/template-products/template-products.component.mjs +2 -2
  10. package/esm2022/lib/components/manage-store-plano/verification-feedback/action-confirm-popup/action-confirm-popup.component.mjs +11 -1
  11. package/esm2022/lib/components/manage-store-plano/verification-feedback/fixture/fixture.component.mjs +1 -1
  12. package/esm2022/lib/components/manage-store-plano/verification-feedback/verification-feedback.component.mjs +2 -2
  13. package/esm2022/lib/components/manage-store-plano/verification-feedback/zone-editable-fixture/zone-editable-fixture.component.mjs +628 -0
  14. package/esm2022/lib/components/manage-store-plano/zone-verification-feedback/zone-verification-feedback.component.mjs +24 -12
  15. package/esm2022/lib/components/multiselect-chip-dropdown/multiselect-chip-dropdown.component.mjs +34 -8
  16. package/esm2022/lib/components/onboard-store-plano/create-planogram/create-planogram.component.mjs +19 -7
  17. package/esm2022/lib/components/onboard-store-plano/onboard-store-plano.component.mjs +2 -2
  18. package/esm2022/lib/components/planogram/plano-details-parent/plano-details-parent.component.mjs +1 -1
  19. package/esm2022/lib/services/store-builder.service.mjs +10 -2
  20. package/esm2022/lib/tango-store-builder.module.mjs +8 -1
  21. package/fesm2022/tango-app-ui-store-builder.mjs +770 -41
  22. package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
  23. package/lib/components/custom-select/custom-select.component.d.ts +2 -1
  24. package/lib/components/manage-plano/onboard-table/onboard-table.component.d.ts +1 -1
  25. package/lib/components/manage-plano/rollout-table/rollout-table.component.d.ts +4 -4
  26. package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +5 -5
  27. package/lib/components/manage-store-plano/manage-store-plano.component.d.ts +1 -0
  28. package/lib/components/manage-store-plano/verification-feedback/action-confirm-popup/action-confirm-popup.component.d.ts +1 -1
  29. package/lib/components/manage-store-plano/verification-feedback/zone-editable-fixture/zone-editable-fixture.component.d.ts +89 -0
  30. package/lib/components/manage-store-plano/zone-verification-feedback/zone-verification-feedback.component.d.ts +4 -1
  31. package/lib/components/multiselect-chip-dropdown/multiselect-chip-dropdown.component.d.ts +9 -2
  32. package/lib/components/onboard-store-plano/create-planogram/create-planogram.component.d.ts +1 -0
  33. package/lib/components/onboard-store-plano/onboard-store-plano.component.d.ts +1 -1
  34. package/lib/services/store-builder.service.d.ts +5 -3
  35. package/lib/tango-store-builder.module.d.ts +68 -66
  36. package/package.json +1 -1
package/esm2022/lib/components/create-layout/create-layout.component.mjs CHANGED
@@ -1787,7 +1787,7 @@ export class CreateLayoutComponent {
1787
1787
  XLSX.writeFile(workbook, fileName);
1788
1788
  }
1789
1789
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.ActivatedRoute }, { token: i2.StoreBuilderService }, { token: i1.Router }, { token: i3.NgbOffcanvas }, { token: i4.ToastService }, { token: i3.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
1790
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreateLayoutComponent, selector: "lib-create-layout", host: { listeners: { "wheel": "onMouseWheel($event)", "document:click": "onOutsideClick($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["gridCanvas"], descendants: true, static: true }, { propertyName: "widgetCanvasRef", first: true, predicate: ["widgetCanvas"], descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "circleRef", first: true, predicate: ["circle"], descendants: true }, { propertyName: "pointerRef", first: true, predicate: ["pointer"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mb-6\">\r\n <div>\r\n <div *ngIf=\"planoStoreList.length === 1\" class=\"storename-txt\">\r\n {{selectedStore?.storeName}} - Layout\r\n </div>\r\n <div *ngIf=\"planoStoreList.length > 1\">\r\n <lib-select-plano [items]=\"planoStoreList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center\">\r\n <button (click)=\"onSaveAsDraft()\" class=\"btn btn-outline bg-white me-5\">Save As Draft</button>\r\n <button (click)=\"onConfigure()\" class=\"btn btn-sm btn-primary me-5\">Configure</button>\r\n <button (click)=\"openOffCanva()\" class=\"btn btn-sm btn-outline bg-white\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 3V21M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n <div [ngClass]=\"layoutMode === 'full' ? 'col-2' : 'col-5'\">\r\n <div class=\"c-card\" style=\"height: 75dvh; position: relative;\">\r\n <div class=\"resize-icon\" *ngIf=\"layoutMode === 'half'\" (click)=\"layoutMode = 'full'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27259 12.6365L4.63623 9.00013L8.27259 5.36377M13.3635 12.6365L9.72714 9.00013L13.3635 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div class=\"resize-icon\" *ngIf=\"layoutMode === 'full'\" (click)=\"layoutMode = 'half'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72741 5.36399L13.3638 9.00036L9.72741 12.6367M4.6365 5.36399L8.27286 9.00036L4.6365 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 class=\"d-flex align-items-center justify-content-between mb-5\" style=\"height: 8%;\">\r\n <div>\r\n <div class=\"l-pane-head\">\r\n Layout details\r\n </div>\r\n <div *ngIf=\"layoutMode === 'half'\" class=\"l-pane-desc\">\r\n Below are the sequence of steps for this layout\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <ng-container *ngIf=\"layoutMode === 'half'\">\r\n <svg (click)=\"undo()\" class=\"me-3 cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [attr.fill]=\"undoStack.length ? '#1D2939' : '#D0D5DD'\"\r\n d=\"M7 19V17H14.1C15.15 17 16.0627 16.6667 16.838 16C17.6133 15.3333 18.0007 14.5 18 13.5C18 12.5 17.6123 11.6667 16.837 11C16.0617 10.3333 15.1493 10 14.1 10H7.8L10.4 12.6L9 14L4 9L9 4L10.4 5.4L7.8 8H14.1C15.7167 8 17.1043 8.525 18.263 9.575C19.4217 10.625 20.0007 11.9333 20 13.5C20 15.0667 19.4207 16.375 18.262 17.425C17.1033 18.475 15.716 19 14.1 19H7Z\"\r\n fill=\"#D0D5DD\" />\r\n </svg>\r\n <svg (click)=\"redo()\" class=\"me-6 cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [attr.fill]=\"redoStack.length ? '#1D2939' : '#D0D5DD'\"\r\n d=\"M9.9 19C8.28333 19 6.89567 18.475 5.737 17.425C4.57833 16.375 3.99933 15.0667 4 13.5C4 11.9333 4.57933 10.625 5.738 9.575C6.89667 8.525 8.284 8 9.9 8H16.2L13.6 5.4L15 4L20 9L15 14L13.6 12.6L16.2 10H9.9C8.85 10 7.93733 10.3333 7.162 11C6.38667 11.6667 5.99933 12.5 6 13.5C6 14.5 6.38767 15.3333 7.163 16C7.93833 16.6667 8.85067 17 9.9 17H17V19H9.9Z\"\r\n fill=\"#D0D5DD\" />\r\n </svg>\r\n <div (click)=\"toggleLayoutOptionSelect()\"\r\n class=\"d-flex align-items-center justify-content-center h-100 elipsis-icon-dropdown top-elipsis-menu\">\r\n <div class=\"elipsis-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11 11.9997C11 12.5289 11.4477 12.958 12 12.958C12.5523 12.958 13 12.5289 13 11.9997C13 11.4704 12.5523 11.0413 12 11.0413C11.4477 11.0413 11 11.4704 11 11.9997Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 18.708C11 19.2373 11.4477 19.6663 12 19.6663C12.5523 19.6663 13 19.2373 13 18.708C13 18.1787 12.5523 17.7497 12 17.7497C11.4477 17.7497 11 18.1787 11 18.708Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 5.29134C11 5.82061 11.4477 6.24967 12 6.24967C12.5523 6.24967 13 5.82061 13 5.29134C13 4.76207 12.5523 4.33301 12 4.33301C11.4477 4.33301 11 4.76207 11 5.29134Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <ul *ngIf=\"layoutOptionSelect?.show\" [ngClass]=\" (layoutOptionSelect.show ) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li>\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"menu-txt1\">Export</div>\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\">\r\n <path d=\"M1 13L7 7L1 1\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"export-options\">\r\n <ul>\r\n <li (click)=\"exportToExcel()\" >XLSX</li>\r\n <li (click)=\"exportAsPng()\" >PNG</li>\r\n </ul>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onClearAll()\">\r\n <div class=\"d-flex\">\r\n <div class=\"menu-txt1\">Clear all</div>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onDeleteLayout()\">\r\n <div class=\"d-flex\">\r\n <div class=\"menu-txt1 text-danger\">Delete</div>\r\n </div>\r\n </li>\r\n\r\n </ul>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- <div class=\"d-flex align-items-center flex-column mx-auto\" style=\"margin-top: 200px;\" >\r\n <div class=\"no-steps-txt mb-3\">\r\n No steps have been created so far\r\n </div>\r\n <div class=\"no-text-desc text-center\">\r\n Start designing the layout by applying the steps using elements and dimensions.\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"table-responsive hide-scrollbar \" style=\"height: 92%;\">\r\n <table class=\"table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th>Steps</th>\r\n <th>Elements and Definition</th>\r\n <th>Feet</th>\r\n <th>Direction</th>\r\n <th>Degree</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let item of layoutPolygon; let i = index\">\r\n <tr [ngClass]=\"selectedLineIndex === i ? 'selected-element' : ''\" *ngIf=\"item?.[2]\" cdkDrag>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100 drag-handler\">\r\n <span class=\"mr-2 \" >\r\n <svg class=\"cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\">\r\n <circle cx=\"5\" cy=\"5\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"14\" cy=\"5\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"5\" cy=\"10\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"14\" cy=\"10\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"5\" cy=\"15\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"14\" cy=\"15\" r=\"2\" fill=\"gray\" />\r\n </svg>\r\n </span>\r\n <span>{{ i + 1}}</span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div (click)=\"toggleElementSelect(i)\"\r\n class=\"element-type-dropdown me-2 position-relative\">\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'wall'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"item[2].elementType === 'facade'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"item[2].elementType === 'opening'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"item[2].elementType === 'entrance'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"18\"\r\n viewBox=\"0 0 21 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"down-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <ul *ngIf=\"elementSelect?.show && elementSelect?.index === i\"\r\n [ngClass]=\" (elementSelect.show && elementSelect.index === i) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"onElementTypeChange('wall', i)\"\r\n [ngClass]=\"item[2].elementType === 'wall' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n </div>\r\n <div>Wall</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'wall'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onElementTypeChange('facade', i)\"\r\n [ngClass]=\"item[2].elementType === 'facade' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\"\r\n height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Glass/Facade</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'facade'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onElementTypeChange('opening', i)\"\r\n [ngClass]=\"item[2].elementType === 'opening' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Opening</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'opening'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onElementTypeChange('entrance', i)\"\r\n [ngClass]=\"item[2].elementType === 'entrance' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"18\" viewBox=\"0 0 21 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n </div>\r\n <div>Entrance</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'entrance'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"element-name\">{{item[2].elementType}} {{item[2].elementNumber}}\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"unit-input\">\r\n <svg (click)=\"onDistanceChange('decrement', i)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M2.9165 7H11.0832\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>{{item[2].distance}}</span>\r\n <svg (click)=\"onDistanceChange('increment', i)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M6.99984 2.9165V11.0832M2.9165 6.99984H11.0832\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </td>\r\n <td>\r\n <div (click)=\"toggleDirectionSelect(i)\"\r\n class=\"direction-dropdown position-relative\">\r\n <div>\r\n {{item[2].direction}}\r\n </div>\r\n\r\n <div class=\"down-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <ul *ngIf=\"directionSelect?.show && directionSelect?.index === i\"\r\n [ngClass]=\" (directionSelect.show && directionSelect.index === i) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"onDirectionChange('up', i)\"\r\n [ngClass]=\"item[2].direction === 'up' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div>Up</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'up'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onDirectionChange('down', i)\"\r\n [ngClass]=\"item[2].direction === 'down' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n\r\n <div>Down</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'down'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onDirectionChange('right', i)\"\r\n [ngClass]=\"item[2].direction === 'right' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n\r\n <div>Right</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onDirectionChange('left', i)\"\r\n [ngClass]=\"item[2].direction === 'left' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n\r\n <div>Left</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'left'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <input min=\"0\" max=\"180\" class=\"angle-input\" [(ngModel)]=\"item[2].angle\"\r\n type=\"number\" (input)=\"validateAngleInput($event, i)\" (blur)=\"onAngleChange(i)\">\r\n <!-- <span class=\"angle-input\">\r\n {{item[2].angle}}\u00B0\r\n </span> -->\r\n </td>\r\n <td>\r\n <div (click)=\"toggleLineOptionsSelect(i)\"\r\n class=\"d-flex align-items-center justify-content-center h-100 elipsis-icon-dropdown\">\r\n <svg class=\"cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"4\"\r\n height=\"19\" viewBox=\"0 0 4 19\" fill=\"none\">\r\n <path\r\n d=\"M1 9.50016C1 10.0294 1.44771 10.4585 2 10.4585C2.55228 10.4585 3 10.0294 3 9.50016C3 8.97089 2.55228 8.54183 2 8.54183C1.44771 8.54183 1 8.97089 1 9.50016Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M0.999999 16.2085C0.999999 16.7378 1.44771 17.1668 2 17.1668C2.55228 17.1668 3 16.7378 3 16.2085C3 15.6792 2.55228 15.2502 2 15.2502C1.44771 15.2502 0.999999 15.6792 0.999999 16.2085Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M1 2.79183C1 3.3211 1.44772 3.75016 2 3.75016C2.55228 3.75016 3 3.3211 3 2.79183C3 2.26256 2.55228 1.8335 2 1.8335C1.44772 1.8335 1 2.26256 1 2.79183Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <ul *ngIf=\"lineOptionsSelect?.show && lineOptionsSelect?.index === i\"\r\n [ngClass]=\" (lineOptionsSelect.show && lineOptionsSelect.index === i) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"onAddStep(i)\">\r\n <div class=\"d-flex\">\r\n <div>Add new step</div>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onDuplicateStep(i)\">\r\n <div class=\"d-flex\">\r\n <div>Duplicate</div>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onLineDelete(i)\">\r\n <div class=\"d-flex\">\r\n <div class=\"text-danger\">Delete</div>\r\n </div>\r\n\r\n </li>\r\n\r\n </ul>\r\n </div>\r\n\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"layoutMode === 'full' ? 'col-10' : 'col-7'\">\r\n <div class=\"c-card \" style=\"height: 75dvh;\">\r\n <div style=\"height: 7%;\" class=\"d-flex align-items-center justify-content-between\">\r\n <div>\r\n <!-- <lib-reactive-select *ngIf=\"floorsInput.value\" [formControl]=\"floorsInput\" [idField]=\"'id'\"\r\n [nameField]=\"'floorName'\" [data]=\"selectedStore?.floor\"></lib-reactive-select> -->\r\n <div (click)=\"toggleFloorSelect()\" class=\"floor-select\">\r\n <div>{{selectedFloor?.floorName}}</div>\r\n <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <ul *ngIf=\"floorSelect?.show\" class=\"list-unstyled mb-2\">\r\n <li (click)=\"onFloorSelect(floor._id)\"\r\n *ngFor=\"let floor of selectedStore?.floors; let i = index\"\r\n [ngClass]=\"floor._id === selectedFloor._id ? 'selected': ''\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span>{{floor?.floorName}}</span>\r\n <span *ngIf=\"selectedStore?.floors.length > 1\"\r\n (click)=\"$event.stopPropagation(); floorSelect.deleteIndex = i\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"23\"\r\n viewBox=\"0 0 24 23\" fill=\"none\">\r\n <path\r\n d=\"M11 11.4999C11 12.0292 11.4477 12.4583 12 12.4583C12.5523 12.4583 13 12.0292 13 11.4999C13 10.9706 12.5523 10.5416 12 10.5416C11.4477 10.5416 11 10.9706 11 11.4999Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 18.2083C11 18.7375 11.4477 19.1666 12 19.1666C12.5523 19.1666 13 18.7375 13 18.2083C13 17.679 12.5523 17.2499 12 17.2499C11.4477 17.2499 11 17.679 11 18.2083Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 4.79159C11 5.32086 11.4477 5.74992 12 5.74992C12.5523 5.74992 13 5.32086 13 4.79159C13 4.26231 12.5523 3.83325 12 3.83325C11.4477 3.83325 11 4.26231 11 4.79159Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"floorSelect.deleteIndex === i\"\r\n (click)=\"$event.stopPropagation(); deleteFloor(i)\" class=\"option\">Delete</div>\r\n </li>\r\n <li (click)=\"openAddFloorModal()\">\r\n <span>\r\n <span class=\"mr-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33325V12.6666M3.3335 7.99992H12.6668\" stroke=\"#101828\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span>Add floor</span>\r\n </span>\r\n\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" >\r\n <button ngbTooltip=\"Re-Orient\" (click)=\"findPolygonCenterAndScroll()\" class=\"btn btn-sm btn-outline bg-white me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" fill=\"none\" viewBox=\"0 0 128 128\" id=\"recenter\">\r\n <path stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"7\" d=\"M38 74L49 63.5 38 53M53.5 37.5L64 48.5 74.5 37.5M90 53L79 63.5 90 74M74.5 89.5L64 78.5 53.5 89.5\"></path>\r\n <path stroke=\"#000\" stroke-linecap=\"round\" stroke-width=\"7\" d=\"M44 64L16 64M63.5 43.5L63.5 15.5M84 63L112 63M64.5 83.5L64.5 111.5\"></path>\r\n <circle cx=\"64\" cy=\"64\" r=\"5\" fill=\"#000\"></circle>\r\n </svg>\r\n </button>\r\n <button ngbTooltip=\"Rotate\" class=\"btn btn-sm btn-outline bg-white\" (click)=\"rotatePolygons()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17838L7.17625 6.36238L5.90425 5.09158L5.08945 5.90518L6.36265 7.17838ZM15.671 6.36358L19.6379 10.3304L20.9099 9.0572L16.9442 5.09038L15.671 6.36358ZM19.6379 18.8252L18.8243 19.6388L20.0963 20.9096L20.9099 20.0972L19.6379 18.8252ZM10.3295 19.6388L6.36265 15.672L5.09065 16.9452L9.05626 20.9108L10.3295 19.6388ZM18.8243 19.6388C17.6543 20.8076 16.8407 21.6188 16.1459 22.1492C15.4715 22.664 15.0155 22.8284 14.5763 22.8284V24.6284C15.5675 24.6284 16.4027 24.2168 17.2367 23.5808C18.0503 22.9604 18.9635 22.0448 20.0963 20.912L18.8243 19.6388ZM9.05626 20.9108C10.1891 22.0448 11.1023 22.9592 11.9159 23.5808C12.7499 24.2168 13.5851 24.6284 14.5763 24.6284V22.8284C14.1371 22.8284 13.6823 22.664 13.0067 22.1492C12.3119 21.6188 11.4983 20.8076 10.3295 19.6388L9.05626 20.9108ZM19.6379 10.3304C20.8067 11.4992 21.6179 12.3128 22.1483 13.0076C22.6631 13.6832 22.8275 14.138 22.8275 14.5772H24.6275C24.6275 13.586 24.2159 12.7508 23.5799 11.9168C22.9595 11.1032 22.0427 10.19 20.9099 9.0572L19.6379 10.3304ZM20.9099 20.0972C22.0439 18.9632 22.9583 18.0512 23.5799 17.2376C24.2159 16.4036 24.6275 15.5684 24.6275 14.5772H22.8275C22.8275 15.0164 22.6631 15.4724 22.1483 16.1468C21.6179 16.8416 20.8067 17.6552 19.6379 18.8252L20.9099 20.0972ZM7.17625 6.36238C8.34625 5.19358 9.15985 4.38118 9.85465 3.85078C10.529 3.33598 10.985 3.17278 11.4242 3.17278V1.37158C10.433 1.37158 9.59785 1.78318 8.76385 2.41918C7.94905 3.04078 7.03705 3.95518 5.90425 5.08798L7.17625 6.36238ZM16.9442 5.09038C15.8114 3.95638 14.8982 3.04078 14.0846 2.41918C13.2506 1.78318 12.4154 1.37158 11.4242 1.37158V3.17278C11.8634 3.17278 12.3182 3.33598 12.9938 3.85078C13.6886 4.38118 14.5022 5.19238 15.671 6.36118L16.9442 5.09038ZM5.08945 5.90278C3.95665 7.03558 3.04225 7.94758 2.42065 8.76238C1.78465 9.59638 1.37305 10.4316 1.37305 11.4228H3.17305C3.17305 10.9836 3.33745 10.5276 3.85225 9.85318C4.38265 9.15838 5.19385 8.34478 6.36265 7.17478L5.08945 5.90278ZM6.36265 15.6708C5.19385 14.5008 4.38265 13.6872 3.85225 12.9924C3.33745 12.318 3.17305 11.862 3.17305 11.4228H1.37305C1.37305 12.414 1.78465 13.2492 2.42065 14.0832C3.04225 14.8968 3.95665 15.81 5.08945 16.9428L6.36265 15.6708Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> \r\n </div>\r\n \r\n </div>\r\n <div class=\"hide-scrollbar\" style=\"height: 93%; overflow: scroll; position: relative;\" #scrollContainer>\r\n <canvas #gridCanvas>\r\n\r\n </canvas>\r\n\r\n <div *ngIf=\"popupVisible && popupPosition\" [style.top.px]=\"popupPosition.y\"\r\n [style.left.px]=\"popupPosition.x\" class=\"angle-widget\">\r\n <div (click)=\"toggleWidgetElementSelect()\" style=\"width: 147px;\"\r\n class=\"element-type-dropdown widget-element-type-dropdown d-flex justify-content-between position-relative\">\r\n <div>\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'wall'\">\r\n <svg class=\"me-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n <span class=\"type-txt\">Wall</span>\r\n </span>\r\n\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'facade'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"type-txt\">Glass...</span>\r\n </span>\r\n\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'opening'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"type-txt\">Openi...</span>\r\n </span>\r\n\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'entrance'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"18\" viewBox=\"0 0 21 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n <span class=\"type-txt\">Entra...</span>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"down-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <ul *ngIf=\"widgetElementSelect?.show \" [ngClass]=\" widgetElementSelect.show ? 'z-4': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"elementType = 'wall'\" [ngClass]=\"elementType === 'wall' ? 'selected' : ''\"\r\n class=\"selected\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n </div>\r\n <div>Wall</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'wall'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"elementType = 'facade'\" [ngClass]=\"elementType === 'facade' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Glass/Facade</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'facade'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"elementType = 'opening'\"\r\n [ngClass]=\"elementType === 'opening' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Opening</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'opening'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"elementType = 'entrance'\"\r\n [ngClass]=\"elementType === 'entrance' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"18\"\r\n viewBox=\"0 0 21 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n </div>\r\n <div>Entrance</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'entrance'\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n\r\n <div class=\"unit-input\">\r\n <svg (click)=\"onWidgetDistanceChange('decrement')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M2.9165 7H11.0832\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>{{movePixels}}</span>\r\n <svg (click)=\"onWidgetDistanceChange('increment')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M6.99984 2.9165V11.0832M2.9165 6.99984H11.0832\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"position-relative\" style=\"position: relative; width: 229px; height: 229px;\">\r\n <div\r\n style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;\">\r\n <div style=\"margin-bottom: 27px;\" class=\"d-flex justify-content-center\">\r\n <div (click)=\"onWidgetDirectionChange('up')\"\r\n [ngClass]=\"moveDirection === 'up' ? 'direction-selected' : ''\"\r\n class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.00016 10.6673L6.00016 1.33398M6.00016 1.33398L1.3335 6.00065M6.00016 1.33398L10.6668 6.00065\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div (click)=\"onWidgetDirectionChange('left')\"\r\n [ngClass]=\"moveDirection === 'left' ? 'direction-selected' : ''\"\r\n style=\"margin-right: 8px;\" class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10.6663 5.99935L1.33301 5.99935M1.33301 5.99935L5.99967 10.666M1.33301 5.99935L5.99968 1.33268\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"unit-input\">\r\n <svg (click)=\"onWidgetAngleChange('decrement')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path d=\"M2.9165 7H11.0832\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>{{moveAngle}}\u00B0</span>\r\n <svg (click)=\"onWidgetAngleChange('increment')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path d=\"M6.99984 2.9165V11.0832M2.9165 6.99984H11.0832\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div (click)=\"onWidgetDirectionChange('right')\"\r\n [ngClass]=\"moveDirection === 'right' ? 'direction-selected' : ''\"\r\n style=\"margin-left: 8px;\" class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.33366 6.00065L10.667 6.00065M10.667 6.00065L6.00033 1.33398M10.667 6.00065L6.00033 10.6673\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n\r\n <div style=\"margin-top: 27px;\" class=\"d-flex justify-content-center\">\r\n <div (click)=\"onWidgetDirectionChange('down')\"\r\n [ngClass]=\"moveDirection === 'down' ? 'direction-selected' : ''\"\r\n class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M5.99984 1.33268L5.99984 10.666M5.99984 10.666L10.6665 5.99935M5.99984 10.666L1.33317 5.99935\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <canvas height=\"229px\" width=\"229px\" #widgetCanvas\r\n style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;\"></canvas>\r\n <div style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;\"\r\n #circle class=\"circle\">\r\n <div class=\"line\" *ngFor=\"let line of lines\"\r\n [ngClass]=\"{'line--highlight': line.highlight, 'line--invisible': line.invisible}\"\r\n [style.transform]=\"line.transform\"></div>\r\n\r\n <div #pointer class=\"pointer\"></div>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"movePointWithAngle()\"\r\n [disabled]=\"!movePixels && moveAngle !== undefined && moveAngle !== null\"\r\n class=\" w-100 go-btn\">Go</button>\r\n\r\n </div>\r\n\r\n <!-- <div *ngIf=\"popupVisible && popupPosition\" [style.top.px]=\"popupPosition.y\" [style.left.px]=\"popupPosition.x\"\r\n class=\"popup\">\r\n <label>Move Pixels:</label>\r\n <select [(ngModel)]=\"elementType\">\r\n <option value=\"wall\">Wall</option>\r\n <option value=\"facade\">Glass/Facade</option>\r\n <option value=\"opening\">Opening</option>\r\n <option value=\"entrance\">Entrance</option>\r\n </select>\r\n <input type=\"number\" [(ngModel)]=\"movePixels\" />\r\n\r\n <select [(ngModel)]=\"moveDirection\">\r\n <option value=\"right\">Right</option>\r\n <option value=\"down\">Down</option>\r\n <option value=\"left\">Left</option>\r\n <option value=\"up\">Up</option>\r\n </select>\r\n <input type=\"number\" [(ngModel)]=\"moveAngle\" (ngModelChange)=\"layoutLengthPreview()\" />\r\n <button (click)=\"movePointWithAngle()\">Move with angle</button>\r\n </div> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"planoStoreList.length > 1\" class=\"col-12 mt-6\">\r\n <div style=\"padding: 0px !important;\" class=\"c-card\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" (pageChange)=\"onPageChange($event)\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"></lib-pagination>\r\n </div>\r\n </div>\r\n\r\n</div>", styles: [".storename-txt{color:#101828;font-size:16px;font-weight:600;line-height:24px}.c-card{padding:16px;border-radius:8px;background:#fff}.l-pane-head{color:#101828;font-size:18px;font-weight:600;line-height:28px}.l-pane-desc{color:#475467;font-size:12px;font-weight:400;line-height:18px}.elipsis-btn{display:flex;width:40px;height:40px;padding:10px;justify-content:center;align-items:center;gap:8px;border-radius:48px;border:1px solid #D0D5DD;background:#fff;cursor:pointer}.no-steps-txt{color:#101828;font-size:18px;font-weight:500;line-height:28px}.no-text-desc{color:#101828;font-size:14px;font-weight:400;line-height:20px}.hide-scrollbar{overflow:scroll;-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.popup{position:absolute;background:#fff;border:1px solid black;padding:10px;box-shadow:0 4px 8px #0003;z-index:1000}.resize-icon{cursor:pointer;border-radius:727.273px;background:#fff;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;right:-13px;top:70px;padding:7.273px}.resize-icon svg{width:17.455px;height:17.455px}th{background-color:#fff!important;color:#667085!important;font-size:12px!important;font-weight:400!important}td{color:#101828!important;font-size:14px!important;font-weight:500!important}.element-type-dropdown{display:flex;height:44px;padding:10px 14px;align-items:center;gap:8px;flex-shrink:0;align-self:stretch;border-radius:8px;border:1px solid #D0D5DD;background:#fff;cursor:pointer;position:relative}.element-type-dropdown .type-txt{color:#1d2939;font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.element-type-dropdown .down-arrow{width:20px;height:20px}.element-type-dropdown ul{position:absolute;top:45px;width:200px;left:0;border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.element-type-dropdown ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}.element-type-dropdown ul .selected{background:#f9fafb}.direction-dropdown{display:flex;height:44px;padding:10px 14px;align-items:center;gap:8px;flex-shrink:0;align-self:stretch;border-radius:8px;border:1px solid #D0D5DD;background:#fff;cursor:pointer;position:relative}.direction-dropdown .down-arrow{width:20px;height:20px}.direction-dropdown ul{position:absolute;top:45px;width:200px;left:0;border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.direction-dropdown ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}.direction-dropdown ul .selected{background:#f9fafb}.elipsis-icon-dropdown{position:relative}.elipsis-icon-dropdown ul{position:absolute;top:45px;width:200px;right:0;border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.elipsis-icon-dropdown ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;position:relative}.elipsis-icon-dropdown ul li .export-options{display:none;position:absolute;left:298px;top:-47px}.elipsis-icon-dropdown ul li .export-options ul{border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;z-index:5;width:100px;padding:0}.elipsis-icon-dropdown ul li .export-options ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer}.elipsis-icon-dropdown ul li:hover .export-options{display:block}.elipsis-icon-dropdown ul li:hover{background:#f9fafb}.element-name{display:flex;padding:10px 14px;align-items:center;gap:8px;flex:1 0 0;align-self:stretch;border-radius:8px;background:#f9fafb;color:#101828;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;white-space:nowrap}.unit-input{display:flex;justify-content:space-between;width:72px;height:44px;padding:4px 6px;align-items:center;gap:4px;border-radius:8px;border:1px solid #D0D5DD;background:#fff}.angle-input{width:55px;display:flex;padding:10px 14px;align-items:center;gap:8px;align-self:stretch;border-radius:8px;border:1px solid #D0D5DD;background:#fff}.angle-widget{position:absolute;display:flex;min-width:259px;padding:14px;align-items:flex-start;align-content:flex-start;gap:14px 10px;flex-wrap:wrap;border-radius:8px;border:1px solid #6BCAFF;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.angle-widget .go-btn{border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;padding:10px 16px;color:#009bf3;font-size:12px;font-weight:600;line-height:18px}.angle-widget .go-btn:disabled{border:1px solid #F6FCFF;background:#f6fcff;color:#6bcaff}.angle-widget .direction-input{padding:4px 8px;border-radius:8px;border:1px solid #667085;background:#fff;cursor:pointer}.angle-widget .direction-selected{border:1px solid #33B5FF}.angle-widget .direction-selected svg path{stroke:#33b5ff;fill:#33b5ff}.angle-widget .circle{width:229px;height:229px;border-radius:50%;position:relative;transform:rotate(-180deg)}.angle-widget .line{background:linear-gradient(to top,transparent 80%,rgba(0,0,0,.2) 80%);width:1px;height:114.5px;left:calc(50% - .5px);top:0;position:absolute;transform-origin:bottom;display:flex;justify-content:center}.angle-widget .line--highlight{background:linear-gradient(to top,transparent 80%,black 80%)}.angle-widget .line--invisible{background:transparent!important}.angle-widget .pointer{width:0px;height:114.5px;transform-origin:bottom;position:absolute;top:0;left:50%;background:#000;display:flex;justify-content:center}.angle-widget .pointer:after{display:block;content:\"\";width:0;height:25px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #33B5FF}.angle-widget .z-4{z-index:4}.menu-txt1{color:#344054;font-size:14px;font-weight:500;line-height:20px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.floor-select{width:155px;height:44px;border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d;position:relative;display:flex;justify-content:space-between;padding:10px 16px;cursor:pointer;color:#344054;font-size:14px;font-weight:600;line-height:20px}.floor-select ul{width:240px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;position:absolute;top:45px;left:0;background:#fff;z-index:4}.floor-select ul li{position:relative;padding:10px 16px;color:#1d2939;font-size:14px;font-weight:500;line-height:20px;align-items:center;cursor:pointer}.floor-select ul li .option{width:200px;position:absolute;padding:10px 16px;background:#fef3f2;color:#d92d20;font-size:14px;font-weight:500;line-height:20px;right:-200px;top:0}.floor-select ul li:hover,.floor-select ul .selected{background:#f2f4f7}.selected-element{border:1px solid #008EDF!important}td .drag-handler svg{display:none}td .drag-handler:hover svg{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i8.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
1790
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreateLayoutComponent, selector: "lib-create-layout", host: { listeners: { "wheel": "onMouseWheel($event)", "document:click": "onOutsideClick($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["gridCanvas"], descendants: true, static: true }, { propertyName: "widgetCanvasRef", first: true, predicate: ["widgetCanvas"], descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "circleRef", first: true, predicate: ["circle"], descendants: true }, { propertyName: "pointerRef", first: true, predicate: ["pointer"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mb-6\">\r\n <div>\r\n <div *ngIf=\"planoStoreList.length === 1\" class=\"storename-txt\">\r\n {{selectedStore?.storeName}} - Layout\r\n </div>\r\n <div *ngIf=\"planoStoreList.length > 1\">\r\n <lib-select-plano [items]=\"planoStoreList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center\">\r\n <button (click)=\"onSaveAsDraft()\" class=\"btn btn-outline bg-white me-5\">Save As Draft</button>\r\n <button (click)=\"onConfigure()\" class=\"btn btn-sm btn-primary me-5\">Configure</button>\r\n <button (click)=\"openOffCanva()\" class=\"btn btn-sm btn-outline bg-white\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 3V21M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n <div [ngClass]=\"layoutMode === 'full' ? 'col-2' : 'col-5'\">\r\n <div class=\"c-card\" style=\"height: 75dvh; position: relative;\">\r\n <div class=\"resize-icon\" *ngIf=\"layoutMode === 'half'\" (click)=\"layoutMode = 'full'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M8.27259 12.6365L4.63623 9.00013L8.27259 5.36377M13.3635 12.6365L9.72714 9.00013L13.3635 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div class=\"resize-icon\" *ngIf=\"layoutMode === 'full'\" (click)=\"layoutMode = 'half'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M9.72741 5.36399L13.3638 9.00036L9.72741 12.6367M4.6365 5.36399L8.27286 9.00036L4.6365 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 class=\"d-flex align-items-center justify-content-between mb-5\" style=\"height: 8%;\">\r\n <div>\r\n <div class=\"l-pane-head\">\r\n Layout details\r\n </div>\r\n <div *ngIf=\"layoutMode === 'half'\" class=\"l-pane-desc\">\r\n Below are the sequence of steps for this layout\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <ng-container *ngIf=\"layoutMode === 'half'\">\r\n <svg (click)=\"undo()\" class=\"me-3 cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [attr.fill]=\"undoStack.length ? '#1D2939' : '#D0D5DD'\"\r\n d=\"M7 19V17H14.1C15.15 17 16.0627 16.6667 16.838 16C17.6133 15.3333 18.0007 14.5 18 13.5C18 12.5 17.6123 11.6667 16.837 11C16.0617 10.3333 15.1493 10 14.1 10H7.8L10.4 12.6L9 14L4 9L9 4L10.4 5.4L7.8 8H14.1C15.7167 8 17.1043 8.525 18.263 9.575C19.4217 10.625 20.0007 11.9333 20 13.5C20 15.0667 19.4207 16.375 18.262 17.425C17.1033 18.475 15.716 19 14.1 19H7Z\"\r\n fill=\"#D0D5DD\" />\r\n </svg>\r\n <svg (click)=\"redo()\" class=\"me-6 cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [attr.fill]=\"redoStack.length ? '#1D2939' : '#D0D5DD'\"\r\n d=\"M9.9 19C8.28333 19 6.89567 18.475 5.737 17.425C4.57833 16.375 3.99933 15.0667 4 13.5C4 11.9333 4.57933 10.625 5.738 9.575C6.89667 8.525 8.284 8 9.9 8H16.2L13.6 5.4L15 4L20 9L15 14L13.6 12.6L16.2 10H9.9C8.85 10 7.93733 10.3333 7.162 11C6.38667 11.6667 5.99933 12.5 6 13.5C6 14.5 6.38767 15.3333 7.163 16C7.93833 16.6667 8.85067 17 9.9 17H17V19H9.9Z\"\r\n fill=\"#D0D5DD\" />\r\n </svg>\r\n <div (click)=\"toggleLayoutOptionSelect()\"\r\n class=\"d-flex align-items-center justify-content-center h-100 elipsis-icon-dropdown top-elipsis-menu\">\r\n <div class=\"elipsis-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11 11.9997C11 12.5289 11.4477 12.958 12 12.958C12.5523 12.958 13 12.5289 13 11.9997C13 11.4704 12.5523 11.0413 12 11.0413C11.4477 11.0413 11 11.4704 11 11.9997Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 18.708C11 19.2373 11.4477 19.6663 12 19.6663C12.5523 19.6663 13 19.2373 13 18.708C13 18.1787 12.5523 17.7497 12 17.7497C11.4477 17.7497 11 18.1787 11 18.708Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 5.29134C11 5.82061 11.4477 6.24967 12 6.24967C12.5523 6.24967 13 5.82061 13 5.29134C13 4.76207 12.5523 4.33301 12 4.33301C11.4477 4.33301 11 4.76207 11 5.29134Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <ul *ngIf=\"layoutOptionSelect?.show\" [ngClass]=\" (layoutOptionSelect.show ) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li>\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"menu-txt1\">Export</div>\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\">\r\n <path d=\"M1 13L7 7L1 1\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"export-options\">\r\n <ul>\r\n <li (click)=\"exportToExcel()\" >XLSX</li>\r\n <li (click)=\"exportAsPng()\" >PNG</li>\r\n </ul>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onClearAll()\">\r\n <div class=\"d-flex\">\r\n <div class=\"menu-txt1\">Clear all</div>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onDeleteLayout()\">\r\n <div class=\"d-flex\">\r\n <div class=\"menu-txt1 text-danger\">Delete</div>\r\n </div>\r\n </li>\r\n\r\n </ul>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- <div class=\"d-flex align-items-center flex-column mx-auto\" style=\"margin-top: 200px;\" >\r\n <div class=\"no-steps-txt mb-3\">\r\n No steps have been created so far\r\n </div>\r\n <div class=\"no-text-desc text-center\">\r\n Start designing the layout by applying the steps using elements and dimensions.\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"table-responsive hide-scrollbar \" style=\"height: 92%;\">\r\n <table class=\"table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th>Steps</th>\r\n <th>Elements and Definition</th>\r\n <th>Feet</th>\r\n <th>Direction</th>\r\n <th>Degree</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let item of layoutPolygon; let i = index\">\r\n <tr [ngClass]=\"selectedLineIndex === i ? 'selected-element' : ''\" *ngIf=\"item?.[2]\" cdkDrag>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100 drag-handler\">\r\n <span class=\"mr-2 \" >\r\n <svg class=\"cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\">\r\n <circle cx=\"5\" cy=\"5\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"14\" cy=\"5\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"5\" cy=\"10\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"14\" cy=\"10\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"5\" cy=\"15\" r=\"2\" fill=\"gray\" />\r\n <circle cx=\"14\" cy=\"15\" r=\"2\" fill=\"gray\" />\r\n </svg>\r\n </span>\r\n <span>{{ i + 1}}</span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div (click)=\"toggleElementSelect(i)\"\r\n class=\"element-type-dropdown me-2 position-relative\">\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'wall'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"item[2].elementType === 'facade'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"item[2].elementType === 'opening'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngIf=\"item[2].elementType === 'entrance'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"18\"\r\n viewBox=\"0 0 21 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"down-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <ul *ngIf=\"elementSelect?.show && elementSelect?.index === i\"\r\n [ngClass]=\" (elementSelect.show && elementSelect.index === i) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"onElementTypeChange('wall', i)\"\r\n [ngClass]=\"item[2].elementType === 'wall' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n </div>\r\n <div>Wall</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'wall'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onElementTypeChange('facade', i)\"\r\n [ngClass]=\"item[2].elementType === 'facade' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\"\r\n height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Glass/Facade</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'facade'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onElementTypeChange('opening', i)\"\r\n [ngClass]=\"item[2].elementType === 'opening' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Opening</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'opening'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onElementTypeChange('entrance', i)\"\r\n [ngClass]=\"item[2].elementType === 'entrance' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"18\" viewBox=\"0 0 21 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n </div>\r\n <div>Entrance</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].elementType === 'entrance'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"element-name\">{{item[2].elementType}} {{item[2].elementNumber}}\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"unit-input\">\r\n <svg (click)=\"onDistanceChange('decrement', i)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M2.9165 7H11.0832\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>{{item[2].distance}}</span>\r\n <svg (click)=\"onDistanceChange('increment', i)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M6.99984 2.9165V11.0832M2.9165 6.99984H11.0832\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </td>\r\n <td>\r\n <div (click)=\"toggleDirectionSelect(i)\"\r\n class=\"direction-dropdown position-relative\">\r\n <div>\r\n {{item[2].direction}}\r\n </div>\r\n\r\n <div class=\"down-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <ul *ngIf=\"directionSelect?.show && directionSelect?.index === i\"\r\n [ngClass]=\" (directionSelect.show && directionSelect.index === i) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"onDirectionChange('up', i)\"\r\n [ngClass]=\"item[2].direction === 'up' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div>Up</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'up'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onDirectionChange('down', i)\"\r\n [ngClass]=\"item[2].direction === 'down' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n\r\n <div>Down</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'down'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onDirectionChange('right', i)\"\r\n [ngClass]=\"item[2].direction === 'right' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n\r\n <div>Right</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"onDirectionChange('left', i)\"\r\n [ngClass]=\"item[2].direction === 'left' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n\r\n <div>Left</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"item[2].direction === 'left'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <input min=\"0\" max=\"180\" class=\"angle-input\" [(ngModel)]=\"item[2].angle\"\r\n type=\"number\" (input)=\"validateAngleInput($event, i)\" (blur)=\"onAngleChange(i)\">\r\n <!-- <span class=\"angle-input\">\r\n {{item[2].angle}}\u00B0\r\n </span> -->\r\n </td>\r\n <td>\r\n <div (click)=\"toggleLineOptionsSelect(i)\"\r\n class=\"d-flex align-items-center justify-content-center h-100 elipsis-icon-dropdown\">\r\n <svg class=\"cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"4\"\r\n height=\"19\" viewBox=\"0 0 4 19\" fill=\"none\">\r\n <path\r\n d=\"M1 9.50016C1 10.0294 1.44771 10.4585 2 10.4585C2.55228 10.4585 3 10.0294 3 9.50016C3 8.97089 2.55228 8.54183 2 8.54183C1.44771 8.54183 1 8.97089 1 9.50016Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M0.999999 16.2085C0.999999 16.7378 1.44771 17.1668 2 17.1668C2.55228 17.1668 3 16.7378 3 16.2085C3 15.6792 2.55228 15.2502 2 15.2502C1.44771 15.2502 0.999999 15.6792 0.999999 16.2085Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M1 2.79183C1 3.3211 1.44772 3.75016 2 3.75016C2.55228 3.75016 3 3.3211 3 2.79183C3 2.26256 2.55228 1.8335 2 1.8335C1.44772 1.8335 1 2.26256 1 2.79183Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <ul *ngIf=\"lineOptionsSelect?.show && lineOptionsSelect?.index === i\"\r\n [ngClass]=\" (lineOptionsSelect.show && lineOptionsSelect.index === i) ? 'z-1': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"onAddStep(i)\">\r\n <div class=\"d-flex\">\r\n <div>Add new step</div>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onDuplicateStep(i)\">\r\n <div class=\"d-flex\">\r\n <div>Duplicate</div>\r\n </div>\r\n\r\n </li>\r\n <li (click)=\"onLineDelete(i)\">\r\n <div class=\"d-flex\">\r\n <div class=\"text-danger\">Delete</div>\r\n </div>\r\n\r\n </li>\r\n\r\n </ul>\r\n </div>\r\n\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"layoutMode === 'full' ? 'col-10' : 'col-7'\">\r\n <div class=\"c-card \" style=\"height: 75dvh;\">\r\n <div style=\"height: 7%;\" class=\"d-flex align-items-center justify-content-between\">\r\n <div>\r\n <!-- <lib-reactive-select *ngIf=\"floorsInput.value\" [formControl]=\"floorsInput\" [idField]=\"'id'\"\r\n [nameField]=\"'floorName'\" [data]=\"selectedStore?.floor\"></lib-reactive-select> -->\r\n <div (click)=\"toggleFloorSelect()\" class=\"floor-select\">\r\n <div>{{selectedFloor?.floorName}}</div>\r\n <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <ul *ngIf=\"floorSelect?.show\" class=\"list-unstyled mb-2\">\r\n <li (click)=\"onFloorSelect(floor._id)\"\r\n *ngFor=\"let floor of selectedStore?.floors; let i = index\"\r\n [ngClass]=\"floor._id === selectedFloor._id ? 'selected': ''\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span>{{floor?.floorName}}</span>\r\n <span *ngIf=\"selectedStore?.floors.length > 1\"\r\n (click)=\"$event.stopPropagation(); floorSelect.deleteIndex = i\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"23\"\r\n viewBox=\"0 0 24 23\" fill=\"none\">\r\n <path\r\n d=\"M11 11.4999C11 12.0292 11.4477 12.4583 12 12.4583C12.5523 12.4583 13 12.0292 13 11.4999C13 10.9706 12.5523 10.5416 12 10.5416C11.4477 10.5416 11 10.9706 11 11.4999Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 18.2083C11 18.7375 11.4477 19.1666 12 19.1666C12.5523 19.1666 13 18.7375 13 18.2083C13 17.679 12.5523 17.2499 12 17.2499C11.4477 17.2499 11 17.679 11 18.2083Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M11 4.79159C11 5.32086 11.4477 5.74992 12 5.74992C12.5523 5.74992 13 5.32086 13 4.79159C13 4.26231 12.5523 3.83325 12 3.83325C11.4477 3.83325 11 4.26231 11 4.79159Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"floorSelect.deleteIndex === i\"\r\n (click)=\"$event.stopPropagation(); deleteFloor(i)\" class=\"option\">Delete</div>\r\n </li>\r\n <li (click)=\"openAddFloorModal()\">\r\n <span>\r\n <span class=\"mr-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33325V12.6666M3.3335 7.99992H12.6668\" stroke=\"#101828\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span>Add floor</span>\r\n </span>\r\n\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" >\r\n <button ngbTooltip=\"Re-Orient\" (click)=\"findPolygonCenterAndScroll()\" class=\"btn btn-sm btn-outline bg-white me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" fill=\"none\" viewBox=\"0 0 128 128\" id=\"recenter\">\r\n <path stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"7\" d=\"M38 74L49 63.5 38 53M53.5 37.5L64 48.5 74.5 37.5M90 53L79 63.5 90 74M74.5 89.5L64 78.5 53.5 89.5\"></path>\r\n <path stroke=\"#000\" stroke-linecap=\"round\" stroke-width=\"7\" d=\"M44 64L16 64M63.5 43.5L63.5 15.5M84 63L112 63M64.5 83.5L64.5 111.5\"></path>\r\n <circle cx=\"64\" cy=\"64\" r=\"5\" fill=\"#000\"></circle>\r\n </svg>\r\n </button>\r\n <button ngbTooltip=\"Rotate\" class=\"btn btn-sm btn-outline bg-white\" (click)=\"rotatePolygons()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17838L7.17625 6.36238L5.90425 5.09158L5.08945 5.90518L6.36265 7.17838ZM15.671 6.36358L19.6379 10.3304L20.9099 9.0572L16.9442 5.09038L15.671 6.36358ZM19.6379 18.8252L18.8243 19.6388L20.0963 20.9096L20.9099 20.0972L19.6379 18.8252ZM10.3295 19.6388L6.36265 15.672L5.09065 16.9452L9.05626 20.9108L10.3295 19.6388ZM18.8243 19.6388C17.6543 20.8076 16.8407 21.6188 16.1459 22.1492C15.4715 22.664 15.0155 22.8284 14.5763 22.8284V24.6284C15.5675 24.6284 16.4027 24.2168 17.2367 23.5808C18.0503 22.9604 18.9635 22.0448 20.0963 20.912L18.8243 19.6388ZM9.05626 20.9108C10.1891 22.0448 11.1023 22.9592 11.9159 23.5808C12.7499 24.2168 13.5851 24.6284 14.5763 24.6284V22.8284C14.1371 22.8284 13.6823 22.664 13.0067 22.1492C12.3119 21.6188 11.4983 20.8076 10.3295 19.6388L9.05626 20.9108ZM19.6379 10.3304C20.8067 11.4992 21.6179 12.3128 22.1483 13.0076C22.6631 13.6832 22.8275 14.138 22.8275 14.5772H24.6275C24.6275 13.586 24.2159 12.7508 23.5799 11.9168C22.9595 11.1032 22.0427 10.19 20.9099 9.0572L19.6379 10.3304ZM20.9099 20.0972C22.0439 18.9632 22.9583 18.0512 23.5799 17.2376C24.2159 16.4036 24.6275 15.5684 24.6275 14.5772H22.8275C22.8275 15.0164 22.6631 15.4724 22.1483 16.1468C21.6179 16.8416 20.8067 17.6552 19.6379 18.8252L20.9099 20.0972ZM7.17625 6.36238C8.34625 5.19358 9.15985 4.38118 9.85465 3.85078C10.529 3.33598 10.985 3.17278 11.4242 3.17278V1.37158C10.433 1.37158 9.59785 1.78318 8.76385 2.41918C7.94905 3.04078 7.03705 3.95518 5.90425 5.08798L7.17625 6.36238ZM16.9442 5.09038C15.8114 3.95638 14.8982 3.04078 14.0846 2.41918C13.2506 1.78318 12.4154 1.37158 11.4242 1.37158V3.17278C11.8634 3.17278 12.3182 3.33598 12.9938 3.85078C13.6886 4.38118 14.5022 5.19238 15.671 6.36118L16.9442 5.09038ZM5.08945 5.90278C3.95665 7.03558 3.04225 7.94758 2.42065 8.76238C1.78465 9.59638 1.37305 10.4316 1.37305 11.4228H3.17305C3.17305 10.9836 3.33745 10.5276 3.85225 9.85318C4.38265 9.15838 5.19385 8.34478 6.36265 7.17478L5.08945 5.90278ZM6.36265 15.6708C5.19385 14.5008 4.38265 13.6872 3.85225 12.9924C3.33745 12.318 3.17305 11.862 3.17305 11.4228H1.37305C1.37305 12.414 1.78465 13.2492 2.42065 14.0832C3.04225 14.8968 3.95665 15.81 5.08945 16.9428L6.36265 15.6708Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> \r\n </div>\r\n \r\n </div>\r\n <div class=\"hide-scrollbar\" style=\"height: 93%; overflow: scroll; position: relative;\" #scrollContainer>\r\n <canvas #gridCanvas>\r\n\r\n </canvas>\r\n\r\n <div *ngIf=\"popupVisible && popupPosition\" [style.top.px]=\"popupPosition.y\"\r\n [style.left.px]=\"popupPosition.x\" class=\"angle-widget\">\r\n <div (click)=\"toggleWidgetElementSelect()\" style=\"width: 147px;\"\r\n class=\"element-type-dropdown widget-element-type-dropdown d-flex justify-content-between position-relative\">\r\n <div>\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'wall'\">\r\n <svg class=\"me-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n <span class=\"type-txt\">Wall</span>\r\n </span>\r\n\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'facade'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"type-txt\">Glass...</span>\r\n </span>\r\n\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'opening'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"type-txt\">Openi...</span>\r\n </span>\r\n\r\n <span class=\"d-flex align-items-center\" *ngIf=\"elementType === 'entrance'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"18\" viewBox=\"0 0 21 18\"\r\n fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n <span class=\"type-txt\">Entra...</span>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"down-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <ul *ngIf=\"widgetElementSelect?.show \" [ngClass]=\" widgetElementSelect.show ? 'z-4': ''\"\r\n class=\"list-unstyled mb-2\">\r\n <li (click)=\"elementType = 'wall'\" [ngClass]=\"elementType === 'wall' ? 'selected' : ''\"\r\n class=\"selected\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.33333 1.33333V0L2.66667 0V1.33333L6.66667 1.33333V0L8 0V1.33333L12 1.33333V0L13.3333 0V1.33333L17.3333 1.33333V0L18.6667 0V1.33333H20V2.66667H18.6667V6.66667H20V8H18.6667V12H20V13.3333H18.6667V17.3333H20V18.6667H18.6667V20H17.3333V18.6667H13.3333V20H12V18.6667H8V20H6.66667V18.6667H2.66667V20H1.33333V18.6667H0L0 17.3333H1.33333L1.33333 13.3333H0L0 12H1.33333L1.33333 8H0L0 6.66667H1.33333L1.33333 2.66667H0L0 1.33333H1.33333ZM2.66667 2.66667L2.66667 6.66667H6.66667V2.66667L2.66667 2.66667ZM8 2.66667V6.66667H12V2.66667L8 2.66667ZM13.3333 2.66667V6.66667H17.3333V2.66667H13.3333ZM17.3333 8L13.3333 8V12L17.3333 12V8ZM17.3333 13.3333L13.3333 13.3333L13.3333 17.3333H17.3333V13.3333ZM12 17.3333L12 13.3333H8L8 17.3333H12ZM6.66667 17.3333V13.3333H2.66667V17.3333H6.66667ZM2.66667 12H6.66667V8H2.66667L2.66667 12ZM8 8V12H12V8H8Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n </div>\r\n <div>Wall</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'wall'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"elementType = 'facade'\" [ngClass]=\"elementType === 'facade' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M1 11V2.25C1 1.5625 1.5625 1 2.25 1H19.75C20.4375 1 21 1.5625 21 2.25V19.75C21 20.4375 20.4375 21 19.75 21H2.25C1.5625 21 1 20.4375 1 19.75V11Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Glass/Facade</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'facade'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"elementType = 'opening'\"\r\n [ngClass]=\"elementType === 'opening' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.5 2.5H15.8333C16.2754 2.5 16.6993 2.6756 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H12.5M8.33333 14.1667L12.5 10M12.5 10L8.33333 5.83333M12.5 10H2.5\"\r\n stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div>Opening</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'opening'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n <li (click)=\"elementType = 'entrance'\"\r\n [ngClass]=\"elementType === 'entrance' ? 'selected' : ''\">\r\n <div class=\"d-flex\">\r\n <div class=\"me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"18\"\r\n viewBox=\"0 0 21 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.9333 1.37949C8.7909 1.37949 1.37949 8.7909 1.37949 17.9333H0C0 8.02903 8.02903 0 17.9333 0V1.37949Z\"\r\n fill=\"#1D2939\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M19.3132 1.37949H17.9333L17.9337 16.5538H19.3132V1.37949ZM16.5542 0V17.9333H20.6927V0H16.5542Z\"\r\n fill=\"#1D2939\" />\r\n </svg>\r\n </div>\r\n <div>Entrance</div>\r\n </div>\r\n <div>\r\n <svg *ngIf=\"elementType === 'entrance'\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M16.6663 5L7.49967 14.1667L3.33301 10\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n\r\n <div class=\"unit-input\">\r\n <svg (click)=\"onWidgetDistanceChange('decrement')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M2.9165 7H11.0832\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>{{movePixels}}</span>\r\n <svg (click)=\"onWidgetDistanceChange('increment')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M6.99984 2.9165V11.0832M2.9165 6.99984H11.0832\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"position-relative\" style=\"position: relative; width: 229px; height: 229px;\">\r\n <div\r\n style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;\">\r\n <div style=\"margin-bottom: 27px;\" class=\"d-flex justify-content-center\">\r\n <div (click)=\"onWidgetDirectionChange('up')\"\r\n [ngClass]=\"moveDirection === 'up' ? 'direction-selected' : ''\"\r\n class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M6.00016 10.6673L6.00016 1.33398M6.00016 1.33398L1.3335 6.00065M6.00016 1.33398L10.6668 6.00065\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div (click)=\"onWidgetDirectionChange('left')\"\r\n [ngClass]=\"moveDirection === 'left' ? 'direction-selected' : ''\"\r\n style=\"margin-right: 8px;\" class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10.6663 5.99935L1.33301 5.99935M1.33301 5.99935L5.99967 10.666M1.33301 5.99935L5.99968 1.33268\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"unit-input\">\r\n <svg (click)=\"onWidgetAngleChange('decrement')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path d=\"M2.9165 7H11.0832\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>{{moveAngle}}\u00B0</span>\r\n <svg (click)=\"onWidgetAngleChange('increment')\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path d=\"M6.99984 2.9165V11.0832M2.9165 6.99984H11.0832\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div (click)=\"onWidgetDirectionChange('right')\"\r\n [ngClass]=\"moveDirection === 'right' ? 'direction-selected' : ''\"\r\n style=\"margin-left: 8px;\" class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.33366 6.00065L10.667 6.00065M10.667 6.00065L6.00033 1.33398M10.667 6.00065L6.00033 10.6673\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n\r\n <div style=\"margin-top: 27px;\" class=\"d-flex justify-content-center\">\r\n <div (click)=\"onWidgetDirectionChange('down')\"\r\n [ngClass]=\"moveDirection === 'down' ? 'direction-selected' : ''\"\r\n class=\"direction-input\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M5.99984 1.33268L5.99984 10.666M5.99984 10.666L10.6665 5.99935M5.99984 10.666L1.33317 5.99935\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <canvas height=\"229px\" width=\"229px\" #widgetCanvas\r\n style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;\"></canvas>\r\n <div style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;\"\r\n #circle class=\"circle\">\r\n <div class=\"line\" *ngFor=\"let line of lines\"\r\n [ngClass]=\"{'line--highlight': line.highlight, 'line--invisible': line.invisible}\"\r\n [style.transform]=\"line.transform\"></div>\r\n\r\n <div #pointer class=\"pointer\"></div>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"movePointWithAngle()\"\r\n [disabled]=\"!movePixels && moveAngle !== undefined && moveAngle !== null\"\r\n class=\" w-100 go-btn\">Go</button>\r\n\r\n </div>\r\n\r\n <!-- <div *ngIf=\"popupVisible && popupPosition\" [style.top.px]=\"popupPosition.y\" [style.left.px]=\"popupPosition.x\"\r\n class=\"popup\">\r\n <label>Move Pixels:</label>\r\n <select [(ngModel)]=\"elementType\">\r\n <option value=\"wall\">Wall</option>\r\n <option value=\"facade\">Glass/Facade</option>\r\n <option value=\"opening\">Opening</option>\r\n <option value=\"entrance\">Entrance</option>\r\n </select>\r\n <input type=\"number\" [(ngModel)]=\"movePixels\" />\r\n\r\n <select [(ngModel)]=\"moveDirection\">\r\n <option value=\"right\">Right</option>\r\n <option value=\"down\">Down</option>\r\n <option value=\"left\">Left</option>\r\n <option value=\"up\">Up</option>\r\n </select>\r\n <input type=\"number\" [(ngModel)]=\"moveAngle\" (ngModelChange)=\"layoutLengthPreview()\" />\r\n <button (click)=\"movePointWithAngle()\">Move with angle</button>\r\n </div> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"planoStoreList.length > 1\" class=\"col-12 mt-6\">\r\n <div style=\"padding: 0px !important;\" class=\"c-card\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" (pageChange)=\"onPageChange($event)\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"></lib-pagination>\r\n </div>\r\n </div>\r\n\r\n</div>", styles: [".storename-txt{color:#101828;font-size:16px;font-weight:600;line-height:24px}.c-card{padding:16px;border-radius:8px;background:#fff}.l-pane-head{color:#101828;font-size:18px;font-weight:600;line-height:28px}.l-pane-desc{color:#475467;font-size:12px;font-weight:400;line-height:18px}.elipsis-btn{display:flex;width:40px;height:40px;padding:10px;justify-content:center;align-items:center;gap:8px;border-radius:48px;border:1px solid #D0D5DD;background:#fff;cursor:pointer}.no-steps-txt{color:#101828;font-size:18px;font-weight:500;line-height:28px}.no-text-desc{color:#101828;font-size:14px;font-weight:400;line-height:20px}.hide-scrollbar{overflow:scroll;-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.popup{position:absolute;background:#fff;border:1px solid black;padding:10px;box-shadow:0 4px 8px #0003;z-index:1000}.resize-icon{cursor:pointer;border-radius:727.273px;background:#fff;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;right:-13px;top:70px;padding:7.273px}.resize-icon svg{width:17.455px;height:17.455px}th{background-color:#fff!important;color:#667085!important;font-size:12px!important;font-weight:400!important}td{color:#101828!important;font-size:14px!important;font-weight:500!important}.element-type-dropdown{display:flex;height:44px;padding:10px 14px;align-items:center;gap:8px;flex-shrink:0;align-self:stretch;border-radius:8px;border:1px solid #D0D5DD;background:#fff;cursor:pointer;position:relative}.element-type-dropdown .type-txt{color:#1d2939;font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.element-type-dropdown .down-arrow{width:20px;height:20px}.element-type-dropdown ul{position:absolute;top:45px;width:200px;left:0;border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.element-type-dropdown ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}.element-type-dropdown ul .selected{background:#f9fafb}.direction-dropdown{display:flex;height:44px;padding:10px 14px;align-items:center;gap:8px;flex-shrink:0;align-self:stretch;border-radius:8px;border:1px solid #D0D5DD;background:#fff;cursor:pointer;position:relative}.direction-dropdown .down-arrow{width:20px;height:20px}.direction-dropdown ul{position:absolute;top:45px;width:200px;left:0;border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.direction-dropdown ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}.direction-dropdown ul .selected{background:#f9fafb}.elipsis-icon-dropdown{position:relative}.elipsis-icon-dropdown ul{position:absolute;top:45px;width:200px;right:0;border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.elipsis-icon-dropdown ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;position:relative}.elipsis-icon-dropdown ul li .export-options{display:none;position:absolute;left:298px;top:-47px}.elipsis-icon-dropdown ul li .export-options ul{border-radius:4px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;z-index:5;width:100px;padding:0}.elipsis-icon-dropdown ul li .export-options ul li{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer}.elipsis-icon-dropdown ul li:hover .export-options{display:block}.elipsis-icon-dropdown ul li:hover{background:#f9fafb}.element-name{display:flex;padding:10px 14px;align-items:center;gap:8px;flex:1 0 0;align-self:stretch;border-radius:8px;background:#f9fafb;color:#101828;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;white-space:nowrap}.unit-input{display:flex;justify-content:space-between;width:72px;height:44px;padding:4px 6px;align-items:center;gap:4px;border-radius:8px;border:1px solid #D0D5DD;background:#fff}.angle-input{width:55px;display:flex;padding:10px 14px;align-items:center;gap:8px;align-self:stretch;border-radius:8px;border:1px solid #D0D5DD;background:#fff}.angle-widget{position:absolute;display:flex;min-width:259px;padding:14px;align-items:flex-start;align-content:flex-start;gap:14px 10px;flex-wrap:wrap;border-radius:8px;border:1px solid #6BCAFF;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.angle-widget .go-btn{border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;padding:10px 16px;color:#009bf3;font-size:12px;font-weight:600;line-height:18px}.angle-widget .go-btn:disabled{border:1px solid #F6FCFF;background:#f6fcff;color:#6bcaff}.angle-widget .direction-input{padding:4px 8px;border-radius:8px;border:1px solid #667085;background:#fff;cursor:pointer}.angle-widget .direction-selected{border:1px solid #33B5FF}.angle-widget .direction-selected svg path{stroke:#33b5ff;fill:#33b5ff}.angle-widget .circle{width:229px;height:229px;border-radius:50%;position:relative;transform:rotate(-180deg)}.angle-widget .line{background:linear-gradient(to top,transparent 80%,rgba(0,0,0,.2) 80%);width:1px;height:114.5px;left:calc(50% - .5px);top:0;position:absolute;transform-origin:bottom;display:flex;justify-content:center}.angle-widget .line--highlight{background:linear-gradient(to top,transparent 80%,black 80%)}.angle-widget .line--invisible{background:transparent!important}.angle-widget .pointer{width:0px;height:114.5px;transform-origin:bottom;position:absolute;top:0;left:50%;background:#000;display:flex;justify-content:center}.angle-widget .pointer:after{display:block;content:\"\";width:0;height:25px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #33B5FF}.angle-widget .z-4{z-index:4}.menu-txt1{color:#344054;font-size:14px;font-weight:500;line-height:20px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.floor-select{width:155px;height:44px;border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d;position:relative;display:flex;justify-content:space-between;padding:10px 16px;cursor:pointer;color:#344054;font-size:14px;font-weight:600;line-height:20px}.floor-select ul{width:240px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;position:absolute;top:45px;left:0;background:#fff;z-index:4}.floor-select ul li{position:relative;padding:10px 16px;color:#1d2939;font-size:14px;font-weight:500;line-height:20px;align-items:center;cursor:pointer}.floor-select ul li .option{width:200px;position:absolute;padding:10px 16px;background:#fef3f2;color:#d92d20;font-size:14px;font-weight:500;line-height:20px;right:-200px;top:0}.floor-select ul li:hover,.floor-select ul .selected{background:#f2f4f7}.selected-element{border:1px solid #008EDF!important}td .drag-handler svg{display:none}td .drag-handler:hover svg{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i8.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }] });
1791
1791
  }
1792
1792
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateLayoutComponent, decorators: [{
1793
1793
  type: Component,