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/manage-store-plano/plano-rollout/plano-rollout.component.mjs CHANGED
@@ -2518,7 +2518,7 @@ export class PlanoRolloutComponent {
2518
2518
  this.destroy$.complete();
2519
2519
  }
2520
2520
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoRolloutComponent, deps: [{ token: i1.StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i3.GlobalStateService }, { token: i4.TitleCasePipe }, { token: i5.ToastService }, { token: i6.NgbModal }, { token: i3.PageInfoService }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
2521
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoRolloutComponent, selector: "lib-plano-rollout", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\"><ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container></div>\r\n <div class=\"col-9\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n <div class=\"col-3\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-----------Header Accordion---------->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n <lib-reactive-select \r\n *ngIf=\"planoData?.floors?.length && !selectedFixtureData\"\r\n [formControl]=\"selectedFloorId\" \r\n [idField]=\"'_id'\" \r\n [nameField]=\"'floorNum'\"\r\n [data]=\"planoData?.floors\"\r\n ></lib-reactive-select>\r\n </div>\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" [disabled]=\"isSaveButtonDisabled()\" (click)=\"onFixtureSave()\">Save & Close</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!editFixture\">\r\n <button *ngIf=\"publishingState === 'merch'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('merchRollout')\">\r\n Publish Merch Rollout\r\n </button>\r\n <button *ngIf=\"publishingState === 'merch-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('merchRollout')\">\r\n Publish Merch Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('vmRollout')\">\r\n Publish VM Rollout\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('vmRollout')\">\r\n Publish VM Redo\r\n </button>\r\n <button (click)=\"revokeTask()\" *ngIf=\"(publishingState === 'merch' || publishingState === 'merch-redo') && !getRevokeButtonStatus('merchRollout')\" class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke</button>\r\n <button (click)=\"revokeTask()\" *ngIf=\"(publishingState === 'vm' || publishingState === 'vm-redo') && !getRevokeButtonStatus('vmRollout')\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke</button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" *ngIf=\"((taskStyle.fixture.class === 'completed' && rolloutSection == 'merch' && !floorData?.merchRolloutStatus && !this.taskInfo?.vmCount) || (taskStyle.vm.class === 'completed' && rolloutSection == 'vm' && !floorData?.vmRolloutStatus && !this.taskInfo?.merchCount))\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div id=\"header\">\r\n <div *ngIf=\"!selectedFixtureData\" class=\"row mx-0 gap-3\">\r\n <div class=\"col\">\r\n <div (click)=\"onTabChange('merch')\" [ngClass]=\"{'selected': rolloutSection === 'merch'}\"\r\n class=\"rollout-card\">\r\n <div class=\"top\">\r\n <h3>{{storeMetrics.fixtureCount}}</h3>\r\n <span>Total Merchandise Fixture</span>\r\n <span *ngIf=\"taskStyle.fixture.class === 'completed'\">\r\n <div class=\"indicator ms-3\" [ngClass]=\"taskStyle.fixture.class\">\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </span>\r\n </div>\r\n <div class=\"bottom\">\r\n <h4>{{taskInfo?.merchCount || 0}}</h4>\r\n <span>Rollout</span>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.fixture.class\" *ngIf=\"taskStyle.fixture.class !== 'completed'\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div (click)=\"onTabChange('vm')\" [ngClass]=\"{'selected': rolloutSection === 'vm'}\"\r\n class=\"rollout-card\">\r\n <div class=\"top\">\r\n <h3>{{storeMetrics.vmCount}}</h3>\r\n <span>Total Visual Merchandise</span>\r\n <span *ngIf=\"taskStyle.vm.class === 'completed'\">\r\n <div class=\"indicator ms-3\" [ngClass]=\"taskStyle.vm.class\">\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </span>\r\n </div>\r\n <div class=\"bottom\">\r\n <h4>{{taskInfo?.vmCount || 0}}</h4>\r\n <span>Rollout</span>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\" *ngIf=\"taskStyle.vm.class !== 'completed'\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"selectedFixtureData\" class=\"row mx-0 g-0\">\r\n <div class=\"col\">\r\n <div class=\"selected-fixture-header\">\r\n <div class=\"t1\">{{selectedFixtureData?.header?.label}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n {{ selectedFixtureData?.fixtureCategory }}\r\n </div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t2\">{{selectedFixtureData?.fixtureLength?.value}} X\r\n {{selectedFixtureData?.fixtureWidth?.value}} {{selectedFixtureData?.fixtureWidth?.unit}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t2\">{{selectedFixtureData?.associatedElementNumber ? 'Wall' : 'Centre'}}\r\n {{selectedFixtureData?.associatedElementFixtureNumber}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t3\">Product Capacity: {{selectedFixtureData?.fixtureCapacity}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t3\">VM Capacity: {{selectedFixtureData?.vmConfig?.length}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!----------------Body------------------->\r\n <div id=\"body\" class=\"row\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <!-- Left Col -->\r\n\r\n\r\n <!-- Center Col -->\r\n <div class=\"col overflow-hidden position-relative\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n <!-- <button [disabled]=\"disableEdit\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button> -->\r\n\r\n </div>\r\n\r\n <!-- <div class=\"collapse-handler left\" (click)=\"isLeftPanelCollapsed = !isLeftPanelCollapsed; resizeCanvasToParentSize()\">\r\n <svg\r\n *ngIf=\"!isLeftPanelCollapsed\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 18 18\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\"\r\n stroke-width=\"1.45455\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <svg\r\n *ngIf=\"isLeftPanelCollapsed\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 18 18\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\"\r\n stroke-width=\"1.45455\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div> -->\r\n <div class=\"collapse-handler right\"\r\n (click)=\"isRightPanelCollapsed = !isRightPanelCollapsed; resizeCanvasToParentSize()\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Col -->\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"> </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-----------Edit fixture body----------->\r\n <div id=\"edit-body\" class=\"row\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col-9\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"></lib-instance-basic-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"rolloutSection === 'merch'\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n [isRollout]=\"true\"></lib-instance-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"rolloutSection === 'vm'\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\" [isRollout]=\"true\"></lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"> </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\">\r\n <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed }\" [currentPlano]=\"floorData\"\r\n [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n (isApproved)=\"handleApproverResponse($event)\"></app-manage-store-plano-feedback> -->\r\n <lib-rollout-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed }\" [currentPlano]=\"floorData\"\r\n [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\" [taskInfo]=\"taskInfo\"\r\n (isApproved)=\"handleApproverResponse($event)\" [rolloutSection]=\"rolloutSection\"></lib-rollout-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}.rollout-card{--outline: #d0d5dd;--top-background: #f9fafb;border:1px solid var(--outline);border-radius:12px;background:#fff;padding:8px 8px 12px;cursor:pointer}.rollout-card.selected{--outline: #33b5ff;--top-background: #eaf8ff}.rollout-card .top,.rollout-card .bottom{display:flex;align-items:center;padding:8px 24px}.rollout-card .top{border-radius:6px;background:var(--top-background)}.rollout-card .top h3{margin:0 12px 0 0;font-family:Inter,sans-serif;font-size:24px;font-weight:600;color:#101828}.rollout-card .top span{font-size:14px;font-weight:500;color:#344054}.rollout-card .bottom h4{margin:0 12px 0 0;font-size:20px;font-weight:600;color:#101828}.rollout-card .bottom span{margin-right:12px;font-size:14px;font-weight:500;color:#101828}.selected-fixture-header{display:flex;align-items:center;padding:12px;border-radius:8px;background:#f9fafb}.selected-fixture-header .t1,.selected-fixture-header .t2,.selected-fixture-header .t3,.selected-fixture-header .dot,.selected-fixture-header .indicator{margin-right:12px;font-size:18px}.selected-fixture-header .t1{color:#1d2939;font-weight:600}.selected-fixture-header .t2{color:#475467;font-weight:400}.selected-fixture-header .t3{color:#039855;font-weight:400}.selected-fixture-header .dot{width:4px;height:4px;background-color:#98a2b3;border-radius:50%;display:inline-block}.btn-red{border-radius:8px!important;border:1px solid #FEF3F2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}\n"], dependencies: [{ kind: "component", type: i7.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i6.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i6.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i6.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i6.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i6.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: i9.InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: i10.InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: i11.InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: i12.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: i13.RolloutFeedbackComponent, selector: "lib-rollout-feedback", inputs: ["currentPlano", "storeFeedback", "selectedIssue", "taskInfo", "rolloutSection"], outputs: ["isApproved"] }] });
2521
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoRolloutComponent, selector: "lib-plano-rollout", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }], ngImport: i0, template: "<section id=\"manage-plano\">\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\"><ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container></div>\r\n <div class=\"col-9\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n <div class=\"col-3\"><ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container></div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <!-----------Header Accordion---------->\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\" *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\" [selectedValues]=\"[selectedStoreName]\"\r\n [items]=\"storeList\" [multi]=false searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n <lib-reactive-select \r\n *ngIf=\"planoData?.floors?.length && !selectedFixtureData\"\r\n [formControl]=\"selectedFloorId\" \r\n [idField]=\"'_id'\" \r\n [nameField]=\"'floorNum'\"\r\n [data]=\"planoData?.floors\"\r\n ></lib-reactive-select>\r\n </div>\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <ng-container *ngIf=\"editFixture\">\r\n <button type=\"button\" class=\"btn btn-outline text-nowrap\" (click)=\"onFixturePageCancel()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" [disabled]=\"isSaveButtonDisabled()\" (click)=\"onFixtureSave()\">Save & Close</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!editFixture\">\r\n <button *ngIf=\"publishingState === 'merch'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('merchRollout')\">\r\n Publish Merch Rollout\r\n </button>\r\n <button *ngIf=\"publishingState === 'merch-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('merchRollout')\">\r\n Publish Merch Redo\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('vmRollout')\">\r\n Publish VM Rollout\r\n </button>\r\n <button *ngIf=\"publishingState === 'vm-redo'\" type=\"button\" class=\"btn btn-primary text-nowrap\"\r\n (click)=\"assignTask()\" [disabled]=\"getBtnStatus('vmRollout')\">\r\n Publish VM Redo\r\n </button>\r\n <button (click)=\"revokeTask()\" *ngIf=\"(publishingState === 'merch' || publishingState === 'merch-redo') && !getRevokeButtonStatus('merchRollout')\" class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke</button>\r\n <button (click)=\"revokeTask()\" *ngIf=\"(publishingState === 'vm' || publishingState === 'vm-redo') && !getRevokeButtonStatus('vmRollout')\"\r\n class=\"btn btn-red d-flex align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_640_5594)\">\r\n <path\r\n d=\"M6.66669 10.0013H13.3334M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_640_5594\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Revoke</button>\r\n <button type=\"button\" class=\"btn btn-primary text-nowrap\" *ngIf=\"((taskStyle.fixture.class === 'completed' && rolloutSection == 'merch' && !floorData?.merchRolloutStatus && !this.taskInfo?.vmCount) || (taskStyle.vm.class === 'completed' && rolloutSection == 'vm' && !floorData?.vmRolloutStatus && !this.taskInfo?.merchCount))\"\r\n (click)=\"publish()\">\r\n Publish\r\n </button>\r\n </ng-container>\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div id=\"header\">\r\n <div *ngIf=\"!selectedFixtureData\" class=\"row mx-0 gap-3\">\r\n <div class=\"col\">\r\n <div (click)=\"onTabChange('merch')\" [ngClass]=\"{'selected': rolloutSection === 'merch'}\"\r\n class=\"rollout-card\">\r\n <div class=\"top\">\r\n <h3>{{storeMetrics.fixtureCount}}</h3>\r\n <span>Total Merchandise Fixture</span>\r\n <span *ngIf=\"taskStyle.fixture.class === 'completed'\">\r\n <div class=\"indicator ms-3\" [ngClass]=\"taskStyle.fixture.class\">\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </span>\r\n </div>\r\n <div class=\"bottom\">\r\n <h4>{{taskInfo?.merchCount || 0}}</h4>\r\n <span>Rollout</span>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.fixture.class\" *ngIf=\"taskStyle.fixture.class !== 'completed'\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.fixture.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.fixture.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.fixture.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div (click)=\"onTabChange('vm')\" [ngClass]=\"{'selected': rolloutSection === 'vm'}\"\r\n class=\"rollout-card\">\r\n <div class=\"top\">\r\n <h3>{{storeMetrics.vmCount}}</h3>\r\n <span>Total Visual Merchandise</span>\r\n <span *ngIf=\"taskStyle.vm.class === 'completed'\">\r\n <div class=\"indicator ms-3\" [ngClass]=\"taskStyle.vm.class\">\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </span>\r\n </div>\r\n <div class=\"bottom\">\r\n <h4>{{taskInfo?.vmCount || 0}}</h4>\r\n <span>Rollout</span>\r\n <div class=\"indicator\" [ngClass]=\"taskStyle.vm.class\" *ngIf=\"taskStyle.vm.class !== 'completed'\">\r\n <span class=\"me-2\" [hidden]=\"taskStyle.vm.name !== 'Redo'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_4984_27569)\">\r\n <path\r\n d=\"M0.5 2.00077V5.00077M0.5 5.00077H3.5M0.5 5.00077L2.82 2.82077C3.35737 2.28313 4.02219 1.89037 4.7524 1.67916C5.48262 1.46794 6.25445 1.44515 6.99586 1.6129C7.73727 1.78065 8.4241 2.13349 8.99227 2.63848C9.56043 3.14347 9.99142 3.78416 10.245 4.50077M11.5 10.0008V7.00077M11.5 7.00077H8.5M11.5 7.00077L9.18 9.18077C8.64263 9.71841 7.97781 10.1112 7.2476 10.3224C6.51738 10.5336 5.74555 10.5564 5.00414 10.3886C4.26273 10.2209 3.5759 9.86805 3.00773 9.36306C2.43957 8.85807 2.00858 8.21738 1.755 7.50077\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4984_27569\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span [hidden]=\"taskStyle.vm.name !== 'Flagged'\" class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2 7.5C2 7.5 2.5 7 4 7C5.5 7 6.5 8 8 8C9.5 8 10 7.5 10 7.5V1.5C10 1.5 9.5 2 8 2C6.5 2 5.5 1 4 1C2.5 1 2 1.5 2 1.5V7.5ZM2 7.5V11\"\r\n stroke=\"#B42318\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n {{ taskStyle.vm.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"selectedFixtureData\" class=\"row mx-0 g-0\">\r\n <div class=\"col\">\r\n <div class=\"selected-fixture-header\">\r\n <div class=\"t1\">{{selectedFixtureData?.header?.label}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"indicator mt-2\" [ngClass]=\"taskStyle.fixture.class\">\r\n {{ selectedFixtureData?.fixtureCategory }}\r\n </div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t2\">{{selectedFixtureData?.fixtureLength?.value}} X\r\n {{selectedFixtureData?.fixtureWidth?.value}} {{selectedFixtureData?.fixtureWidth?.unit}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t2\">{{selectedFixtureData?.associatedElementNumber ? 'Wall' : 'Centre'}}\r\n {{selectedFixtureData?.associatedElementFixtureNumber}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t3\">Product Capacity: {{selectedFixtureData?.fixtureCapacity}}</div>\r\n <div class=\"dot\"></div>\r\n <div class=\"t3\">VM Capacity: {{selectedFixtureData?.vmConfig?.length}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!----------------Body------------------->\r\n <div id=\"body\" class=\"row\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n <!-- Left Col -->\r\n\r\n\r\n <!-- Center Col -->\r\n <div class=\"col overflow-hidden position-relative\">\r\n <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n <!-- <button [disabled]=\"disableEdit\" style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"onClickEdit()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1322_5325)\">\r\n <path\r\n d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1322_5325\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n Edit\r\n </button> -->\r\n\r\n </div>\r\n\r\n <!-- <div class=\"collapse-handler left\" (click)=\"isLeftPanelCollapsed = !isLeftPanelCollapsed; resizeCanvasToParentSize()\">\r\n <svg\r\n *ngIf=\"!isLeftPanelCollapsed\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 18 18\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\"\r\n stroke-width=\"1.45455\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <svg\r\n *ngIf=\"isLeftPanelCollapsed\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 18 18\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\"\r\n stroke-width=\"1.45455\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div> -->\r\n <div class=\"collapse-handler right\"\r\n (click)=\"isRightPanelCollapsed = !isRightPanelCollapsed; resizeCanvasToParentSize()\">\r\n <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Col -->\r\n <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"> </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-----------Edit fixture body----------->\r\n <div id=\"edit-body\" class=\"row\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Basic details\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Products\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n Visual Merchandise\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"col-9\">\r\n <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"false\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"></lib-instance-basic-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"rolloutSection === 'merch'\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n [isRollout]=\"true\"></lib-instance-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"rolloutSection === 'vm'\"\r\n [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\" [isRollout]=\"true\"></lib-instance-vms>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-3\">\r\n <ng-container *ngTemplateOutlet=\"feedbackCol\"> </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<ng-template #feedbackCol>\r\n <div class=\"s-card\">\r\n <!-- <app-manage-store-plano-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed }\" [currentPlano]=\"floorData\"\r\n [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\"\r\n (isApproved)=\"handleApproverResponse($event)\"></app-manage-store-plano-feedback> -->\r\n <lib-rollout-feedback [ngClass]=\"{ 'd-none': isRightPanelCollapsed }\" [currentPlano]=\"floorData\"\r\n [storeFeedback]=\"storeFeedback\" [selectedIssue]=\"selectedFixture\" [taskInfo]=\"taskInfo\"\r\n (isApproved)=\"handleApproverResponse($event)\" [rolloutSection]=\"rolloutSection\"></lib-rollout-feedback>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <br />\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backgroundImg{background-color:#f9fafb!important}::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}::ng-deep .accordion-body{padding:10px 20px 20px}.s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}.c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}.h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}.wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}img{width:100%;height:100%;object-fit:cover;display:block}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}.loader .shimmer{height:100%!important}.collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}.collapse-handler.right{right:0}.collapse-handler.left{left:0}.collapsed-col{transition:all .3s ease;width:40px!important}[class^=col]{transition:all .3s ease}.rollout-card{--outline: #d0d5dd;--top-background: #f9fafb;border:1px solid var(--outline);border-radius:12px;background:#fff;padding:8px 8px 12px;cursor:pointer}.rollout-card.selected{--outline: #33b5ff;--top-background: #eaf8ff}.rollout-card .top,.rollout-card .bottom{display:flex;align-items:center;padding:8px 24px}.rollout-card .top{border-radius:6px;background:var(--top-background)}.rollout-card .top h3{margin:0 12px 0 0;font-family:Inter,sans-serif;font-size:24px;font-weight:600;color:#101828}.rollout-card .top span{font-size:14px;font-weight:500;color:#344054}.rollout-card .bottom h4{margin:0 12px 0 0;font-size:20px;font-weight:600;color:#101828}.rollout-card .bottom span{margin-right:12px;font-size:14px;font-weight:500;color:#101828}.selected-fixture-header{display:flex;align-items:center;padding:12px;border-radius:8px;background:#f9fafb}.selected-fixture-header .t1,.selected-fixture-header .t2,.selected-fixture-header .t3,.selected-fixture-header .dot,.selected-fixture-header .indicator{margin-right:12px;font-size:18px}.selected-fixture-header .t1{color:#1d2939;font-weight:600}.selected-fixture-header .t2{color:#475467;font-weight:400}.selected-fixture-header .t3{color:#039855;font-weight:400}.selected-fixture-header .dot{width:4px;height:4px;background-color:#98a2b3;border-radius:50%;display:inline-block}.btn-red{border-radius:8px!important;border:1px solid #FEF3F2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}\n"], dependencies: [{ kind: "component", type: i7.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i6.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i6.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i6.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i6.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i6.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: i9.InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: i10.InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: i11.InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: i12.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: i13.RolloutFeedbackComponent, selector: "lib-rollout-feedback", inputs: ["currentPlano", "storeFeedback", "selectedIssue", "taskInfo", "rolloutSection"], outputs: ["isApproved"] }] });
2522
2522
  }
2523
2523
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoRolloutComponent, decorators: [{
2524
2524
  type: Component,