npm - tango-app-ui-store-builder - Versions diffs - 1.2.10 → 1.2.12 - Mend

tango-app-ui-store-builder 1.2.10 → 1.2.12

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 (50) hide show

package/esm2022/lib/components/fixture-template/template-basic-details/template-basic-details.component.mjs CHANGED Viewed

@@ -284,7 +284,7 @@ export class TemplateBasicDetailsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateBasicDetailsComponent, deps: [{ token: i1.FormBuilder }, { token: i2.ActivatedRoute }, { token: i3.PlanoDataService }, { token: i4.ToastService }, { token: i5.NgbModal }, { token: i2.Router }, { token: i6.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TemplateBasicDetailsComponent, isStandalone: true, selector: "lib-template-basic-details", ngImport: i0, template: "<section id=\"fixture-template-basic-details\" *ngIf=\"!isPageLoading\">\r\n  <div class=\"row gap-4 builder\">\r\n    <div class=\"cols col\">\r\n      <h2>Fixture Details</h2>\r\n      <p>Configure your fixture details here</p>\r\n\r\n      <p>Template unique ID: {{ fixtureTemplateDetails?.templateIndex }}</p>\r\n\r\n      <form [formGroup]=\"fixtureTemplateBasicDetailsForm\">\r\n        <div class=\"form-group mb-4\">\r\n          <label for=\"description\" class=\"form-label mb-1\">Description</label>\r\n          <textarea type=\"text\" class=\"form-control\" id=\"description\" formControlName=\"description\"></textarea>\r\n          <ng-container *ngIf=\"\r\n              fixtureTemplateBasicDetailsForm.get('description')?.touched &&\r\n              fixtureTemplateBasicDetailsForm.get('description')?.invalid\r\n            \">\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('description')?.hasError('whitespace')\">\r\n              Description cannot be only whitespace.\r\n            </small>\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('description')?.hasError('trimSpaces')\">\r\n              No leading or trailing whitespace allowed.\r\n            </small>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"form-group mb-4\">\r\n          <label for=\"fixtureCategory\" class=\"form-label mb-1\">Select fixture type</label>\r\n          <input type=\"text\" class=\"form-control\" id=\"headerLabel\" formControlName=\"fixtureCategory\" readonly />\r\n        </div>\r\n\r\n        <div class=\"form-group mb-4\"\r\n          *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n          <label for=\"headerLabel\" class=\"form-label mb-1\">Header: label</label>\r\n          <input type=\"text\" class=\"form-control\" id=\"headerLabel\" formControlName=\"headerLabel\" />\r\n          <ng-container *ngIf=\"\r\n              fixtureTemplateBasicDetailsForm.get('headerLabel')?.touched &&\r\n              fixtureTemplateBasicDetailsForm.get('headerLabel')?.invalid\r\n            \">\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('headerLabel')?.hasError('whitespace')\">\r\n              Header label cannot be only whitespace.\r\n            </small>\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('headerLabel')?.hasError('trimSpaces')\">\r\n              No leading or trailing whitespace allowed.\r\n            </small>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div formArrayName=\"shelf\">\r\n          <div class=\"mb-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center mt-3\" [class.disabled-click]=\"!isEditMode\">\r\n              <label>No of shelves</label>\r\n              <div class=\"counter-container\">\r\n                <svg role=\"button\" width=\"15\" height=\"14\" viewBox=\"0 0 15 14\" fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\" (click)=\"removeShelf();\">\r\n                  <path d=\"M3.76294 7H11.9296\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>{{ shelfArray.length }}</span>\r\n                <svg role=\"button\" width=\"15\" height=\"14\" viewBox=\"0 0 15 14\" fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\" (click)=\"addShelf();\">\r\n                  <path d=\"M7.15389 2.9165V11.0832M3.07056 6.99984H11.2372\" stroke=\"#667085\" stroke-width=\"2\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <label for=\"shelf\" class=\"mb-2\">Body: Product Capacity at each shelf</label>\r\n          <div *ngFor=\"let shelf of shelfArray?.controls; let i = index\" [formGroupName]=\"i\">\r\n            <div class=\"shelf-container\">\r\n              <div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n                <p>\r\n                  {{ shelf.get(\"shelfType\")?.value === 'vmonly' ? 'VM ONLY SHELF' : (shelf.get(\"shelfType\")?.value || 'panel') | uppercase }}\r\n                  {{ i + 1 }}\r\n                </p>\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                  (click)=\"removeShelf(i); \" class=\"cursor-pointer\" *ngIf=\"shelfArray.length > 1\">\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              <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"shelfTypes\"\r\n                formControlName=\"shelfType\">\r\n              </lib-reactive-select>\r\n\r\n              <div *ngIf=\"shelf.get('shelfType')?.value === 'tray'\"\r\n                class=\"d-flex justify-content-between align-items-center mt-2\">\r\n                <p class=\"m-0\">No of Rows</p>\r\n                <counter-input style=\"width: 40%\" formControlName=\"trayRows\" [step]=\"1\" placeholder=\"0\"></counter-input>\r\n\r\n                <ng-container *ngIf=\"shelf.get('trayRows')?.touched && shelf.get('trayRows')?.errors\">\r\n                  <small *ngIf=\"shelf.get('trayRows')?.hasError('min')\" class=\"text-danger\">\r\n                    Must be at least 1 row.\r\n                  </small>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center mt-2\"\r\n                *ngIf=\"shelf.get('shelfType')?.value !== 'vmonly'\">\r\n                <label>Product capacity</label>\r\n                <counter-input style=\"width: 40%\" formControlName=\"productPerShelf\" [step]=\"1\"\r\n                  placeholder=\"0\"></counter-input>\r\n              </div>\r\n\r\n              <ng-container *ngIf=\"\r\n                  shelf.get('shelfType')?.value !== 'vmonly' &&\r\n                  shelf.get('productPerShelf')?.touched &&\r\n                  shelf.get('productPerShelf')?.errors\r\n                \">\r\n                <small class=\"text-danger\" *ngIf=\"shelf.get('productPerShelf')?.hasError('min')\">\r\n                  Product capacity must be at least 1\r\n                </small>\r\n              </ng-container>\r\n\r\n              <!-- <div *ngIf=\"shelf.get('shelfType')?.value === 'tray'\"\r\n                class=\"d-flex justify-content-between align-items-center mb-2 mt-2\">\r\n                <p class=\"m-0\">No of Rows</p>\r\n                <div class=\"counter-container\" style=\"width: 40%; min-height: 35px\">\r\n                  {{ shelf.get(\"trayRows\")?.value }}\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n                <label>Product capacity</label>\r\n                <counter-input style=\"width: 40%\" formControlName=\"productPerShelf\" [step]=\"1\"\r\n                  placeholder=\"0\"></counter-input>\r\n              </div>\r\n              <ng-container *ngIf=\"shelf.get('productPerShelf')?.touched && shelf.get('productPerShelf')?.errors\">\r\n                <small class=\"text-danger\" *ngIf=\"shelf.get('productPerShelf')?.hasError('min')\">\r\n                  Product capacity cannot be negative.\r\n                </small>\r\n              </ng-container> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group mb-4\"\r\n          *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n          <label for=\"footerLabel\" class=\"form-label mb-1\">Footer: label</label>\r\n          <input type=\"text\" class=\"form-control\" id=\"footerLabel\" formControlName=\"footerLabel\" />\r\n          <ng-container *ngIf=\"\r\n              fixtureTemplateBasicDetailsForm.get('footerLabel')?.touched &&\r\n              fixtureTemplateBasicDetailsForm.get('footerLabel')?.invalid\r\n            \">\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('footerLabel')?.hasError('whitespace')\">\r\n              Footer label cannot be only whitespace.\r\n            </small>\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('footerLabel')?.hasError('trimSpaces')\">\r\n              No leading or trailing whitespace allowed.\r\n            </small>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"cols col-8\">\r\n      <div 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                {{ fixtureTemplateBasicDetailsForm.get(\"headerLabel\")?.value }}\r\n              </p>\r\n            </div>\r\n\r\n            <!-- Body block -->\r\n            <div class=\"body-block\" *ngIf=\"shelfArray.length > 0\">\r\n              <div class=\"shelfContainer\" *ngFor=\"let item of shelfArray.controls; let i = index\">\r\n                @if(item.get('shelfType')?.value ==='tray'){\r\n                  <div class=\"block\">\r\n                    <div *ngFor=\"let product of [].constructor(item.get('trayRows')?.value)\" class=\"tray mb-3\">\r\n                      <div *ngFor=\"let product of [].constructor(item.get('productPerShelf')?.value)\" class=\"product\">\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }@else {\r\n                  <div class=\"block shelf\" [class.vmonly-placeholder]=\"item.get('shelfType')?.value ==='vmonly'\">\r\n                    <div *ngFor=\"let product of [].constructor(item.get('productPerShelf')?.value)\" class=\"product\">\r\n                    </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>{{ fixtureTemplateBasicDetailsForm.get(\"footerLabel\")?.value }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<section id=\"fixture-template-basic-details-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}.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%}\n"], dependencies: [{ kind: "component", type: CounterInputComponent, selector: "counter-input", inputs: ["step", "placeholder", "max"], outputs: ["onIncrement", "onDecrement"] }, { 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.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: NgbAccordionModule }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TemplateBasicDetailsComponent, isStandalone: true, selector: "lib-template-basic-details", ngImport: i0, template: "<section id=\"fixture-template-basic-details\" *ngIf=\"!isPageLoading\">\r\n  <div class=\"row gap-4 builder\">\r\n    <div class=\"cols col\">\r\n      <h2>Fixture Details</h2>\r\n      <p>Configure your fixture details here</p>\r\n\r\n      <p>Template unique ID: {{ fixtureTemplateDetails?.templateIndex }}</p>\r\n\r\n      <form [formGroup]=\"fixtureTemplateBasicDetailsForm\">\r\n        <div class=\"form-group mb-4\">\r\n          <label for=\"description\" class=\"form-label mb-1\">Description</label>\r\n          <textarea type=\"text\" class=\"form-control\" id=\"description\" formControlName=\"description\"></textarea>\r\n          <ng-container *ngIf=\"\r\n              fixtureTemplateBasicDetailsForm.get('description')?.touched &&\r\n              fixtureTemplateBasicDetailsForm.get('description')?.invalid\r\n            \">\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('description')?.hasError('whitespace')\">\r\n              Description cannot be only whitespace.\r\n            </small>\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('description')?.hasError('trimSpaces')\">\r\n              No leading or trailing whitespace allowed.\r\n            </small>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"form-group mb-4\">\r\n          <label for=\"fixtureCategory\" class=\"form-label mb-1\">Select fixture type</label>\r\n          <input type=\"text\" class=\"form-control\" id=\"headerLabel\" formControlName=\"fixtureCategory\" readonly />\r\n        </div>\r\n\r\n        <div class=\"form-group mb-4\"\r\n          *ngIf=\"fixtureTemplateDetails?.header?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n          <label for=\"headerLabel\" class=\"form-label mb-1\">Header: label</label>\r\n          <input type=\"text\" class=\"form-control\" id=\"headerLabel\" formControlName=\"headerLabel\" />\r\n          <ng-container *ngIf=\"\r\n              fixtureTemplateBasicDetailsForm.get('headerLabel')?.touched &&\r\n              fixtureTemplateBasicDetailsForm.get('headerLabel')?.invalid\r\n            \">\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('headerLabel')?.hasError('whitespace')\">\r\n              Header label cannot be only whitespace.\r\n            </small>\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('headerLabel')?.hasError('trimSpaces')\">\r\n              No leading or trailing whitespace allowed.\r\n            </small>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div formArrayName=\"shelf\">\r\n          <div class=\"mb-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center mt-3\" [class.disabled-click]=\"!isEditMode\">\r\n              <label>No of shelves</label>\r\n              <div class=\"counter-container\">\r\n                <svg role=\"button\" width=\"15\" height=\"14\" viewBox=\"0 0 15 14\" fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\" (click)=\"removeShelf();\">\r\n                  <path d=\"M3.76294 7H11.9296\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>{{ shelfArray.length }}</span>\r\n                <svg role=\"button\" width=\"15\" height=\"14\" viewBox=\"0 0 15 14\" fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\" (click)=\"addShelf();\">\r\n                  <path d=\"M7.15389 2.9165V11.0832M3.07056 6.99984H11.2372\" stroke=\"#667085\" stroke-width=\"2\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <label for=\"shelf\" class=\"mb-2\">Body: Product Capacity at each shelf</label>\r\n          <div *ngFor=\"let shelf of shelfArray?.controls; let i = index\" [formGroupName]=\"i\">\r\n            <div class=\"shelf-container\">\r\n              <div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n                <p>\r\n                  {{ shelf.get(\"shelfType\")?.value === 'vmonly' ? 'VM ONLY SHELF' : (shelf.get(\"shelfType\")?.value || 'panel') | uppercase }}\r\n                  {{ i + 1 }}\r\n                </p>\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                  (click)=\"removeShelf(i); \" class=\"cursor-pointer\" *ngIf=\"shelfArray.length > 1\">\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              <lib-reactive-select [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"shelfTypes\"\r\n                formControlName=\"shelfType\">\r\n              </lib-reactive-select>\r\n\r\n              <div *ngIf=\"shelf.get('shelfType')?.value === 'tray'\"\r\n                class=\"d-flex justify-content-between align-items-center mt-2\">\r\n                <p class=\"m-0\">No of Rows</p>\r\n                <counter-input style=\"width: 40%\" formControlName=\"trayRows\" [step]=\"1\" placeholder=\"0\"></counter-input>\r\n\r\n                <ng-container *ngIf=\"shelf.get('trayRows')?.touched && shelf.get('trayRows')?.errors\">\r\n                  <small *ngIf=\"shelf.get('trayRows')?.hasError('min')\" class=\"text-danger\">\r\n                    Must be at least 1 row.\r\n                  </small>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center mt-2\"\r\n                *ngIf=\"shelf.get('shelfType')?.value !== 'vmonly'\">\r\n                <label>Product capacity</label>\r\n                <counter-input style=\"width: 40%\" formControlName=\"productPerShelf\" [step]=\"1\"\r\n                  placeholder=\"0\"></counter-input>\r\n              </div>\r\n\r\n              <ng-container *ngIf=\"\r\n                  shelf.get('shelfType')?.value !== 'vmonly' &&\r\n                  shelf.get('productPerShelf')?.touched &&\r\n                  shelf.get('productPerShelf')?.errors\r\n                \">\r\n                <small class=\"text-danger\" *ngIf=\"shelf.get('productPerShelf')?.hasError('min')\">\r\n                  Product capacity must be at least 1\r\n                </small>\r\n              </ng-container>\r\n\r\n              <!-- <div *ngIf=\"shelf.get('shelfType')?.value === 'tray'\"\r\n                class=\"d-flex justify-content-between align-items-center mb-2 mt-2\">\r\n                <p class=\"m-0\">No of Rows</p>\r\n                <div class=\"counter-container\" style=\"width: 40%; min-height: 35px\">\r\n                  {{ shelf.get(\"trayRows\")?.value }}\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n                <label>Product capacity</label>\r\n                <counter-input style=\"width: 40%\" formControlName=\"productPerShelf\" [step]=\"1\"\r\n                  placeholder=\"0\"></counter-input>\r\n              </div>\r\n              <ng-container *ngIf=\"shelf.get('productPerShelf')?.touched && shelf.get('productPerShelf')?.errors\">\r\n                <small class=\"text-danger\" *ngIf=\"shelf.get('productPerShelf')?.hasError('min')\">\r\n                  Product capacity cannot be negative.\r\n                </small>\r\n              </ng-container> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group mb-4\"\r\n          *ngIf=\"fixtureTemplateDetails?.footer?.isEnabled && fixtureTemplateDetails?.fixtureType === 'wall'\">\r\n          <label for=\"footerLabel\" class=\"form-label mb-1\">Footer: label</label>\r\n          <input type=\"text\" class=\"form-control\" id=\"footerLabel\" formControlName=\"footerLabel\" />\r\n          <ng-container *ngIf=\"\r\n              fixtureTemplateBasicDetailsForm.get('footerLabel')?.touched &&\r\n              fixtureTemplateBasicDetailsForm.get('footerLabel')?.invalid\r\n            \">\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('footerLabel')?.hasError('whitespace')\">\r\n              Footer label cannot be only whitespace.\r\n            </small>\r\n            <small class=\"text-danger\"\r\n              *ngIf=\"fixtureTemplateBasicDetailsForm.get('footerLabel')?.hasError('trimSpaces')\">\r\n              No leading or trailing whitespace allowed.\r\n            </small>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"cols col-8\">\r\n      <div 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                {{ fixtureTemplateBasicDetailsForm.get(\"headerLabel\")?.value }}\r\n              </p>\r\n            </div>\r\n\r\n            <!-- Body block -->\r\n            <div class=\"body-block\" *ngIf=\"shelfArray.length > 0\">\r\n              <div class=\"shelfContainer\" *ngFor=\"let item of shelfArray.controls; let i = index\">\r\n                @if(item.get('shelfType')?.value ==='tray'){\r\n                  <div class=\"block\">\r\n                    <div *ngFor=\"let product of [].constructor(item.get('trayRows')?.value)\" class=\"tray mb-3\">\r\n                      <div *ngFor=\"let product of [].constructor(item.get('productPerShelf')?.value)\" class=\"product\">\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }@else {\r\n                  <div class=\"block shelf\" [class.vmonly-placeholder]=\"item.get('shelfType')?.value ==='vmonly'\">\r\n                    <div *ngFor=\"let product of [].constructor(item.get('productPerShelf')?.value)\" class=\"product\">\r\n                    </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>{{ fixtureTemplateBasicDetailsForm.get(\"footerLabel\")?.value }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<section id=\"fixture-template-basic-details-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}.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%}\n"], dependencies: [{ kind: "component", type: CounterInputComponent, selector: "counter-input", inputs: ["step", "placeholder", "max"], outputs: ["onIncrement", "onDecrement"] }, { 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.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: NgbAccordionModule }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateBasicDetailsComponent, decorators: [{
             type: Component,