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/custom-select/custom-select.component.mjs CHANGED
@@ -19,6 +19,7 @@ export class CustomSelectComponent {
19
19
  selectedValues = [];
20
20
  disabled;
21
21
  label;
22
+ compact = false;
22
23
  selected = new EventEmitter();
23
24
  filteredValues = [];
24
25
  showDropdown;
@@ -127,11 +128,11 @@ export class CustomSelectComponent {
127
128
  return this.filteredValues.every((item) => item.isSelected);
128
129
  }
129
130
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.StoreBuilderService }], target: i0.ɵɵFactoryTarget.Component });
130
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomSelectComponent, selector: "lib-select-plano", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n {{selectedValues?.length}} {{label}} Selected \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" for=\"selectAll\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
131
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomSelectComponent, selector: "lib-select-plano", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label", compact: "compact" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\" [class.compact]=\"compact\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n {{selectedValues?.length}} {{label}} Selected \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" for=\"selectAll\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container.compact{min-width:0}.outer-container.compact .form-select{height:30px;font-size:13px;font-weight:500;padding:4px 10px;display:flex;align-items:center}.outer-container.compact .input-container .input-wrapper{padding:6px}.outer-container.compact .input-container .input-wrapper input{padding:6px 10px 6px 28px;font-size:12px}.outer-container.compact .input-container .input-wrapper .search-icon{left:14px;top:14px}.outer-container.compact .input-container ul{max-height:180px}.outer-container.compact .input-container ul li{padding:4px 10px}.outer-container.compact .input-container ul li .form-check-label{font-size:12px;line-height:16px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
131
132
  }
132
133
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomSelectComponent, decorators: [{
133
134
  type: Component,
134
- args: [{ selector: 'lib-select-plano', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n {{selectedValues?.length}} {{label}} Selected \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" for=\"selectAll\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
135
+ args: [{ selector: 'lib-select-plano', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\" [class.compact]=\"compact\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n {{selectedValues?.length}} {{label}} Selected \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" for=\"selectAll\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff;min-width:200px;border-radius:8px}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container.compact{min-width:0}.outer-container.compact .form-select{height:30px;font-size:13px;font-weight:500;padding:4px 10px;display:flex;align-items:center}.outer-container.compact .input-container .input-wrapper{padding:6px}.outer-container.compact .input-container .input-wrapper input{padding:6px 10px 6px 28px;font-size:12px}.outer-container.compact .input-container .input-wrapper .search-icon{left:14px;top:14px}.outer-container.compact .input-container ul{max-height:180px}.outer-container.compact .input-container ul li{padding:4px 10px}.outer-container.compact .input-container ul li .form-check-label{font-size:12px;line-height:16px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
135
136
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.StoreBuilderService }], propDecorators: { onClick: [{
136
137
  type: HostListener,
137
138
  args: ['document:click', ['$event']]
@@ -149,7 +150,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
149
150
  type: Input
150
151
  }], label: [{
151
152
  type: Input
153
+ }], compact: [{
154
+ type: Input
152
155
  }], selected: [{
153
156
  type: Output
154
157
  }] } });
155
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLXNlbGVjdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90YW5nby1zdG9yZS1idWlsZGVyL3NyYy9saWIvY29tcG9uZW50cy9jdXN0b20tc2VsZWN0L2N1c3RvbS1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdGFuZ28tc3RvcmUtYnVpbGRlci9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLXNlbGVjdC9jdXN0b20tc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBcUIsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7OztBQVNuSyxNQUFNLE9BQU8scUJBQXFCO0lBeUJaO0lBQStCO0lBdEJuRCxPQUFPLENBQUMsS0FBaUI7UUFDdkIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQXFCLENBQUM7UUFDM0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLEVBQUU7WUFDaEMsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7U0FDM0I7SUFDSCxDQUFDO0lBRVEsS0FBSyxDQUFLO0lBQ1YsV0FBVyxDQUFRO0lBQ25CLEtBQUssQ0FBUztJQUNkLE9BQU8sQ0FBUTtJQUNmLGNBQWMsR0FBUSxFQUFFLENBQUE7SUFDeEIsUUFBUSxDQUFxQjtJQUM3QixLQUFLLENBQVE7SUFFWixRQUFRLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtJQUM1QyxjQUFjLEdBQVEsRUFBRSxDQUFBO0lBQ3hCLFlBQVksQ0FBUztJQUNyQixXQUFXLENBQVE7SUFDbkIsVUFBVSxDQUFNO0lBR2hCLFlBQW9CLEVBQXFCLEVBQVUsV0FBK0I7UUFBOUQsT0FBRSxHQUFGLEVBQUUs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QyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDbkUsQ0FBQzt3R0ExSVUscUJBQXFCOzRGQUFyQixxQkFBcUIsa1ZDVGxDLDZnRkF5Q007OzRGRGhDTyxxQkFBcUI7a0JBTmpDLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU07d0hBSy9DLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFRakMsS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFN0b3JlQnVpbGRlclNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9zdG9yZS1idWlsZGVyLnNlcnZpY2UnO1xyXG4gXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXNlbGVjdC1wbGFubycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2N1c3RvbS1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9jdXN0b20tc2VsZWN0LmNvbXBvbmVudC5zY3NzJyxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIEN1c3RvbVNlbGVjdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcywgT25Jbml0IHtcclxuIFxyXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmNsaWNrJywgWyckZXZlbnQnXSlcclxuICBvbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XHJcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XHJcbiAgICBpZiAoIXRhcmdldC5jbG9zZXN0KCcuZHJvcGRvd24nKSkge1xyXG4gICAgICB0aGlzLnNob3dEcm9wZG93biA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxuIFxyXG4gIEBJbnB1dCgpIGl0ZW1zOiBhbnlcclxuICBASW5wdXQoKSBzZWFyY2hGaWVsZDogc3RyaW5nXHJcbiAgQElucHV0KCkgbXVsdGk6IGJvb2xlYW5cclxuICBASW5wdXQoKSBpZEZpZWxkOiBzdHJpbmdcclxuICBASW5wdXQoKSBzZWxlY3RlZFZhbHVlczogYW55ID0gW11cclxuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiB8IHVuZGVmaW5lZFxyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmdcclxuIFxyXG4gIEBPdXRwdXQoKSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpXHJcbiAgZmlsdGVyZWRWYWx1ZXM6IGFueSA9IFtdXHJcbiAgc2hvd0Ryb3Bkb3duOiBib29sZWFuXHJcbiAgc2VhcmNoVmFsdWU6IHN0cmluZ1xyXG4gIGluc3RhbmNlSWQ6IGFueTtcclxuIFxyXG4gXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZDogQ2hhbmdlRGV0ZWN0b3JSZWYsIHByaXZhdGUgYXV0aFNlcnZpY2U6U3RvcmVCdWlsZGVyU2VydmljZSkgeyB9XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmluc3RhbmNlSWQgPSBjcnlwdG8ucmFuZG9tVVVJRCgpO1xyXG4gICAgdGhpcy5hdXRoU2VydmljZS5kcm9wRG93blRyaWdnZXIuc3Vic2NyaWJlKChlKT0+eyAgICAgICAgICAgXHJcbiAgICAgIGlmKGUgIT09IHRoaXMuaW5zdGFuY2VJZCl7ICAgICAgICBcclxuICAgICAgICB0aGlzLnNob3dEcm9wZG93biA9IGZhbHNlXHJcbiAgICAgICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKClcclxuICAgICAgfVxyXG4gICAgfSlcclxuICB9XHJcbiBcclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiBcclxuICAgIGlmIChjaGFuZ2VzWydpdGVtcyddICYmIHRoaXMuaXRlbXM/Lmxlbmd0aCkge1xyXG4gICAgICB0aGlzLmluaXRpYWxpemVJdGVtcygpO1xyXG4gICAgfVxyXG4gICAgaWYgKGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10gJiYgQXJyYXkuaXNBcnJheShjaGFuZ2VzWydzZWxlY3RlZFZhbHVlcyddPy5jdXJyZW50VmFsdWUpICYmIGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10/LmN1cnJlbnRWYWx1ZT8ubGVuZ3RoID4gMCAmJiBjaGFuZ2VzWydzZWxlY3RlZFZhbHVlcyddPy5jdXJyZW50VmFsdWVbMF0pIHsgICAgICAgICAgICBcclxuICAgICAgdGhpcy51cGRhdGVTZWxlY3RlZFZhbHVlcygpO1xyXG4gICAgfVxyXG4gIH1cclxuIFxyXG4gIGluaXRpYWxpemVJdGVtcygpIHtcclxuICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMgPSB0aGlzLml0ZW1zLm1hcCgoaXRlbTogYW55KSA9PiAoeyAuLi5pdGVtIH0pKTtcclxuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRWYWx1ZXMoKVxyXG4gIH1cclxuIFxyXG4gIHVwZGF0ZVNlbGVjdGVkVmFsdWVzKCkgeyAgICBcclxuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXM/LmZvckVhY2goKHNlbGVjdGVkSXRlbTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IGl0ZW0gPSB0aGlzLmZpbHRlcmVkVmFsdWVzPy5maW5kKChmaWx0ZXJlZEl0ZW06IGFueSkgPT4gZmlsdGVyZWRJdGVtPy5bdGhpcy5pZEZpZWxkXSA9PT0gc2VsZWN0ZWRJdGVtPy5bdGhpcy5pZEZpZWxkXSk7XHJcbiAgICAgIGlmIChpdGVtKSB7XHJcbiAgICAgICAgaXRlbS5pc1NlbGVjdGVkID0gdHJ1ZTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgIFxyXG4gIH1cclxuIFxyXG4gIG9wZW5Ecm9wZG93bihldmVudDogYW55KSB7XHJcbiAgICB0aGlzLmF1dGhTZXJ2aWNlLmRyb3BEb3duVHJpZ2dlci5uZXh0KHRoaXMuaW5zdGFuY2VJZClcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5zaG93RHJvcGRvd24gPSAhdGhpcy5zaG93RHJvcGRvd247XHJcbiAgfVxyXG4gXHJcbiAgb25JbnB1dChldmVudDogYW55KSB7XHJcbiAgICBpZiAoIWV2ZW50LnRhcmdldC52YWx1ZSkge1xyXG4gICAgICB0aGlzLmZpbHRlcmVkVmFsdWVzID0gWy4uLnRoaXMuaXRlbXNdO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgY29uc3Qgc2VhcmNoVGVybSA9IGV2ZW50LnRhcmdldC52YWx1ZS50b0xvd2VyQ2FzZSgpO1xyXG4gICAgICB0aGlzLmZpbHRlcmVkVmFsdWVzID0gdGhpcy5pdGVtcy5maWx0ZXIoKGl0ZW06IGFueSkgPT5cclxuICAgICAgICBpdGVtW3RoaXMuc2VhcmNoRmllbGRdLnRvTG93ZXJDYXNlKCkuaW5jbHVkZXMoc2VhcmNoVGVybSlcclxuICAgICAgKTtcclxuICAgIH1cclxuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRWYWx1ZXMoKTtcclxuICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gIH1cclxuIFxyXG4gIG9uU2VsZWN0KGV2ZW50OiBhbnksIGl0ZW06IGFueSkgeyAgICBcclxuICAgIGlmICh0aGlzLm11bHRpKSB7XHJcbiAgICAgIGlmIChldmVudC5jdXJyZW50VGFyZ2V0LmNoZWNrZWQpIHtcclxuICAgICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzLnB1c2goaXRlbSApOyAgICAgICAgXHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlcyA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMuZmlsdGVyKChlbGVtOiBhbnkpID0+IGVsZW1bdGhpcy5pZEZpZWxkXSAhPT0gaXRlbVt0aGlzLmlkRmllbGRdKTtcclxuICAgICAgfVxyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlcyA9IFt7IC4uLml0ZW0gfV07XHJcbiAgICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMuZm9yRWFjaCgoZWxlbWVudDphbnkpID0+IHtcclxuICAgICAgICBpZihlbGVtZW50W3RoaXMuaWRGaWVsZF0gIT09IGl0ZW1bdGhpcy5pZEZpZWxkXSl7XHJcbiAgICAgICAgICBlbGVtZW50LmlzU2VsZWN0ZWQgPSBmYWxzZVxyXG4gICAgICAgIH1cclxuICAgICAgfSk7XHJcbiAgICAgIHRoaXMuc2hvd0Ryb3Bkb3duID0gZmFsc2U7XHJcbiAgICB9XHJcbiBcclxuICAgIGNvbnN0IHZhbHVlc1RvRW1pdCA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMubWFwKCh2YWx1ZTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IHNlbGVjdGVkSXRlbSA9IHsgLi4udmFsdWUgfTtcclxuICAgICAgZGVsZXRlIHNlbGVjdGVkSXRlbS5pc1NlbGVjdGVkO1xyXG4gICAgICByZXR1cm4gc2VsZWN0ZWRJdGVtO1xyXG4gICAgfSk7XHJcbiBcclxuICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gICAgdGhpcy5lbWl0U2VsZWN0ZWRWYWx1ZXModmFsdWVzVG9FbWl0KTtcclxuIFxyXG4gIH1cclxuIFxyXG4gIG9uU2VsZWN0QWxsKGV2ZW50OiBhbnkpIHtcclxuICAgIGNvbnN0IHNlbGVjdEFsbCA9IGV2ZW50LmN1cnJlbnRUYXJnZXQuY2hlY2tlZDtcclxuICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMuZm9yRWFjaCgoaXRlbTogYW55KSA9PiBpdGVtLmlzU2VsZWN0ZWQgPSBzZWxlY3RBbGwpO1xyXG4gXHJcbiAgICBpZiAoc2VsZWN0QWxsKSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXMgPSBbLi4udGhpcy5maWx0ZXJlZFZhbHVlc107XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzID0gW107XHJcbiAgICB9XHJcbiBcclxuICAgIGNvbnN0IHZhbHVlc1RvRW1pdCA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMubWFwKCh2YWx1ZTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IHsgaXNTZWxlY3RlZCwgLi4uc2VsZWN0ZWRJdGVtIH0gPSB2YWx1ZTtcclxuICAgICAgcmV0dXJuIHNlbGVjdGVkSXRlbTtcclxuICAgIH0pO1xyXG4gXHJcbiAgICB0aGlzLmNkLmRldGVjdENoYW5nZXMoKTtcclxuICAgIHRoaXMuZW1pdFNlbGVjdGVkVmFsdWVzKHZhbHVlc1RvRW1pdCk7XHJcbiAgfVxyXG4gXHJcbiBcclxuICBlbWl0U2VsZWN0ZWRWYWx1ZXModmFsdWVzOiBhbnlbXSkge1xyXG4gICAgaWYgKHRoaXMubXVsdGkpIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZC5lbWl0KHZhbHVlcyk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkLmVtaXQodmFsdWVzWzBdKTtcclxuICAgIH1cclxuICB9XHJcbiBcclxuICBjaGVja0lmQWxsU2VsZWN0ZWQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5maWx0ZXJlZFZhbHVlcy5ldmVyeSgoaXRlbTogYW55KSA9PiBpdGVtLmlzU2VsZWN0ZWQpO1xyXG4gIH1cclxufSIsIjxkaXYgY2xhc3M9XCJvdXRlci1jb250YWluZXJcIj5cclxuICAgIDxkaXYgW25nQ2xhc3NdPVwiZGlzYWJsZWQgPyAnZGlzYWJsZS1pbnB1dCc6JydcIiAgKGNsaWNrKT1cIm9wZW5Ecm9wZG93bigkZXZlbnQpXCIgIGNsYXNzPVwiZm9ybS1zZWxlY3RcIj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJtdWx0aVwiID5cclxuICAgIHt7c2VsZWN0ZWRWYWx1ZXM/Lmxlbmd0aH19IHt7bGFiZWx9fSBTZWxlY3RlZCAgICBcclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFtdWx0aVwiID5cclxuICAgICAgICB7e3NlbGVjdGVkVmFsdWVzPy5bMF0/LltzZWFyY2hGaWVsZF19fVxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgW25nQ2xhc3NdPVwic2hvd0Ryb3Bkb3duID8gJycgOiAnZC1ub25lJ1wiIGNsYXNzPVwiaW5wdXQtY29udGFpbmVyIGRyb3Bkb3duXCIgPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3LTEwMCBpbnB1dC13cmFwcGVyXCI+XHJcbiAgICAgICAgPGlucHV0IFsobmdNb2RlbCldPVwic2VhcmNoVmFsdWVcIiBwbGFjZWhvbGRlcj1cIlNlYXJjaFwiICAoaW5wdXQpPVwib25JbnB1dCgkZXZlbnQpXCIgdHlwZT1cInRleHRcIj4gIFxyXG4gICAgICAgIDxzdmcgY2xhc3M9XCJzZWFyY2gtaWNvblwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB3aWR0aD1cIjE2XCIgaGVpZ2h0PVwiMTdcIiB2aWV3Qm94PVwiMCAwIDE2IDE3XCIgZmlsbD1cIm5vbmVcIj5cclxuICAgICAgICAgICAgPHBhdGggZD1cIk0xNCAxNC41TDExLjEgMTEuNk0xMi42NjY3IDcuODMzMzNDMTIuNjY2NyAxMC43Nzg5IDEwLjI3ODkgMTMuMTY2NyA3LjMzMzMzIDEzLjE2NjdDNC4zODc4MSAxMy4xNjY3IDIgMTAuNzc4OSAyIDcuODMzMzNDMiA0Ljg4NzgxIDQuMzg3ODEgMi41IDcuMzMzMzMgMi41QzEwLjI3ODkgMi41IDEyLjY2NjcgNC44ODc4MSAxMi42NjY3IDcuODMzMzNaXCIgc3Ryb2tlPVwiIzY2NzA4NVwiIHN0cm9rZS13aWR0aD1cIjEuM1wiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIiBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiLz5cclxuICAgICAgICAgIDwvc3ZnPiAgXHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPHVsPlxyXG4gICAgICAgICAgICA8bGkgKm5nSWY9XCJtdWx0aSAmJiBmaWx0ZXJlZFZhbHVlcz8ubGVuZ3RoXCI+XHJcbiAgICAgICAgICAgICAgICA8bGFiZWwgY2xhc3M9XCJmb3JtLWNoZWNrXCIgZm9yPVwic2VsZWN0QWxsXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGlucHV0IChjaGFuZ2UpPVwib25TZWxlY3RBbGwoJGV2ZW50KVwiIFtjaGVja2VkXT1cImNoZWNrSWZBbGxTZWxlY3RlZCgpXCIgY2xhc3M9XCJmb3JtLWNoZWNrLWlucHV0IG1lLTNcIiB0eXBlPVwiY2hlY2tib3hcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBpZD1cInNlbGVjdEFsbFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZm9ybS1jaGVjay1sYWJlbFwiID5cclxuICAgICAgICAgICAgICAgICAgICAgICAgU2VsZWN0IEFsbFxyXG4gICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgICAgICAgIDwvbGFiZWw+XHJcbiAgICAgICAgICAgIDwvbGk+XHJcbiAgICAgICAgICAgIDxsaSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBmaWx0ZXJlZFZhbHVlc1wiIFtuZ0NsYXNzXT1cIml0ZW0uaXNTZWxlY3RlZCAmJiAhbXVsdGkgPyAnc2VsZWN0ZWQnIDogJydcIiA+XHJcbiAgICAgICAgICAgICAgICA8bGFiZWwgW2Zvcl09XCJpdGVtW2lkRmllbGRdICsgaW5zdGFuY2VJZFwiIFtuZ0NsYXNzXT1cIm11bHRpICA/ICcnOiAncHMtMCdcIiBjbGFzcz1cImZvcm0tY2hlY2tcIj5cclxuICAgICAgICAgICAgICAgICAgICA8aW5wdXQgW25nQ2xhc3NdPVwibXVsdGkgID8gJyc6ICdkLW5vbmUnXCIgKGNoYW5nZSk9XCJvblNlbGVjdCgkZXZlbnQsIGl0ZW0pXCIgWyhuZ01vZGVsKV09XCJpdGVtLmlzU2VsZWN0ZWRcIiBjbGFzcz1cImZvcm0tY2hlY2staW5wdXQgbWUtM1wiIHR5cGU9XCJjaGVja2JveFwiIHZhbHVlPVwiXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgW2lkXT1cIml0ZW1baWRGaWVsZF0gKyBpbnN0YW5jZUlkXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJmb3JtLWNoZWNrLWxhYmVsXCIgPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICB7e2l0ZW1bc2VhcmNoRmllbGRdfX1cclxuICAgICAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgICAgICA8L2xhYmVsPlxyXG4gICAgICAgICAgICA8L2xpPlxyXG4gICAgICAgICAgICA8bGkgKm5nSWY9XCIhZmlsdGVyZWRWYWx1ZXM/Lmxlbmd0aFwiID5cclxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNvbnRlbnQtY2VudGVyXCIgPk5vIGRhdGEgZm91bmQ8L3NwYW4+XHJcbiAgICAgICAgICAgIDwvbGk+XHJcbiAgICAgICAgPC91bD4gIFxyXG4gICAgPC9kaXY+ICBcclxuICAgXHJcbjwvZGl2PiJdfQ==
158
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLXNlbGVjdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90YW5nby1zdG9yZS1idWlsZGVyL3NyYy9saWIvY29tcG9uZW50cy9jdXN0b20tc2VsZWN0L2N1c3RvbS1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdGFuZ28tc3RvcmUtYnVpbGRlci9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLXNlbGVjdC9jdXN0b20tc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBcUIsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7OztBQVNuSyxNQUFNLE9BQU8scUJBQXFCO0lBMEJaO0lBQStCO0lBdkJuRCxPQUFPLENBQUMsS0FBaUI7UUFDdkIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQXFCLENBQUM7UUFDM0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLEVBQUU7WUFDaEMsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7U0FDM0I7SUFDSCxDQUFDO0lBRVEsS0FBSyxDQUFLO0lBQ1YsV0FBVyxDQUFRO0lBQ25CLEtBQUssQ0FBUztJQUNkLE9BQU8sQ0FBUTtJQUNmLGNBQWMsR0FBUSxFQUFFLENBQUE7SUFDeEIsUUFBUSxDQUFxQjtJQUM3QixLQUFLLENBQVE7SUFDYixPQUFPLEdBQVksS0FBSyxDQUFBO0lBRXZCLFFBQVEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFBO0lBQzVDLGNBQWMsR0FBUSxFQUFFLENBQUE7SUFDeEIsWUFBWSxDQUFTO0lBQ3JCLFdBQVcsQ0FBUTtJQUNuQixVQUFVLENBQU07SUFHaEIsWUFBb0IsRUFBcUIsRUFBVSxX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QUMsQ0FBQyxJQUFTLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNuRSxDQUFDO3dHQTNJVSxxQkFBcUI7NEZBQXJCLHFCQUFxQixzV0NUbEMseWlGQXlDTTs7NEZEaENPLHFCQUFxQjtrQkFOakMsU0FBUzsrQkFDRSxrQkFBa0IsbUJBR1gsdUJBQXVCLENBQUMsTUFBTTt3SEFLL0MsT0FBTztzQkFETixZQUFZO3VCQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVFqQyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUVJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFN0b3JlQnVpbGRlclNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9zdG9yZS1idWlsZGVyLnNlcnZpY2UnO1xyXG4gXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXNlbGVjdC1wbGFubycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2N1c3RvbS1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9jdXN0b20tc2VsZWN0LmNvbXBvbmVudC5zY3NzJyxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIEN1c3RvbVNlbGVjdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcywgT25Jbml0IHtcclxuIFxyXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmNsaWNrJywgWyckZXZlbnQnXSlcclxuICBvbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XHJcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XHJcbiAgICBpZiAoIXRhcmdldC5jbG9zZXN0KCcuZHJvcGRvd24nKSkge1xyXG4gICAgICB0aGlzLnNob3dEcm9wZG93biA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxuIFxyXG4gIEBJbnB1dCgpIGl0ZW1zOiBhbnlcclxuICBASW5wdXQoKSBzZWFyY2hGaWVsZDogc3RyaW5nXHJcbiAgQElucHV0KCkgbXVsdGk6IGJvb2xlYW5cclxuICBASW5wdXQoKSBpZEZpZWxkOiBzdHJpbmdcclxuICBASW5wdXQoKSBzZWxlY3RlZFZhbHVlczogYW55ID0gW11cclxuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiB8IHVuZGVmaW5lZFxyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmdcclxuICBASW5wdXQoKSBjb21wYWN0OiBib29sZWFuID0gZmFsc2VcclxuIFxyXG4gIEBPdXRwdXQoKSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpXHJcbiAgZmlsdGVyZWRWYWx1ZXM6IGFueSA9IFtdXHJcbiAgc2hvd0Ryb3Bkb3duOiBib29sZWFuXHJcbiAgc2VhcmNoVmFsdWU6IHN0cmluZ1xyXG4gIGluc3RhbmNlSWQ6IGFueTtcclxuIFxyXG4gXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZDogQ2hhbmdlRGV0ZWN0b3JSZWYsIHByaXZhdGUgYXV0aFNlcnZpY2U6U3RvcmVCdWlsZGVyU2VydmljZSkgeyB9XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmluc3RhbmNlSWQgPSBjcnlwdG8ucmFuZG9tVVVJRCgpO1xyXG4gICAgdGhpcy5hdXRoU2VydmljZS5kcm9wRG93blRyaWdnZXIuc3Vic2NyaWJlKChlKT0+eyAgICAgICAgICAgXHJcbiAgICAgIGlmKGUgIT09IHRoaXMuaW5zdGFuY2VJZCl7ICAgICAgICBcclxuICAgICAgICB0aGlzLnNob3dEcm9wZG93biA9IGZhbHNlXHJcbiAgICAgICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKClcclxuICAgICAgfVxyXG4gICAgfSlcclxuICB9XHJcbiBcclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiBcclxuICAgIGlmIChjaGFuZ2VzWydpdGVtcyddICYmIHRoaXMuaXRlbXM/Lmxlbmd0aCkge1xyXG4gICAgICB0aGlzLmluaXRpYWxpemVJdGVtcygpO1xyXG4gICAgfVxyXG4gICAgaWYgKGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10gJiYgQXJyYXkuaXNBcnJheShjaGFuZ2VzWydzZWxlY3RlZFZhbHVlcyddPy5jdXJyZW50VmFsdWUpICYmIGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10/LmN1cnJlbnRWYWx1ZT8ubGVuZ3RoID4gMCAmJiBjaGFuZ2VzWydzZWxlY3RlZFZhbHVlcyddPy5jdXJyZW50VmFsdWVbMF0pIHsgICAgICAgICAgICBcclxuICAgICAgdGhpcy51cGRhdGVTZWxlY3RlZFZhbHVlcygpO1xyXG4gICAgfVxyXG4gIH1cclxuIFxyXG4gIGluaXRpYWxpemVJdGVtcygpIHtcclxuICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMgPSB0aGlzLml0ZW1zLm1hcCgoaXRlbTogYW55KSA9PiAoeyAuLi5pdGVtIH0pKTtcclxuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRWYWx1ZXMoKVxyXG4gIH1cclxuIFxyXG4gIHVwZGF0ZVNlbGVjdGVkVmFsdWVzKCkgeyAgICBcclxuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXM/LmZvckVhY2goKHNlbGVjdGVkSXRlbTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IGl0ZW0gPSB0aGlzLmZpbHRlcmVkVmFsdWVzPy5maW5kKChmaWx0ZXJlZEl0ZW06IGFueSkgPT4gZmlsdGVyZWRJdGVtPy5bdGhpcy5pZEZpZWxkXSA9PT0gc2VsZWN0ZWRJdGVtPy5bdGhpcy5pZEZpZWxkXSk7XHJcbiAgICAgIGlmIChpdGVtKSB7XHJcbiAgICAgICAgaXRlbS5pc1NlbGVjdGVkID0gdHJ1ZTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgIFxyXG4gIH1cclxuIFxyXG4gIG9wZW5Ecm9wZG93bihldmVudDogYW55KSB7XHJcbiAgICB0aGlzLmF1dGhTZXJ2aWNlLmRyb3BEb3duVHJpZ2dlci5uZXh0KHRoaXMuaW5zdGFuY2VJZClcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5zaG93RHJvcGRvd24gPSAhdGhpcy5zaG93RHJvcGRvd247XHJcbiAgfVxyXG4gXHJcbiAgb25JbnB1dChldmVudDogYW55KSB7XHJcbiAgICBpZiAoIWV2ZW50LnRhcmdldC52YWx1ZSkge1xyXG4gICAgICB0aGlzLmZpbHRlcmVkVmFsdWVzID0gWy4uLnRoaXMuaXRlbXNdO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgY29uc3Qgc2VhcmNoVGVybSA9IGV2ZW50LnRhcmdldC52YWx1ZS50b0xvd2VyQ2FzZSgpO1xyXG4gICAgICB0aGlzLmZpbHRlcmVkVmFsdWVzID0gdGhpcy5pdGVtcy5maWx0ZXIoKGl0ZW06IGFueSkgPT5cclxuICAgICAgICBpdGVtW3RoaXMuc2VhcmNoRmllbGRdLnRvTG93ZXJDYXNlKCkuaW5jbHVkZXMoc2VhcmNoVGVybSlcclxuICAgICAgKTtcclxuICAgIH1cclxuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRWYWx1ZXMoKTtcclxuICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gIH1cclxuIFxyXG4gIG9uU2VsZWN0KGV2ZW50OiBhbnksIGl0ZW06IGFueSkgeyAgICBcclxuICAgIGlmICh0aGlzLm11bHRpKSB7XHJcbiAgICAgIGlmIChldmVudC5jdXJyZW50VGFyZ2V0LmNoZWNrZWQpIHtcclxuICAgICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzLnB1c2goaXRlbSApOyAgICAgICAgXHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlcyA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMuZmlsdGVyKChlbGVtOiBhbnkpID0+IGVsZW1bdGhpcy5pZEZpZWxkXSAhPT0gaXRlbVt0aGlzLmlkRmllbGRdKTtcclxuICAgICAgfVxyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlcyA9IFt7IC4uLml0ZW0gfV07XHJcbiAgICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMuZm9yRWFjaCgoZWxlbWVudDphbnkpID0+IHtcclxuICAgICAgICBpZihlbGVtZW50W3RoaXMuaWRGaWVsZF0gIT09IGl0ZW1bdGhpcy5pZEZpZWxkXSl7XHJcbiAgICAgICAgICBlbGVtZW50LmlzU2VsZWN0ZWQgPSBmYWxzZVxyXG4gICAgICAgIH1cclxuICAgICAgfSk7XHJcbiAgICAgIHRoaXMuc2hvd0Ryb3Bkb3duID0gZmFsc2U7XHJcbiAgICB9XHJcbiBcclxuICAgIGNvbnN0IHZhbHVlc1RvRW1pdCA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMubWFwKCh2YWx1ZTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IHNlbGVjdGVkSXRlbSA9IHsgLi4udmFsdWUgfTtcclxuICAgICAgZGVsZXRlIHNlbGVjdGVkSXRlbS5pc1NlbGVjdGVkO1xyXG4gICAgICByZXR1cm4gc2VsZWN0ZWRJdGVtO1xyXG4gICAgfSk7XHJcbiBcclxuICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gICAgdGhpcy5lbWl0U2VsZWN0ZWRWYWx1ZXModmFsdWVzVG9FbWl0KTtcclxuIFxyXG4gIH1cclxuIFxyXG4gIG9uU2VsZWN0QWxsKGV2ZW50OiBhbnkpIHtcclxuICAgIGNvbnN0IHNlbGVjdEFsbCA9IGV2ZW50LmN1cnJlbnRUYXJnZXQuY2hlY2tlZDtcclxuICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMuZm9yRWFjaCgoaXRlbTogYW55KSA9PiBpdGVtLmlzU2VsZWN0ZWQgPSBzZWxlY3RBbGwpO1xyXG4gXHJcbiAgICBpZiAoc2VsZWN0QWxsKSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXMgPSBbLi4udGhpcy5maWx0ZXJlZFZhbHVlc107XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzID0gW107XHJcbiAgICB9XHJcbiBcclxuICAgIGNvbnN0IHZhbHVlc1RvRW1pdCA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMubWFwKCh2YWx1ZTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IHsgaXNTZWxlY3RlZCwgLi4uc2VsZWN0ZWRJdGVtIH0gPSB2YWx1ZTtcclxuICAgICAgcmV0dXJuIHNlbGVjdGVkSXRlbTtcclxuICAgIH0pO1xyXG4gXHJcbiAgICB0aGlzLmNkLmRldGVjdENoYW5nZXMoKTtcclxuICAgIHRoaXMuZW1pdFNlbGVjdGVkVmFsdWVzKHZhbHVlc1RvRW1pdCk7XHJcbiAgfVxyXG4gXHJcbiBcclxuICBlbWl0U2VsZWN0ZWRWYWx1ZXModmFsdWVzOiBhbnlbXSkge1xyXG4gICAgaWYgKHRoaXMubXVsdGkpIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZC5lbWl0KHZhbHVlcyk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkLmVtaXQodmFsdWVzWzBdKTtcclxuICAgIH1cclxuICB9XHJcbiBcclxuICBjaGVja0lmQWxsU2VsZWN0ZWQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5maWx0ZXJlZFZhbHVlcy5ldmVyeSgoaXRlbTogYW55KSA9PiBpdGVtLmlzU2VsZWN0ZWQpO1xyXG4gIH1cclxufSIsIjxkaXYgY2xhc3M9XCJvdXRlci1jb250YWluZXJcIiBbY2xhc3MuY29tcGFjdF09XCJjb21wYWN0XCI+XHJcbiAgICA8ZGl2IFtuZ0NsYXNzXT1cImRpc2FibGVkID8gJ2Rpc2FibGUtaW5wdXQnOicnXCIgIChjbGljayk9XCJvcGVuRHJvcGRvd24oJGV2ZW50KVwiICBjbGFzcz1cImZvcm0tc2VsZWN0XCI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibXVsdGlcIiA+XHJcbiAgICB7e3NlbGVjdGVkVmFsdWVzPy5sZW5ndGh9fSB7e2xhYmVsfX0gU2VsZWN0ZWQgICAgXHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbXVsdGlcIiA+XHJcbiAgICAgICAge3tzZWxlY3RlZFZhbHVlcz8uWzBdPy5bc2VhcmNoRmllbGRdfX1cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2IFtuZ0NsYXNzXT1cInNob3dEcm9wZG93biA/ICcnIDogJ2Qtbm9uZSdcIiBjbGFzcz1cImlucHV0LWNvbnRhaW5lciBkcm9wZG93blwiID5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwidy0xMDAgaW5wdXQtd3JhcHBlclwiPlxyXG4gICAgICAgIDxpbnB1dCBbKG5nTW9kZWwpXT1cInNlYXJjaFZhbHVlXCIgcGxhY2Vob2xkZXI9XCJTZWFyY2hcIiAgKGlucHV0KT1cIm9uSW5wdXQoJGV2ZW50KVwiIHR5cGU9XCJ0ZXh0XCI+ICBcclxuICAgICAgICA8c3ZnIGNsYXNzPVwic2VhcmNoLWljb25cIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxNlwiIGhlaWdodD1cIjE3XCIgdmlld0JveD1cIjAgMCAxNiAxN1wiIGZpbGw9XCJub25lXCI+XHJcbiAgICAgICAgICAgIDxwYXRoIGQ9XCJNMTQgMTQuNUwxMS4xIDExLjZNMTIuNjY2NyA3LjgzMzMzQzEyLjY2NjcgMTAuNzc4OSAxMC4yNzg5IDEzLjE2NjcgNy4zMzMzMyAxMy4xNjY3QzQuMzg3ODEgMTMuMTY2NyAyIDEwLjc3ODkgMiA3LjgzMzMzQzIgNC44ODc4MSA0LjM4NzgxIDIuNSA3LjMzMzMzIDIuNUMxMC4yNzg5IDIuNSAxMi42NjY3IDQuODg3ODEgMTIuNjY2NyA3LjgzMzMzWlwiIHN0cm9rZT1cIiM2NjcwODVcIiBzdHJva2Utd2lkdGg9XCIxLjNcIiBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIi8+XHJcbiAgICAgICAgICA8L3N2Zz4gIFxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDx1bD5cclxuICAgICAgICAgICAgPGxpICpuZ0lmPVwibXVsdGkgJiYgZmlsdGVyZWRWYWx1ZXM/Lmxlbmd0aFwiPlxyXG4gICAgICAgICAgICAgICAgPGxhYmVsIGNsYXNzPVwiZm9ybS1jaGVja1wiIGZvcj1cInNlbGVjdEFsbFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dCAoY2hhbmdlKT1cIm9uU2VsZWN0QWxsKCRldmVudClcIiBbY2hlY2tlZF09XCJjaGVja0lmQWxsU2VsZWN0ZWQoKVwiIGNsYXNzPVwiZm9ybS1jaGVjay1pbnB1dCBtZS0zXCIgdHlwZT1cImNoZWNrYm94XCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgaWQ9XCJzZWxlY3RBbGxcIj5cclxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImZvcm0tY2hlY2stbGFiZWxcIiA+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIFNlbGVjdCBBbGxcclxuICAgICAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgICAgICA8L2xhYmVsPlxyXG4gICAgICAgICAgICA8L2xpPlxyXG4gICAgICAgICAgICA8bGkgKm5nRm9yPVwibGV0IGl0ZW0gb2YgZmlsdGVyZWRWYWx1ZXNcIiBbbmdDbGFzc109XCJpdGVtLmlzU2VsZWN0ZWQgJiYgIW11bHRpID8gJ3NlbGVjdGVkJyA6ICcnXCIgPlxyXG4gICAgICAgICAgICAgICAgPGxhYmVsIFtmb3JdPVwiaXRlbVtpZEZpZWxkXSArIGluc3RhbmNlSWRcIiBbbmdDbGFzc109XCJtdWx0aSAgPyAnJzogJ3BzLTAnXCIgY2xhc3M9XCJmb3JtLWNoZWNrXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGlucHV0IFtuZ0NsYXNzXT1cIm11bHRpICA/ICcnOiAnZC1ub25lJ1wiIChjaGFuZ2UpPVwib25TZWxlY3QoJGV2ZW50LCBpdGVtKVwiIFsobmdNb2RlbCldPVwiaXRlbS5pc1NlbGVjdGVkXCIgY2xhc3M9XCJmb3JtLWNoZWNrLWlucHV0IG1lLTNcIiB0eXBlPVwiY2hlY2tib3hcIiB2YWx1ZT1cIlwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtpZF09XCJpdGVtW2lkRmllbGRdICsgaW5zdGFuY2VJZFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZm9ybS1jaGVjay1sYWJlbFwiID5cclxuICAgICAgICAgICAgICAgICAgICAgICAge3tpdGVtW3NlYXJjaEZpZWxkXX19XHJcbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgPC9sYWJlbD5cclxuICAgICAgICAgICAgPC9saT5cclxuICAgICAgICAgICAgPGxpICpuZ0lmPVwiIWZpbHRlcmVkVmFsdWVzPy5sZW5ndGhcIiA+XHJcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImQtZmxleCBhbGlnbi1pdGVtcy1jZW50ZXIganVzdGlmeS1jb250ZW50LWNlbnRlclwiID5ObyBkYXRhIGZvdW5kPC9zcGFuPlxyXG4gICAgICAgICAgICA8L2xpPlxyXG4gICAgICAgIDwvdWw+ICBcclxuICAgIDwvZGl2PiAgXHJcbiAgIFxyXG48L2Rpdj4iXX0=
package/esm2022/lib/components/fixture-template/template-products/template-products.component.mjs CHANGED
@@ -837,7 +837,7 @@ export class TemplateProductsComponent {
837
837
  });
838
838
  }
839
839
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateProductsComponent, deps: [{ token: i1.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i3.PlanoDataService }, { token: i4.ToastService }, { token: i5.GlobalStateService }, { token: i6.NgbModal }, { token: i5.PageInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
840
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TemplateProductsComponent, isStandalone: true, selector: "lib-template-products", ngImport: i0, template: "<section id=\"fixture-template-products\" *ngIf=\"!isPageLoading\">\r\n <div class=\"row gap-4 builder\">\r\n <!-- ====================================Left Column==================================== -->\r\n <div class=\"cols col\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" [class.disabled-click]=\"!isEditMode\">\r\n <li class=\"nav-item flex-fill\" *ngFor=\"let library of ['brand', 'product']\">\r\n <button class=\"nav-link w-100\" [class.active]=\"selectedLibrary === library\"\r\n (click)=\"selectedLibrary = library\" [attr.aria-current]=\"selectedLibrary === library ? 'page' : null\">\r\n {{ library | titlecase }} Library\r\n </button>\r\n </li>\r\n </ul>\r\n\r\n <div *ngIf=\"selectedLibrary === 'brand'\">\r\n <div *ngIf=\"selectedLevel !== 'spot'\">\r\n <h2>Add products by brand level</h2>\r\n <p>Place the product brand in the designated placement area.</p>\r\n </div>\r\n <!-- Fixture level within Brand Library -->\r\n <form [formGroup]=\"fixtureLevelForm\" *ngIf=\"selectedLevel === 'fixture'\">\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productBrandName\" class=\"form-label mb-1\">Brand</label>\r\n <multiselect-chip-dropdown [items]=\"brandsList\" [idField]=\"'brandName'\" [nameField]=\"'brandName'\"\r\n [placeholder]=\"'Select brands'\" formControlName=\"productBrandName\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n <!-- <ng-container\r\n *ngIf=\"fixtureLevelForm.get('productBrandName')?.touched && fixtureLevelForm.get('productBrandName')?.invalid\"\r\n >\r\n <small class=\"text-danger\" *ngIf=\"fixtureLevelForm.get('productBrandName')?.hasError('required')\">\r\n Please select product brand\r\n </small>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productCategory\" class=\"form-label mb-1\">Product category</label>\r\n <multiselect-chip-dropdown [idField]=\"'value'\" [nameField]=\"'label'\" [items]=\"categoriesList\"\r\n [placeholder]=\"'Select categories'\" formControlName=\"productCategory\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n </div>\r\n </form>\r\n\r\n <!-- Section level within Brand Library -->\r\n <form [formGroup]=\"sectionLevelForm\" *ngIf=\"selectedLevel === 'section'\">\r\n <div formArrayName=\"section\" class=\"array-wrapper\">\r\n <div *ngFor=\"let section of sectionArray?.controls; let i = index\" [formGroupName]=\"i\"\r\n class=\"array-container\">\r\n <!-- [ngStyle]=\"{ 'border-color': shelfColors[i].bg }\" -->\r\n <div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n <h6 class=\"shelf-title\">SECTION {{ i + 1 }}</h6>\r\n <svg [class.disabled-click]=\"!isEditMode\" *ngIf=\"i !== 0\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"removeSection(i)\" class=\"cursor-pointer\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"zone\" class=\"form-label mb-1\">Section label</label>\r\n <input type=\"text\" class=\"form-control\" id=\"label\" formControlName=\"zone\" />\r\n\r\n <ng-container *ngIf=\"section.get('zone')?.touched && section.get('zone')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('required')\"> Section name is\r\n required. </small>\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('whitespace')\">\r\n Section name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('notUnique')\"> Duplicate section name.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"shelves\" class=\"form-label mb-1\">Pick the shelf(s) for section {{ i + 1 }}</label>\r\n <multiselect-chip-dropdown [items]=\"shelvesList\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n formControlName=\"shelves\" [search]=\"true\"></multiselect-chip-dropdown>\r\n <ng-container *ngIf=\"section.get('shelves')?.touched && section.get('shelves')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"section.get('shelves')?.hasError('required')\"> Pick the shelf(s)\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productBrandName\" class=\"form-label mb-1\">Brand</label>\r\n <multiselect-chip-dropdown [items]=\"brandsList\" [idField]=\"'brandName'\" [nameField]=\"'brandName'\"\r\n formControlName=\"productBrandName\" [search]=\"true\"></multiselect-chip-dropdown>\r\n <!-- <ng-container *ngIf=\"section.get('productBrandName')?.touched && section.get('productBrandName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"section.get('productBrandName')?.hasError('required')\">\r\n Please select product brand\r\n </small>\r\n </ng-container> -->\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productCategory\" class=\"form-label mb-1\">Product category</label>\r\n <multiselect-chip-dropdown [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [items]=\"categoriesListMap.get('section' + i) ?? []\" formControlName=\"productCategory\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-end mt-4\">\r\n <span [ngbTooltip]=\"\r\n isAllShelvesUsedInSections\r\n ? 'All shelves are assigned. No shelves available for new sections.'\r\n : 'You cannot create more sections than the total shelves available.'\r\n \" [disableTooltip]=\"\r\n sectionArray.length < (fixtureTemplateDetails?.shelfConfig?.length ?? 0) && !isAllShelvesUsedInSections\r\n \">\r\n <button [disabled]=\"\r\n sectionArray.length >= (fixtureTemplateDetails?.shelfConfig?.length ?? 0) || isAllShelvesUsedInSections\r\n \" class=\"btn btn-outline text-end\" (click)=\"addSection()\">\r\n Add section\r\n </button>\r\n </span>\r\n </div>\r\n </form>\r\n\r\n <!-- Shelf level within Brand Library -->\r\n <form [formGroup]=\"shelfLevelForm\" *ngIf=\"selectedLevel === 'shelf'\">\r\n <div formArrayName=\"shelf\" class=\"array-wrapper\">\r\n <div *ngFor=\"let shelf of shelfArray?.controls; let i = index\" [formGroupName]=\"i\" class=\"array-container\">\r\n <!-- [ngStyle]=\"{ 'border-color': shelfColors[i].bg }\" -->\r\n <h6 class=\"shelf-title\">SHELF {{ i + 1 }}</h6>\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productBrandName\" class=\"form-label mb-1\">Brand</label>\r\n <multiselect-chip-dropdown [items]=\"brandsList\" [idField]=\"'brandName'\" [nameField]=\"'brandName'\"\r\n formControlName=\"productBrandName\" [search]=\"true\"></multiselect-chip-dropdown>\r\n <!-- <ng-container *ngIf=\"shelf.get('productBrandName')?.touched && shelf.get('productBrandName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"shelf.get('productBrandName')?.hasError('required')\">\r\n Please select product brand\r\n </small>\r\n </ng-container> -->\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productCategory\" class=\"form-label mb-1\">Product category</label>\r\n <multiselect-chip-dropdown [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [items]=\"categoriesListMap.get('shelf' + i) ?? []\" formControlName=\"productCategory\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <!-- Spot level within Brand Library -->\r\n <!-- <form [formGroup]=\"spotLevelForm\" *ngIf=\"selectedLevel === 'spot'\">Spot level Form</form> -->\r\n <div *ngIf=\"selectedLevel === 'spot'\"\r\n class=\"d-flex flex-column w-100 justify-content-center align-items-center text-center\" style=\"height: 50vh\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M37 37L32.65 32.65M35 27C35 31.4183 31.4183 35 27 35C22.5817 35 19 31.4183 19 27C19 22.5817 22.5817 19 27 19C31.4183 19 35 22.5817 35 27Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"mt-5 mb-2\">Coming soon</h3>\r\n <p>This feature is not available yet.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Coming soon for all levels -->\r\n <div *ngIf=\"selectedLibrary === 'product'\"\r\n class=\"d-flex flex-column w-100 justify-content-center align-items-center text-center mt-5\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M37 37L32.65 32.65M35 27C35 31.4183 31.4183 35 27 35C22.5817 35 19 31.4183 19 27C19 22.5817 22.5817 19 27 19C31.4183 19 35 22.5817 35 27Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"mt-5 mb-2\">Coming soon</h3>\r\n <p>This feature is not available yet. Start adding product from brand library</p>\r\n </div>\r\n </div>\r\n\r\n <!-- =======================================Right Column =======================================-->\r\n <div class=\"cols col-8\">\r\n <h6>Product brand placements</h6>\r\n\r\n <ul class=\"nav nav-tabs custom-tabs d-flex mt-4\" [class.disabled-click]=\"!isEditMode\">\r\n <li class=\"nav-item flex-fill\" *ngFor=\"let level of ['fixture', 'section', 'shelf', 'spot']\">\r\n <button class=\"nav-link w-100\" [class.active]=\"selectedLevel === level\" (click)=\"setTab(level)\"\r\n [attr.aria-current]=\"selectedLevel === level ? 'page' : null\">\r\n {{ level | titlecase }} level\r\n </button>\r\n </li>\r\n </ul>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'fixture'\">\r\n <div id=\"fixture-level\" class=\"d-flex justify-content-center\">\r\n <!-- Vertical arrows -->\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureLength?.value }}{{ fixtureTemplateDetails?.fixtureLength?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <!-- Horizontal arrows -->\r\n <ng-container *ngTemplateOutlet=\"\r\n dimensionArrows;\r\n context: {\r\n value: fixtureTemplateDetails?.fixtureWidth?.value\r\n }\r\n \"></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}\r\n </p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div class=\"body-block\" *ngIf=\"(fixtureTemplateDetails?.shelfConfig?.length ?? 0) > 0\">\r\n <div id=\"brand-category\" class=\"brand-category\"\r\n *ngIf=\"fixtureLevelForm?.get('productBrandName')?.value?.length\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixtureLevelForm?.get('productBrandName')?.value; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixtureLevelForm?.get('productCategory')?.value?.length\">\r\n <ng-container *ngFor=\"let c of fixtureLevelForm?.get('productCategory')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let b of fixtureLevelForm?.get('productBrandName')?.value; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixtureLevelForm?.get('productCategory')?.value?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixtureLevelForm?.get('productCategory')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\" class=\"shelfContainer\">\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'section'\">\r\n <div id=\"section-level\" class=\"d-flex justify-content-center\">\r\n <!-- Vertical arrows -->\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureLength?.value }}{{ fixtureTemplateDetails?.fixtureLength?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <!-- Horizontal arrows -->\r\n <ng-container\r\n *ngTemplateOutlet=\"dimensionArrows; context: { value: fixtureTemplateDetails?.fixtureWidth?.value }\"></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div class=\"body-block\" id=\"section-body-block\">\r\n <!---------------------------------------------------------------------->\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n <!---------------------------------------------------------------------->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n <!---------------------------------------------------------------------->\r\n\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\" class=\"shelfContainer\">\r\n <!-- [NOTE] below block is identified by the function using 'lastElement' getter in DOM manipulation. \r\n So keep this block always at the bottom of this ngFor loop -->\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'shelf'\">\r\n <div id=\"shelf-level\" class=\"d-flex justify-content-center\">\r\n <!-- Vertical arrows -->\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureLength?.value }}{{ fixtureTemplateDetails?.fixtureLength?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <!-- Horizontal arrows -->\r\n <ng-container\r\n *ngTemplateOutlet=\"dimensionArrows; context: { value: fixtureTemplateDetails?.fixtureWidth?.value }\"></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}\r\n </p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div class=\"body-block\" *ngIf=\"(fixtureTemplateDetails?.shelfConfig?.length ?? 0) > 0\">\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\" class=\"shelfContainer\">\r\n <!---------------------------------------------------------------------->\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\"\r\n *ngIf=\"shelfArray.controls[i]?.get('productBrandName')?.value?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"shelfArray.controls[i]?.get('productBrandName')?.value?.length\">\r\n <ng-container\r\n *ngFor=\"let b of shelfArray.controls[i]?.get('productBrandName')?.value; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"shelfArray.controls[i]?.get('productCategory')?.value?.length\" class=\"separator\"> -\r\n </span>\r\n <span class=\"category\" *ngIf=\"shelfArray.controls[i]?.get('productCategory')?.value?.length\">\r\n <ng-container\r\n *ngFor=\"let b of shelfArray.controls[i]?.get('productCategory')?.value; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container\r\n *ngFor=\"let c of shelfArray.controls[i]?.get('productBrandName')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"shelfArray.controls[i]?.get('productCategory')?.value?.length\">\r\n <b>Categories: </b>\r\n <ng-container\r\n *ngFor=\"let c of shelfArray.controls[i]?.get('productCategory')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n <!---------------------------------------------------------------------->\r\n\r\n <!-- [NOTE] below block is identified by the function using 'lastElement' getter in DOM manipulation. \r\n So keep this block always at the bottom of this ngFor loop -->\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'spot'\">\r\n <div class=\"d-flex flex-column w-100 justify-content-center align-items-center text-center\"\r\n style=\"height: 50vh\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M37 37L32.65 32.65M35 27C35 31.4183 31.4183 35 27 35C22.5817 35 19 31.4183 19 27C19 22.5817 22.5817 19 27 19C31.4183 19 35 22.5817 35 27Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"mt-5 mb-2\">Coming soon</h3>\r\n <p>This feature is not available yet. Try Fixture, Section, and Shelf levels</p>\r\n </div>\r\n\r\n <!-- <div id=\"spot-level\" class=\"d-flex justify-content-center\">\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureWidth?.value }}{{ fixtureTemplateDetails?.fixtureWidth?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n dimensionArrows;\r\n context: {\r\n value: fixtureTemplateDetails?.fixtureLength?.value\r\n }\r\n \"\r\n ></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <div\r\n class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\"\r\n >\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"body-block\" *ngIf=\"(fixtureTemplateDetails?.shelfConfig?.length ?? 0) > 0\">\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf \">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product \"></div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block \">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product \"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\"\r\n >\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<section id=\"fixture-template-products-skeleton\" *ngIf=\"isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<!-- Common dimension arrows -->\r\n<ng-template #dimensionArrows let-label=\"label\" let-value=\"value\">\r\n <div class=\"horizontal-dimension\">\r\n <div class=\"arrow left\"></div>\r\n <div class=\"line\">\r\n <span>{{ value }} {{ fixtureTemplateDetails?.fixtureWidth?.unit }}</span>\r\n </div>\r\n <div class=\"arrow right\"></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.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.badge.draft{color:#009bf3;background:#eaf8ff}.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}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}.custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}.custom-tabs .nav-link.active{background:var(--Primary-50, #eaf8ff)}.nav-item{text-align:center}.nav-item:last-child .nav-link{border:none}.footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}.footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}.sub-footer{position:relative;width:48%}.array-wrapper{border-radius:4px;background:var(--Gray-50, #f9fafb);padding:16px}.array-container{border-radius:6px;padding:12px;background:#fff;margin-bottom:12px;border:1px solid white}#fixture-level .body-block{position:relative}#fixture-level .brand-category{position:absolute;max-width:90%;min-width:123px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:50%;transform:translate(-50%,-50%);transition:all .3s ease;cursor:pointer}#fixture-level .brand,#fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-level .category{margin-top:12px}#section-level .body-block{position:relative}#section-level .brand-category{position:absolute;max-width:90%;min-width:123px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#section-level .brand,#section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#section-level .separator{margin:0 4px;font-weight:600}#section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#shelf-level .body-block{position:relative}#shelf-level .brand-category{position:absolute;max-width:90%;min-width:123px;overflow:hidden;padding:8px 4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#shelf-level .brand,#shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#shelf-level .separator{margin:0 4px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i7.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: NgbAccordionModule }, { kind: "component", type: MultiselectChipDropdownComponent, selector: "multiselect-chip-dropdown", inputs: ["idField", "nameField", "placeholder", "items", "search", "searchField"] }] });
840
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TemplateProductsComponent, isStandalone: true, selector: "lib-template-products", ngImport: i0, template: "<section id=\"fixture-template-products\" *ngIf=\"!isPageLoading\">\r\n <div class=\"row gap-4 builder\">\r\n <!-- ====================================Left Column==================================== -->\r\n <div class=\"cols col\">\r\n <ul class=\"nav nav-tabs custom-tabs d-flex\" [class.disabled-click]=\"!isEditMode\">\r\n <li class=\"nav-item flex-fill\" *ngFor=\"let library of ['brand', 'product']\">\r\n <button class=\"nav-link w-100\" [class.active]=\"selectedLibrary === library\"\r\n (click)=\"selectedLibrary = library\" [attr.aria-current]=\"selectedLibrary === library ? 'page' : null\">\r\n {{ library | titlecase }} Library\r\n </button>\r\n </li>\r\n </ul>\r\n\r\n <div *ngIf=\"selectedLibrary === 'brand'\">\r\n <div *ngIf=\"selectedLevel !== 'spot'\">\r\n <h2>Add products by brand level</h2>\r\n <p>Place the product brand in the designated placement area.</p>\r\n </div>\r\n <!-- Fixture level within Brand Library -->\r\n <form [formGroup]=\"fixtureLevelForm\" *ngIf=\"selectedLevel === 'fixture'\">\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productBrandName\" class=\"form-label mb-1\">Brand</label>\r\n <multiselect-chip-dropdown [items]=\"brandsList\" [idField]=\"'brandName'\" [nameField]=\"'brandName'\"\r\n [placeholder]=\"'Select brands'\" formControlName=\"productBrandName\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n <!-- <ng-container\r\n *ngIf=\"fixtureLevelForm.get('productBrandName')?.touched && fixtureLevelForm.get('productBrandName')?.invalid\"\r\n >\r\n <small class=\"text-danger\" *ngIf=\"fixtureLevelForm.get('productBrandName')?.hasError('required')\">\r\n Please select product brand\r\n </small>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productCategory\" class=\"form-label mb-1\">Product category</label>\r\n <multiselect-chip-dropdown [idField]=\"'value'\" [nameField]=\"'label'\" [items]=\"categoriesList\"\r\n [placeholder]=\"'Select categories'\" formControlName=\"productCategory\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n </div>\r\n </form>\r\n\r\n <!-- Section level within Brand Library -->\r\n <form [formGroup]=\"sectionLevelForm\" *ngIf=\"selectedLevel === 'section'\">\r\n <div formArrayName=\"section\" class=\"array-wrapper\">\r\n <div *ngFor=\"let section of sectionArray?.controls; let i = index\" [formGroupName]=\"i\"\r\n class=\"array-container\">\r\n <!-- [ngStyle]=\"{ 'border-color': shelfColors[i].bg }\" -->\r\n <div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n <h6 class=\"shelf-title\">SECTION {{ i + 1 }}</h6>\r\n <svg [class.disabled-click]=\"!isEditMode\" *ngIf=\"i !== 0\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"removeSection(i)\" class=\"cursor-pointer\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"zone\" class=\"form-label mb-1\">Section label</label>\r\n <input type=\"text\" class=\"form-control\" id=\"label\" formControlName=\"zone\" />\r\n\r\n <ng-container *ngIf=\"section.get('zone')?.touched && section.get('zone')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('required')\"> Section name is\r\n required. </small>\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('whitespace')\">\r\n Section name cannot be only whitespace.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('trimSpaces')\">\r\n No leading or trailing whitespace allowed.\r\n </small>\r\n <small class=\"text-danger\" *ngIf=\"section.get('zone')?.hasError('notUnique')\"> Duplicate section name.\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"shelves\" class=\"form-label mb-1\">Pick the shelf(s) for section {{ i + 1 }}</label>\r\n <multiselect-chip-dropdown [items]=\"shelvesList\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n formControlName=\"shelves\" [search]=\"true\"></multiselect-chip-dropdown>\r\n <ng-container *ngIf=\"section.get('shelves')?.touched && section.get('shelves')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"section.get('shelves')?.hasError('required')\"> Pick the shelf(s)\r\n </small>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productBrandName\" class=\"form-label mb-1\">Brand</label>\r\n <multiselect-chip-dropdown [items]=\"brandsList\" [idField]=\"'brandName'\" [nameField]=\"'brandName'\"\r\n formControlName=\"productBrandName\" [search]=\"true\"></multiselect-chip-dropdown>\r\n <!-- <ng-container *ngIf=\"section.get('productBrandName')?.touched && section.get('productBrandName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"section.get('productBrandName')?.hasError('required')\">\r\n Please select product brand\r\n </small>\r\n </ng-container> -->\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productCategory\" class=\"form-label mb-1\">Product category</label>\r\n <multiselect-chip-dropdown [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [items]=\"categoriesListMap.get('section' + i) ?? []\" formControlName=\"productCategory\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-end mt-4\">\r\n <span [ngbTooltip]=\"\r\n isAllShelvesUsedInSections\r\n ? 'All shelves are assigned. No shelves available for new sections.'\r\n : 'You cannot create more sections than the total shelves available.'\r\n \" [disableTooltip]=\"\r\n sectionArray.length < (fixtureTemplateDetails?.shelfConfig?.length ?? 0) && !isAllShelvesUsedInSections\r\n \">\r\n <button [disabled]=\"\r\n sectionArray.length >= (fixtureTemplateDetails?.shelfConfig?.length ?? 0) || isAllShelvesUsedInSections\r\n \" class=\"btn btn-outline text-end\" (click)=\"addSection()\">\r\n Add section\r\n </button>\r\n </span>\r\n </div>\r\n </form>\r\n\r\n <!-- Shelf level within Brand Library -->\r\n <form [formGroup]=\"shelfLevelForm\" *ngIf=\"selectedLevel === 'shelf'\">\r\n <div formArrayName=\"shelf\" class=\"array-wrapper\">\r\n <div *ngFor=\"let shelf of shelfArray?.controls; let i = index\" [formGroupName]=\"i\" class=\"array-container\">\r\n <!-- [ngStyle]=\"{ 'border-color': shelfColors[i].bg }\" -->\r\n <h6 class=\"shelf-title\">SHELF {{ i + 1 }}</h6>\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productBrandName\" class=\"form-label mb-1\">Brand</label>\r\n <multiselect-chip-dropdown [items]=\"brandsList\" [idField]=\"'brandName'\" [nameField]=\"'brandName'\"\r\n formControlName=\"productBrandName\" [search]=\"true\"></multiselect-chip-dropdown>\r\n <!-- <ng-container *ngIf=\"shelf.get('productBrandName')?.touched && shelf.get('productBrandName')?.invalid\">\r\n <small class=\"text-danger\" *ngIf=\"shelf.get('productBrandName')?.hasError('required')\">\r\n Please select product brand\r\n </small>\r\n </ng-container> -->\r\n </div>\r\n\r\n <div class=\"form-group mb-4\">\r\n <label for=\"productCategory\" class=\"form-label mb-1\">Product category</label>\r\n <multiselect-chip-dropdown [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [items]=\"categoriesListMap.get('shelf' + i) ?? []\" formControlName=\"productCategory\"\r\n [search]=\"true\"></multiselect-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <!-- Spot level within Brand Library -->\r\n <!-- <form [formGroup]=\"spotLevelForm\" *ngIf=\"selectedLevel === 'spot'\">Spot level Form</form> -->\r\n <div *ngIf=\"selectedLevel === 'spot'\"\r\n class=\"d-flex flex-column w-100 justify-content-center align-items-center text-center\" style=\"height: 50vh\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M37 37L32.65 32.65M35 27C35 31.4183 31.4183 35 27 35C22.5817 35 19 31.4183 19 27C19 22.5817 22.5817 19 27 19C31.4183 19 35 22.5817 35 27Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"mt-5 mb-2\">Coming soon</h3>\r\n <p>This feature is not available yet.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Coming soon for all levels -->\r\n <div *ngIf=\"selectedLibrary === 'product'\"\r\n class=\"d-flex flex-column w-100 justify-content-center align-items-center text-center mt-5\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M37 37L32.65 32.65M35 27C35 31.4183 31.4183 35 27 35C22.5817 35 19 31.4183 19 27C19 22.5817 22.5817 19 27 19C31.4183 19 35 22.5817 35 27Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"mt-5 mb-2\">Coming soon</h3>\r\n <p>This feature is not available yet. Start adding product from brand library</p>\r\n </div>\r\n </div>\r\n\r\n <!-- =======================================Right Column =======================================-->\r\n <div class=\"cols col-8\">\r\n <h6>Product brand placements</h6>\r\n\r\n <ul class=\"nav nav-tabs custom-tabs d-flex mt-4\" [class.disabled-click]=\"!isEditMode\">\r\n <li class=\"nav-item flex-fill\" *ngFor=\"let level of ['fixture', 'section', 'shelf', 'spot']\">\r\n <button class=\"nav-link w-100\" [class.active]=\"selectedLevel === level\" (click)=\"setTab(level)\"\r\n [attr.aria-current]=\"selectedLevel === level ? 'page' : null\">\r\n {{ level | titlecase }} level\r\n </button>\r\n </li>\r\n </ul>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'fixture'\">\r\n <div id=\"fixture-level\" class=\"d-flex justify-content-center\">\r\n <!-- Vertical arrows -->\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureLength?.value }}{{ fixtureTemplateDetails?.fixtureLength?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <!-- Horizontal arrows -->\r\n <ng-container *ngTemplateOutlet=\"\r\n dimensionArrows;\r\n context: {\r\n value: fixtureTemplateDetails?.fixtureWidth?.value\r\n }\r\n \"></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}\r\n </p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div class=\"body-block\" *ngIf=\"(fixtureTemplateDetails?.shelfConfig?.length ?? 0) > 0\">\r\n <div id=\"brand-category\" class=\"brand-category\"\r\n *ngIf=\"fixtureLevelForm?.get('productBrandName')?.value?.length\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixtureLevelForm?.get('productBrandName')?.value; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixtureLevelForm?.get('productCategory')?.value?.length\">\r\n <ng-container *ngFor=\"let c of fixtureLevelForm?.get('productCategory')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let b of fixtureLevelForm?.get('productBrandName')?.value; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixtureLevelForm?.get('productCategory')?.value?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of fixtureLevelForm?.get('productCategory')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\" class=\"shelfContainer\">\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'section'\">\r\n <div id=\"section-level\" class=\"d-flex justify-content-center\">\r\n <!-- Vertical arrows -->\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureLength?.value }}{{ fixtureTemplateDetails?.fixtureLength?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <!-- Horizontal arrows -->\r\n <ng-container\r\n *ngTemplateOutlet=\"dimensionArrows; context: { value: fixtureTemplateDetails?.fixtureWidth?.value }\"></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div class=\"body-block\" id=\"section-body-block\">\r\n <!---------------------------------------------------------------------->\r\n <!-- <div id=\"body-loader\">\r\n <div class=\"loader\"></div>\r\n </div> -->\r\n <!---------------------------------------------------------------------->\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"badge draft me-1\">\r\n {{ item.zone }}\r\n </span>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n <!---------------------------------------------------------------------->\r\n\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\" class=\"shelfContainer\">\r\n <!-- [NOTE] below block is identified by the function using 'lastElement' getter in DOM manipulation. \r\n So keep this block always at the bottom of this ngFor loop -->\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'shelf'\">\r\n <div id=\"shelf-level\" class=\"d-flex justify-content-center\">\r\n <!-- Vertical arrows -->\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureLength?.value }}{{ fixtureTemplateDetails?.fixtureLength?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <!-- Horizontal arrows -->\r\n <ng-container\r\n *ngTemplateOutlet=\"dimensionArrows; context: { value: fixtureTemplateDetails?.fixtureWidth?.value }\"></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <!-- Header block -->\r\n <div class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}\r\n </p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div class=\"body-block\" *ngIf=\"(fixtureTemplateDetails?.shelfConfig?.length ?? 0) > 0\">\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\" class=\"shelfContainer\">\r\n <!---------------------------------------------------------------------->\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\"\r\n *ngIf=\"shelfArray.controls[i]?.get('productBrandName')?.value?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"shelfArray.controls[i]?.get('productBrandName')?.value?.length\">\r\n <ng-container\r\n *ngFor=\"let b of shelfArray.controls[i]?.get('productBrandName')?.value; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"shelfArray.controls[i]?.get('productCategory')?.value?.length\" class=\"separator\"> -\r\n </span>\r\n <span class=\"category\" *ngIf=\"shelfArray.controls[i]?.get('productCategory')?.value?.length\">\r\n <ng-container\r\n *ngFor=\"let b of shelfArray.controls[i]?.get('productCategory')?.value; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container\r\n *ngFor=\"let c of shelfArray.controls[i]?.get('productBrandName')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"shelfArray.controls[i]?.get('productCategory')?.value?.length\">\r\n <b>Categories: </b>\r\n <ng-container\r\n *ngFor=\"let c of shelfArray.controls[i]?.get('productCategory')?.value; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n <!---------------------------------------------------------------------->\r\n\r\n <!-- [NOTE] below block is identified by the function using 'lastElement' getter in DOM manipulation. \r\n So keep this block always at the bottom of this ngFor loop -->\r\n @if(item.shelfType ==='tray'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block\">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block shelf\"\r\n [class.vmonly-placeholder]=\"item.shelfType ==='vmonly'\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedLevel === 'spot'\">\r\n <div class=\"d-flex flex-column w-100 justify-content-center align-items-center text-center\"\r\n style=\"height: 50vh\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M37 37L32.65 32.65M35 27C35 31.4183 31.4183 35 27 35C22.5817 35 19 31.4183 19 27C19 22.5817 22.5817 19 27 19C31.4183 19 35 22.5817 35 27Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"mt-5 mb-2\">Coming soon</h3>\r\n <p>This feature is not available yet. Try Fixture, Section, and Shelf levels</p>\r\n </div>\r\n\r\n <!-- <div id=\"spot-level\" class=\"d-flex justify-content-center\">\r\n <div class=\"vertical-dimension\">\r\n <div class=\"arrow up\"></div>\r\n <div class=\"line\">\r\n <span>{{ fixtureTemplateDetails?.fixtureWidth?.value }}{{ fixtureTemplateDetails?.fixtureWidth?.unit }}</span>\r\n </div>\r\n <div class=\"arrow down\"></div>\r\n </div>\r\n\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n dimensionArrows;\r\n context: {\r\n value: fixtureTemplateDetails?.fixtureLength?.value\r\n }\r\n \"\r\n ></ng-container>\r\n\r\n <div class=\"wall-viewport\">\r\n <div\r\n class=\"header-block\"\r\n *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\"\r\n >\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"body-block\" *ngIf=\"(fixtureTemplateDetails?.shelfConfig?.length ?? 0) > 0\">\r\n <div *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf \">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product \"></div>\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block \">\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product \"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"footer-block\"\r\n *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\"\r\n >\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<section id=\"fixture-template-products-skeleton\" *ngIf=\"isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<!-- Common dimension arrows -->\r\n<ng-template #dimensionArrows let-label=\"label\" let-value=\"value\">\r\n <div class=\"horizontal-dimension\">\r\n <div class=\"arrow left\"></div>\r\n <div class=\"line\">\r\n <span>{{ value }} {{ fixtureTemplateDetails?.fixtureWidth?.unit }}</span>\r\n </div>\r\n <div class=\"arrow right\"></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.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.badge.draft{color:#009bf3;background:#eaf8ff}.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}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}.custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}.custom-tabs .nav-link.active{background:var(--Primary-50, #eaf8ff)}.nav-item{text-align:center}.nav-item:last-child .nav-link{border:none}.footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important}.footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}.sub-footer{position:relative;width:48%}.array-wrapper{border-radius:4px;background:var(--Gray-50, #f9fafb);padding:16px}.array-container{border-radius:6px;padding:12px;background:#fff;margin-bottom:12px;border:1px solid white}#fixture-level .body-block{position:relative}#fixture-level .brand-category{position:absolute;max-width:90%;min-width:123px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid var(--Primary-200, #99daff);background:var(--White, #fff);top:50%;left:50%;transform:translate(-50%,-50%);transition:all .3s ease;cursor:pointer}#fixture-level .brand,#fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-level .category{margin-top:12px}#section-level .body-block{position:relative}#section-level .brand-category{position:absolute;max-width:90%;min-width:123px;overflow:hidden;padding:4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#section-level .brand,#section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#section-level .separator{margin:0 4px;font-weight:600}#section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#shelf-level .body-block{position:relative}#shelf-level .brand-category{position:absolute;max-width:90%;min-width:123px;overflow:hidden;padding:8px 4px;border-radius:2px;border:1.12px solid;transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#shelf-level .brand,#shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#shelf-level .separator{margin:0 4px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i7.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: NgbAccordionModule }, { kind: "component", type: MultiselectChipDropdownComponent, selector: "multiselect-chip-dropdown", inputs: ["idField", "nameField", "placeholder", "items", "search", "searchField", "maxSelection", "compact", "extraActionLabel", "extraActionActive"], outputs: ["extraActionClick"] }] });
841
841
  }
842
842
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateProductsComponent, decorators: [{
843
843
  type: Component,
package/esm2022/lib/components/layout-summary/layout-summary.component.mjs CHANGED
@@ -788,7 +788,7 @@ export class LayoutSummaryComponent {
788
788
  }
789
789
  }
790
790
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutSummaryComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.StoreBuilderService }, { token: i3.NgbModal }, { token: i3.NgbOffcanvas }, { token: i1.Router }, { token: i3.NgbModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
791
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutSummaryComponent, selector: "lib-layout-summary", host: { listeners: { "document:click": "onOutsideClick($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["gridCanvas"], descendants: true, static: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "completeLayout", first: true, predicate: ["completeLayout"], 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)=\"onComplete()\" class=\"btn btn-sm btn-primary me-5\">Complete</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 mb-6\">\r\n <div class=\"col-4\">\r\n <div class=\"area-card\">\r\n <div>\r\n <div> <span class=\"main-txt me-2\">{{wallCapacity || 0}}</span> <span class=\"unit-txt\">rft</span> </div>\r\n <div class=\"sub-txt\">Wall capacity</div>\r\n </div>\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"65\" height=\"65\" viewBox=\"0 0 65 65\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M4.33333 4.33333V0H8.66667V4.33333H21.6667V0H26V4.33333H39V0H43.3333V4.33333H56.3333V0H60.6667V4.33333H65V8.66667H60.6667V21.6667H65V26H60.6667V39H65V43.3333H60.6667V56.3333H65V60.6667H60.6667V65H56.3333V60.6667H43.3333V65H39V60.6667H26V65H21.6667V60.6667H8.66667V65H4.33333V60.6667H0V56.3333H4.33333V43.3333H0V39H4.33333V26H0V21.6667H4.33333V8.66667H0V4.33333H4.33333ZM8.66667 8.66667V21.6667H21.6667V8.66667H8.66667ZM26 8.66667V21.6667H39V8.66667H26ZM43.3333 8.66667V21.6667H56.3333V8.66667H43.3333ZM56.3333 26H43.3333V39H56.3333V26ZM56.3333 43.3333H43.3333V56.3333H56.3333V43.3333ZM39 56.3333V43.3333H26V56.3333H39ZM21.6667 56.3333V43.3333H8.66667V56.3333H21.6667ZM8.66667 39H21.6667V26H8.66667V39ZM26 26V39H39V26H26Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"area-card\">\r\n <div>\r\n <div> <span class=\"main-txt me-2\">{{facadeCapacity || 0}}</span> <span class=\"unit-txt\">rft</span> </div>\r\n <div class=\"sub-txt\">Facade capacity</div>\r\n </div>\r\n <div>\r\n <svg width=\"65\" height=\"65\" viewBox=\"0 0 65 65\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"64\" height=\"64\" fill=\"#FDFDFD\" stroke=\"black\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"area-card\">\r\n <div>\r\n <div> <span class=\"main-txt me-2\">{{floorCapacity || 0}}</span> <span class=\"unit-txt\">sqft</span> </div>\r\n <div class=\"sub-txt\">Floor capacity</div>\r\n </div>\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"102\" height=\"58\" viewBox=\"0 0 102 58\" fill=\"none\">\r\n <path d=\"M3.54359 36.4607L29.8929 2.06432L98.0939 6.44191L99.908 55.5468L3.54359 36.4607Z\" stroke=\"#475467\"\r\n stroke-width=\"4\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n <div class=\"col-4\">\r\n <div class=\"c-card\" style=\"height: 75dvh; position: relative;\">\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 Capacity details\r\n </div>\r\n <div class=\"l-pane-desc\">\r\n Below are the capacity details of the elements\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n\r\n </div>\r\n\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>#</th>\r\n <th> <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <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> <span>Wall</span> </th>\r\n <th>RFT ({{wallCapacity || 0}})</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let item of layoutPolygon; let i = index\">\r\n <tr *ngIf=\"item[2] && item[2].elementType === 'wall'\">\r\n <td>\r\n {{1}}\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].elementType}} {{item[2].elementNumber}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].distance}}</div>\r\n\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n <table class=\"table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th>#</th>\r\n <th> <svg class=\"me-2\" 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> <span>Facade</span> </th>\r\n <th>RFT ({{facadeCapacity || 0}})</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let item of layoutPolygon; let i = index\">\r\n <tr *ngIf=\"item[2] && item[2].elementType === 'facade'\">\r\n <td>\r\n {{i}}\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].elementType}} {{item[2].elementNumber}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].distance}}</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 </div>\r\n </div>\r\n <div class=\"col-8\">\r\n <div class=\"c-card \" style=\"height: 75dvh;\">\r\n <div style=\"height: 8%;\" 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\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n 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)\" *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\r\n </div>\r\n\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <button 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 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 <div class=\"hide-scrollbar\" style=\"height: 92%; overflow: scroll; position: relative;\" #scrollContainer>\r\n <canvas #gridCanvas>\r\n\r\n </canvas>\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>\r\n\r\n<ng-template #completeLayout let-modal>\r\n <div class=\"card\">\r\n <div style=\"min-height: unset; border-bottom: unset; padding-top: 2.25rem;\" class=\"card-header\">\r\n <div class=\"card-title\">\r\n <span class=\"modal-header-txt\">Complete Layout</span>\r\n </div>\r\n </div>\r\n <div style=\"padding-top: 1rem;\" class=\"card-body\">\r\n <div class=\"form-check\">\r\n <input (ngModelChange)=\"onModalTypeChange($event)\" [(ngModel)]=\"markAsCompleteType\" class=\"form-check-input\" type=\"radio\" name=\"one\" id=\"single\"\r\n value=\"single\">\r\n <div class=\"ms-3\">\r\n <div class=\"modal-main-txt\">Mark as complete for only <span\r\n class=\"highlight-txt\">{{selectedStore?.storeName}}</span></div>\r\n <div class=\"modal-sub-txt\">This action will considered as layout completion for {{selectedStore?.storeName}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-100 h-0 border my-5 border-bottom-grey\"></div>\r\n <div class=\"form-check mb-5\">\r\n <input (ngModelChange)=\"onModalTypeChange($event)\" [(ngModel)]=\"markAsCompleteType\" class=\"form-check-input\" type=\"radio\" name=\"one\" id=\"multiple\"\r\n value=\"multiple\">\r\n <div class=\"ms-3\">\r\n <div class=\"modal-main-txt\">Mark as complete for all {{planoStoreList.length}} stores</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"markAsCompleteType === 'multiple'\" class=\"table-responsive\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr style=\"border-bottom: 1px solid #EAECF0; background: #FCFCFD;\">\r\n <th>\r\n <div class=\"form-check\">\r\n <input (click)=\"onModalSelectAll($event)\" [(ngModel)]=\"isAllStoreSelected\" class=\"form-check-input c-checkbox\" type=\"checkbox\">\r\n <label class=\"form-check-label check-label modal-storeName\">\r\n Store Name\r\n </label>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr style=\"border-bottom: 1px solid #EAECF0;\" *ngFor=\"let store of planoStoreList\">\r\n <td>\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"store.selected\" class=\"form-check-input c-checkbox\" type=\"checkbox\">\r\n <label class=\"form-check-label check-label modal-storeName\">\r\n {{store?.storeName}}\r\n </label>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <button (click)=\"modal.dismiss()\" class=\"btn btn-outline bg-white me-5\">Cancel</button>\r\n <button (click)=\"updatePlanoStatus(); modal.dismiss()\" class=\"btn btn-sm btn-primary \">Complete</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>", styles: [".storename-txt{color:var(--Black, #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}.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}.area-card{padding:20px;border-radius:6px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;display:flex;justify-content:space-between}.area-card .main-txt{color:#101828;font-size:30px;font-weight:600;line-height:38px}.area-card .unit-txt{color:#101828;font-size:20px;font-style:italic;font-weight:600;line-height:30px}.area-card .sub-txt{color:#475467;font-size:16px;font-weight:500;line-height:24px}th{background:unset!important;border-bottom:unset!important;color:#1d2939;font-size:14px!important;font-weight:600!important;line-height:20px!important}.table-td{padding:10px 14px;border-radius:8px;background:#f9fafb}.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:var(--Gray-100, #F2F4F7)}.modal-header-txt{color:#344054;font-size:16px;font-weight:500;line-height:24px}.modal-main-txt{color:#1d2939;font-size:18px;font-weight:600;line-height:28px}.modal-main-txt .highlight-txt{color:#344054;font-size:16px;font-weight:600;line-height:24px}.modal-sub-txt{color:#667085;font-size:16px;font-weight:400;line-height:24px}.modal-storeName{color:#667085;font-size:14px;font-weight:500;line-height:20px}\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "component", type: i7.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
791
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutSummaryComponent, selector: "lib-layout-summary", host: { listeners: { "document:click": "onOutsideClick($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["gridCanvas"], descendants: true, static: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "completeLayout", first: true, predicate: ["completeLayout"], 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)=\"onComplete()\" class=\"btn btn-sm btn-primary me-5\">Complete</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 mb-6\">\r\n <div class=\"col-4\">\r\n <div class=\"area-card\">\r\n <div>\r\n <div> <span class=\"main-txt me-2\">{{wallCapacity || 0}}</span> <span class=\"unit-txt\">rft</span> </div>\r\n <div class=\"sub-txt\">Wall capacity</div>\r\n </div>\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"65\" height=\"65\" viewBox=\"0 0 65 65\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M4.33333 4.33333V0H8.66667V4.33333H21.6667V0H26V4.33333H39V0H43.3333V4.33333H56.3333V0H60.6667V4.33333H65V8.66667H60.6667V21.6667H65V26H60.6667V39H65V43.3333H60.6667V56.3333H65V60.6667H60.6667V65H56.3333V60.6667H43.3333V65H39V60.6667H26V65H21.6667V60.6667H8.66667V65H4.33333V60.6667H0V56.3333H4.33333V43.3333H0V39H4.33333V26H0V21.6667H4.33333V8.66667H0V4.33333H4.33333ZM8.66667 8.66667V21.6667H21.6667V8.66667H8.66667ZM26 8.66667V21.6667H39V8.66667H26ZM43.3333 8.66667V21.6667H56.3333V8.66667H43.3333ZM56.3333 26H43.3333V39H56.3333V26ZM56.3333 43.3333H43.3333V56.3333H56.3333V43.3333ZM39 56.3333V43.3333H26V56.3333H39ZM21.6667 56.3333V43.3333H8.66667V56.3333H21.6667ZM8.66667 39H21.6667V26H8.66667V39ZM26 26V39H39V26H26Z\"\r\n fill=\"#344054\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"area-card\">\r\n <div>\r\n <div> <span class=\"main-txt me-2\">{{facadeCapacity || 0}}</span> <span class=\"unit-txt\">rft</span> </div>\r\n <div class=\"sub-txt\">Facade capacity</div>\r\n </div>\r\n <div>\r\n <svg width=\"65\" height=\"65\" viewBox=\"0 0 65 65\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"64\" height=\"64\" fill=\"#FDFDFD\" stroke=\"black\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"area-card\">\r\n <div>\r\n <div> <span class=\"main-txt me-2\">{{floorCapacity || 0}}</span> <span class=\"unit-txt\">sqft</span> </div>\r\n <div class=\"sub-txt\">Floor capacity</div>\r\n </div>\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"102\" height=\"58\" viewBox=\"0 0 102 58\" fill=\"none\">\r\n <path d=\"M3.54359 36.4607L29.8929 2.06432L98.0939 6.44191L99.908 55.5468L3.54359 36.4607Z\" stroke=\"#475467\"\r\n stroke-width=\"4\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n <div class=\"col-4\">\r\n <div class=\"c-card\" style=\"height: 75dvh; position: relative;\">\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 Capacity details\r\n </div>\r\n <div class=\"l-pane-desc\">\r\n Below are the capacity details of the elements\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n\r\n </div>\r\n\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>#</th>\r\n <th> <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <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> <span>Wall</span> </th>\r\n <th>RFT ({{wallCapacity || 0}})</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let item of layoutPolygon; let i = index\">\r\n <tr *ngIf=\"item[2] && item[2].elementType === 'wall'\">\r\n <td>\r\n {{1}}\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].elementType}} {{item[2].elementNumber}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].distance}}</div>\r\n\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n <table class=\"table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th>#</th>\r\n <th> <svg class=\"me-2\" 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> <span>Facade</span> </th>\r\n <th>RFT ({{facadeCapacity || 0}})</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let item of layoutPolygon; let i = index\">\r\n <tr *ngIf=\"item[2] && item[2].elementType === 'facade'\">\r\n <td>\r\n {{i}}\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].elementType}} {{item[2].elementNumber}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-td\">{{item[2].distance}}</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 </div>\r\n </div>\r\n <div class=\"col-8\">\r\n <div class=\"c-card \" style=\"height: 75dvh;\">\r\n <div style=\"height: 8%;\" 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\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n 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)\" *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\r\n </div>\r\n\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <button 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 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 <div class=\"hide-scrollbar\" style=\"height: 92%; overflow: scroll; position: relative;\" #scrollContainer>\r\n <canvas #gridCanvas>\r\n\r\n </canvas>\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>\r\n\r\n<ng-template #completeLayout let-modal>\r\n <div class=\"card\">\r\n <div style=\"min-height: unset; border-bottom: unset; padding-top: 2.25rem;\" class=\"card-header\">\r\n <div class=\"card-title\">\r\n <span class=\"modal-header-txt\">Complete Layout</span>\r\n </div>\r\n </div>\r\n <div style=\"padding-top: 1rem;\" class=\"card-body\">\r\n <div class=\"form-check\">\r\n <input (ngModelChange)=\"onModalTypeChange($event)\" [(ngModel)]=\"markAsCompleteType\" class=\"form-check-input\" type=\"radio\" name=\"one\" id=\"single\"\r\n value=\"single\">\r\n <div class=\"ms-3\">\r\n <div class=\"modal-main-txt\">Mark as complete for only <span\r\n class=\"highlight-txt\">{{selectedStore?.storeName}}</span></div>\r\n <div class=\"modal-sub-txt\">This action will considered as layout completion for {{selectedStore?.storeName}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-100 h-0 border my-5 border-bottom-grey\"></div>\r\n <div class=\"form-check mb-5\">\r\n <input (ngModelChange)=\"onModalTypeChange($event)\" [(ngModel)]=\"markAsCompleteType\" class=\"form-check-input\" type=\"radio\" name=\"one\" id=\"multiple\"\r\n value=\"multiple\">\r\n <div class=\"ms-3\">\r\n <div class=\"modal-main-txt\">Mark as complete for all {{planoStoreList.length}} stores</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"markAsCompleteType === 'multiple'\" class=\"table-responsive\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr style=\"border-bottom: 1px solid #EAECF0; background: #FCFCFD;\">\r\n <th>\r\n <div class=\"form-check\">\r\n <input (click)=\"onModalSelectAll($event)\" [(ngModel)]=\"isAllStoreSelected\" class=\"form-check-input c-checkbox\" type=\"checkbox\">\r\n <label class=\"form-check-label check-label modal-storeName\">\r\n Store Name\r\n </label>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr style=\"border-bottom: 1px solid #EAECF0;\" *ngFor=\"let store of planoStoreList\">\r\n <td>\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"store.selected\" class=\"form-check-input c-checkbox\" type=\"checkbox\">\r\n <label class=\"form-check-label check-label modal-storeName\">\r\n {{store?.storeName}}\r\n </label>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <button (click)=\"modal.dismiss()\" class=\"btn btn-outline bg-white me-5\">Cancel</button>\r\n <button (click)=\"updatePlanoStatus(); modal.dismiss()\" class=\"btn btn-sm btn-primary \">Complete</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>", styles: [".storename-txt{color:var(--Black, #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}.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}.area-card{padding:20px;border-radius:6px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;display:flex;justify-content:space-between}.area-card .main-txt{color:#101828;font-size:30px;font-weight:600;line-height:38px}.area-card .unit-txt{color:#101828;font-size:20px;font-style:italic;font-weight:600;line-height:30px}.area-card .sub-txt{color:#475467;font-size:16px;font-weight:500;line-height:24px}th{background:unset!important;border-bottom:unset!important;color:#1d2939;font-size:14px!important;font-weight:600!important;line-height:20px!important}.table-td{padding:10px 14px;border-radius:8px;background:#f9fafb}.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:var(--Gray-100, #F2F4F7)}.modal-header-txt{color:#344054;font-size:16px;font-weight:500;line-height:24px}.modal-main-txt{color:#1d2939;font-size:18px;font-weight:600;line-height:28px}.modal-main-txt .highlight-txt{color:#344054;font-size:16px;font-weight:600;line-height:24px}.modal-sub-txt{color:#667085;font-size:16px;font-weight:400;line-height:24px}.modal-storeName{color:#667085;font-size:14px;font-weight:500;line-height:20px}\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "component", type: i7.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }] });
792
792
  }
793
793
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutSummaryComponent, decorators: [{
794
794
  type: Component,