tango-app-ui-store-builder 1.0.40 → 1.0.42

package/fesm2022/tango-app-ui-store-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, ViewChild, Input, EventEmitter, Output, HostListener, ChangeDetectionStrategy, forwardRef, Pipe, ViewChildren, NgModule } from '@angular/core';
+import { Component, Injectable, inject, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, HostListener, Output, forwardRef, Pipe, ViewChildren, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import * as i2$1 from 'tango-app-ui-global';
@@ -13632,7 +13632,6 @@ class ManageStorePlanoComponent {
     drawEntrance(canvas, x, y, width, height, arrowWidth, elementData) {
         const bodyWidth = width - arrowWidth;
         const angle = this.floorData?.cadLayout ? 0 : elementData.angle;
-        console.log("@@ ~ angle:", angle);
         const pathData = [
             `M 0 0`,
             `L ${bodyWidth} 0`,
@@ -14571,8 +14570,8 @@ class ManageStorePlanoComponent {
     }
     findEmptyCenterSpot(objectWidthPx, objectHeightPx, tempOccupied = []) {
         const objects = this.canvas.getObjects();
-        const CENTER_OFFSET_X = -100; // 👈 move left by 40px (tune this)
-        const CENTER_OFFSET_Y = 0; // keep Y as-is for now
+        const CENTER_OFFSET_X = -300;
+        const CENTER_OFFSET_Y = 0;
         const bounds = this.getFullLayoutBounds();
         const centerX = bounds.left + bounds.width / 2 + CENTER_OFFSET_X;
         const centerY = bounds.top + bounds.height / 2 + CENTER_OFFSET_Y;
@@ -15410,6 +15409,7 @@ class ManageStorePlanoComponent {
                 },
                 floors: undefined,
             };
+            console.log("@@ ~ publishData:", publishData);
             await Promise.all([
                 firstValueFrom(this.apiService.updateStorePlano({
                     floorId,
@@ -34969,11 +34969,11 @@ class ZoneProductsComponent {
         this.activeModal.close(fixtureDetails);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneProductsComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ZoneProductsComponent, selector: "zone-products", inputs: { data: "data", level: "level" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n    <div class=\"d-flex justify-content-between mb-4\">\r\n        <h3 class=\"title\">{{data.zone}}</h3>\r\n\r\n        <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n            <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </div>\r\n\r\n    @if(selectedProduct){\r\n    <div class=\"hero-card\">\r\n        <div class=\"hero-img\">\r\n            <img *ngIf=\"selectedProduct?.productImageUrl; else placeholder\" [src]=\"selectedProduct?.productImageUrl\"\r\n                alt=\"Product Image\" />\r\n            <ng-template #placeholder>\r\n                <div class=\"missing-img\">MISSING</div>\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div class=\"hero-details\">\r\n            <div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Brand</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.brandName ?? brandName}}</p>\r\n                </div>\r\n\r\n                @if(selectedProduct?.status !== 'missing'){\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Category</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.category}}</p>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">SKU</p>\r\n                    <span> : </span>\r\n                    <div class=\"d-flex gap-2 align-items-center\">\r\n                        <p class=\"details\">{{selectedProduct?.pid}}</p>\r\n                        <svg (click)=\"copySKU(selectedProduct?.pid)\" class=\"cursor-pointer\" width=\"16\" height=\"16\"\r\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <g clip-path=\"url(#clip0_5307_114007)\">\r\n                                <path\r\n                                    d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n                                    stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_5307_114007\">\r\n                                    <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg>\r\n\r\n                    </div>\r\n                </div>\r\n                }\r\n                <div *ngIf=\"selectedProduct?.status\" class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Compliance</p>\r\n                    <span> : </span>\r\n                    <span class=\"indicator \"\r\n                        [ngClass]=\"{flagged:selectedProduct?.status === 'missing' || selectedProduct?.status ==='misplaced',completed:selectedProduct?.status ==='proper'}\">\r\n                        {{selectedProduct?.status | titlecase}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\" *ngIf=\"productNote\">\r\n                    <p class=\"heading\">Action required</p>\r\n                    <span> : </span>\r\n                    <!-- <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_3914_56687)\">\r\n                            <path\r\n                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3914_56687\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg> -->\r\n                    @if(selectedProduct?.fixtureDetails?.fixtureName){\r\n                    <a class=\"cursor-pointer text-underline-underline mt-1\" (click)=\"onClickLocateFixture(selectedProduct?.fixtureDetails)\">{{productNote}}</a>\r\n                    }@else {\r\n                    <p class=\"details\">\r\n                        {{productNote}}\r\n                    </p>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n            <div>\r\n                <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                        d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n                        stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n    <div class=\"zone-details my-2\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div class=\"zone-info\">\r\n                <span class=\"badge draft mb-3\">\r\n                    {{ data.zone }}\r\n                </span>\r\n                <h1>{{allBrands}}</h1>\r\n                <h4>Capacity {{zoneCapacity}}</h4>\r\n            </div>\r\n\r\n            <div class=\"shelves\">\r\n                <ng-container *ngFor=\"let s of data.shelves; let i = index\">\r\n                    @if(s.shelfType ==='shelf'){\r\n                    <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let p of s.products\" class=\"product\" (click)=\"onSelectProduct(p.productId,s)\"\r\n                            [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\">\r\n\r\n                            @if(p.status != 'missing'){\r\n                            <div class=\"product-img\">\r\n                                <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                    alt=\"Product Image\" />\r\n                                <ng-template #placeholder>\r\n                                    <div></div>\r\n                                </ng-template>\r\n                            </div>\r\n                            <div class=\"product-details\">\r\n                                <span class=\"badge cluster\">\r\n                                    {{ p.productId }}\r\n                                </span>\r\n                                <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                <p class=\"ms-1\">{{p.productType}}</p>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }@else {\r\n                        <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        }\r\n                    </div>\r\n                    }@else {\r\n                    <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let row of s.distributedRows\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of row\" class=\"product\"\r\n                                [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\"\r\n                                (click)=\"onSelectProduct(p.productId,s)\">\r\n                                @if(p.status != 'missing'){\r\n                                <div class=\"product-img\">\r\n                                    <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                        alt=\"Product Image\" />\r\n                                    <ng-template #placeholder>\r\n                                        <div></div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"product-details\">\r\n                                    <span class=\"badge cluster\">\r\n                                        {{ p.productId }}\r\n                                    </span>\r\n                                    <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                    <p class=\"ms-1\">{{p.productType}}</p>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        }@else{\r\n                        <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- <button type=\"button\" class=\"btn btn-primary w-100\" (click)=\"onClickRefresh()\">Refresh</button> -->\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;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 .block{border:1px solid #98a2b3;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 .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #12B76A;padding:6px;border-radius:4px;min-width:96px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product.selected,#zone-product-details .zone-details .shelves .shelf .product.selected{border:2px solid #12B76A;background-color:#e0fbe9}#zone-product-details .zone-details .shelves .tray .product.error,#zone-product-details .zone-details .shelves .shelf .product.error{border:2px solid rgb(253,162,155);background-color:#fef3f2}#zone-product-details .zone-details .shelves .tray .product.error.selected,#zone-product-details .zone-details .shelves .shelf .product.error.selected{border:2px solid rgb(255,172,168);background-color:#ffe7e5}#zone-product-details .zone-details .shelves .tray .product:hover,#zone-product-details .zone-details .shelves .shelf .product:hover{cursor:pointer}#zone-product-details .zone-details .shelves .tray .product .product-img,#zone-product-details .zone-details .shelves .shelf .product .product-img{width:80px;height:40px;border:1.23px solid rgb(234,236,240);margin-bottom:8px;box-shadow:0 1.23px 2.47px #1018280d;border-radius:4px}#zone-product-details .zone-details .shelves .tray .product .product-img img,#zone-product-details .zone-details .shelves .shelf .product .product-img img{border-radius:4px;height:100%;width:100%;object-fit:cover}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-size:8px;font-weight:600;color:#101828;margin:0}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\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: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ZoneProductsComponent, selector: "zone-products", inputs: { data: "data", level: "level" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n    <div class=\"d-flex justify-content-between mb-4\">\r\n        <h3 class=\"title\">{{data.zone}}</h3>\r\n\r\n        <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n            <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </div>\r\n\r\n    @if(selectedProduct){\r\n    <div class=\"hero-card\">\r\n        <div class=\"hero-img\">\r\n            <img *ngIf=\"selectedProduct?.productImageUrl; else placeholder\" [src]=\"selectedProduct?.productImageUrl\"\r\n                alt=\"Product Image\" />\r\n            <ng-template #placeholder>\r\n                <div class=\"missing-img\">MISSING</div>\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div class=\"hero-details\">\r\n            <div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Brand</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.brandName ?? brandName}}</p>\r\n                </div>\r\n\r\n                @if(selectedProduct?.status !== 'missing'){\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Category</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.category}}</p>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">SKU</p>\r\n                    <span> : </span>\r\n                    <div class=\"d-flex gap-2 align-items-center\">\r\n                        <p class=\"details\">{{selectedProduct?.barCode}}</p>\r\n                        <svg (click)=\"copySKU(selectedProduct?.barCode)\" class=\"cursor-pointer\" width=\"16\" height=\"16\"\r\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <g clip-path=\"url(#clip0_5307_114007)\">\r\n                                <path\r\n                                    d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n                                    stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_5307_114007\">\r\n                                    <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg>\r\n\r\n                    </div>\r\n                </div>\r\n                }\r\n                <div *ngIf=\"selectedProduct?.status\" class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Compliance</p>\r\n                    <span> : </span>\r\n                    <span class=\"indicator \"\r\n                        [ngClass]=\"{flagged:selectedProduct?.status === 'missing' || selectedProduct?.status ==='misplaced',completed:selectedProduct?.status ==='proper'}\">\r\n                        {{selectedProduct?.status | titlecase}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\" *ngIf=\"productNote\">\r\n                    <p class=\"heading\">Action required</p>\r\n                    <span> : </span>\r\n                    <!-- <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_3914_56687)\">\r\n                            <path\r\n                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3914_56687\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg> -->\r\n                    @if(selectedProduct?.fixtureDetails?.fixtureName){\r\n                    <a class=\"cursor-pointer text-underline-underline mt-1\" (click)=\"onClickLocateFixture(selectedProduct?.fixtureDetails)\">{{productNote}}</a>\r\n                    }@else {\r\n                    <p class=\"details\">\r\n                        {{productNote}}\r\n                    </p>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n            <div>\r\n                <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                        d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n                        stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n    <div class=\"zone-details my-2\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div class=\"zone-info\">\r\n                <span class=\"badge draft mb-3\">\r\n                    {{ data.zone }}\r\n                </span>\r\n                <h1>{{allBrands}}</h1>\r\n                <h4>Capacity {{zoneCapacity}}</h4>\r\n            </div>\r\n\r\n            <div class=\"shelves\">\r\n                <ng-container *ngFor=\"let s of data.shelves; let i = index\">\r\n                    @if(s.shelfType ==='shelf'){\r\n                    <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let p of s.products\" class=\"product\" (click)=\"onSelectProduct(p.productId,s)\"\r\n                            [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\">\r\n\r\n                            @if(p.status != 'missing'){\r\n                            <div class=\"product-img\">\r\n                                <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                    alt=\"Product Image\" />\r\n                                <ng-template #placeholder>\r\n                                    <div></div>\r\n                                </ng-template>\r\n                            </div>\r\n                            <div class=\"product-details\">\r\n                                <span class=\"badge cluster\">\r\n                                    {{ p.productId }}\r\n                                </span>\r\n                                <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                <p class=\"ms-1\">{{p.productType}}</p>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }@else {\r\n                        <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        }\r\n                    </div>\r\n                    }@else {\r\n                    <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let row of s.distributedRows\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of row\" class=\"product\"\r\n                                [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\"\r\n                                (click)=\"onSelectProduct(p.productId,s)\">\r\n                                @if(p.status != 'missing'){\r\n                                <div class=\"product-img\">\r\n                                    <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                        alt=\"Product Image\" />\r\n                                    <ng-template #placeholder>\r\n                                        <div></div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"product-details\">\r\n                                    <span class=\"badge cluster\">\r\n                                        {{ p.productId }}\r\n                                    </span>\r\n                                    <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                    <p class=\"ms-1\">{{p.productType}}</p>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        }@else{\r\n                        <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- <button type=\"button\" class=\"btn btn-primary w-100\" (click)=\"onClickRefresh()\">Refresh</button> -->\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;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 .block{border:1px solid #98a2b3;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 .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #12B76A;padding:6px;border-radius:4px;min-width:96px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product.selected,#zone-product-details .zone-details .shelves .shelf .product.selected{border:2px solid #12B76A;background-color:#e0fbe9}#zone-product-details .zone-details .shelves .tray .product.error,#zone-product-details .zone-details .shelves .shelf .product.error{border:2px solid rgb(253,162,155);background-color:#fef3f2}#zone-product-details .zone-details .shelves .tray .product.error.selected,#zone-product-details .zone-details .shelves .shelf .product.error.selected{border:2px solid rgb(255,172,168);background-color:#ffe7e5}#zone-product-details .zone-details .shelves .tray .product:hover,#zone-product-details .zone-details .shelves .shelf .product:hover{cursor:pointer}#zone-product-details .zone-details .shelves .tray .product .product-img,#zone-product-details .zone-details .shelves .shelf .product .product-img{width:80px;height:40px;border:1.23px solid rgb(234,236,240);margin-bottom:8px;box-shadow:0 1.23px 2.47px #1018280d;border-radius:4px}#zone-product-details .zone-details .shelves .tray .product .product-img img,#zone-product-details .zone-details .shelves .shelf .product .product-img img{border-radius:4px;height:100%;width:100%;object-fit:cover}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-size:8px;font-weight:600;color:#101828;margin:0}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\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: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneProductsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "zone-products", template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n    <div class=\"d-flex justify-content-between mb-4\">\r\n        <h3 class=\"title\">{{data.zone}}</h3>\r\n\r\n        <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n            <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </div>\r\n\r\n    @if(selectedProduct){\r\n    <div class=\"hero-card\">\r\n        <div class=\"hero-img\">\r\n            <img *ngIf=\"selectedProduct?.productImageUrl; else placeholder\" [src]=\"selectedProduct?.productImageUrl\"\r\n                alt=\"Product Image\" />\r\n            <ng-template #placeholder>\r\n                <div class=\"missing-img\">MISSING</div>\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div class=\"hero-details\">\r\n            <div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Brand</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.brandName ?? brandName}}</p>\r\n                </div>\r\n\r\n                @if(selectedProduct?.status !== 'missing'){\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Category</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.category}}</p>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">SKU</p>\r\n                    <span> : </span>\r\n                    <div class=\"d-flex gap-2 align-items-center\">\r\n                        <p class=\"details\">{{selectedProduct?.pid}}</p>\r\n                        <svg (click)=\"copySKU(selectedProduct?.pid)\" class=\"cursor-pointer\" width=\"16\" height=\"16\"\r\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <g clip-path=\"url(#clip0_5307_114007)\">\r\n                                <path\r\n                                    d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n                                    stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_5307_114007\">\r\n                                    <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg>\r\n\r\n                    </div>\r\n                </div>\r\n                }\r\n                <div *ngIf=\"selectedProduct?.status\" class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Compliance</p>\r\n                    <span> : </span>\r\n                    <span class=\"indicator \"\r\n                        [ngClass]=\"{flagged:selectedProduct?.status === 'missing' || selectedProduct?.status ==='misplaced',completed:selectedProduct?.status ==='proper'}\">\r\n                        {{selectedProduct?.status | titlecase}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\" *ngIf=\"productNote\">\r\n                    <p class=\"heading\">Action required</p>\r\n                    <span> : </span>\r\n                    <!-- <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_3914_56687)\">\r\n                            <path\r\n                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3914_56687\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg> -->\r\n                    @if(selectedProduct?.fixtureDetails?.fixtureName){\r\n                    <a class=\"cursor-pointer text-underline-underline mt-1\" (click)=\"onClickLocateFixture(selectedProduct?.fixtureDetails)\">{{productNote}}</a>\r\n                    }@else {\r\n                    <p class=\"details\">\r\n                        {{productNote}}\r\n                    </p>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n            <div>\r\n                <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                        d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n                        stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n    <div class=\"zone-details my-2\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div class=\"zone-info\">\r\n                <span class=\"badge draft mb-3\">\r\n                    {{ data.zone }}\r\n                </span>\r\n                <h1>{{allBrands}}</h1>\r\n                <h4>Capacity {{zoneCapacity}}</h4>\r\n            </div>\r\n\r\n            <div class=\"shelves\">\r\n                <ng-container *ngFor=\"let s of data.shelves; let i = index\">\r\n                    @if(s.shelfType ==='shelf'){\r\n                    <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let p of s.products\" class=\"product\" (click)=\"onSelectProduct(p.productId,s)\"\r\n                            [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\">\r\n\r\n                            @if(p.status != 'missing'){\r\n                            <div class=\"product-img\">\r\n                                <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                    alt=\"Product Image\" />\r\n                                <ng-template #placeholder>\r\n                                    <div></div>\r\n                                </ng-template>\r\n                            </div>\r\n                            <div class=\"product-details\">\r\n                                <span class=\"badge cluster\">\r\n                                    {{ p.productId }}\r\n                                </span>\r\n                                <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                <p class=\"ms-1\">{{p.productType}}</p>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }@else {\r\n                        <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        }\r\n                    </div>\r\n                    }@else {\r\n                    <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let row of s.distributedRows\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of row\" class=\"product\"\r\n                                [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\"\r\n                                (click)=\"onSelectProduct(p.productId,s)\">\r\n                                @if(p.status != 'missing'){\r\n                                <div class=\"product-img\">\r\n                                    <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                        alt=\"Product Image\" />\r\n                                    <ng-template #placeholder>\r\n                                        <div></div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"product-details\">\r\n                                    <span class=\"badge cluster\">\r\n                                        {{ p.productId }}\r\n                                    </span>\r\n                                    <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                    <p class=\"ms-1\">{{p.productType}}</p>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        }@else{\r\n                        <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- <button type=\"button\" class=\"btn btn-primary w-100\" (click)=\"onClickRefresh()\">Refresh</button> -->\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;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 .block{border:1px solid #98a2b3;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 .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #12B76A;padding:6px;border-radius:4px;min-width:96px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product.selected,#zone-product-details .zone-details .shelves .shelf .product.selected{border:2px solid #12B76A;background-color:#e0fbe9}#zone-product-details .zone-details .shelves .tray .product.error,#zone-product-details .zone-details .shelves .shelf .product.error{border:2px solid rgb(253,162,155);background-color:#fef3f2}#zone-product-details .zone-details .shelves .tray .product.error.selected,#zone-product-details .zone-details .shelves .shelf .product.error.selected{border:2px solid rgb(255,172,168);background-color:#ffe7e5}#zone-product-details .zone-details .shelves .tray .product:hover,#zone-product-details .zone-details .shelves .shelf .product:hover{cursor:pointer}#zone-product-details .zone-details .shelves .tray .product .product-img,#zone-product-details .zone-details .shelves .shelf .product .product-img{width:80px;height:40px;border:1.23px solid rgb(234,236,240);margin-bottom:8px;box-shadow:0 1.23px 2.47px #1018280d;border-radius:4px}#zone-product-details .zone-details .shelves .tray .product .product-img img,#zone-product-details .zone-details .shelves .shelf .product .product-img img{border-radius:4px;height:100%;width:100%;object-fit:cover}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-size:8px;font-weight:600;color:#101828;margin:0}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\n"] }]
+            args: [{ selector: "zone-products", template: "<div class=\"modal-container\" id=\"zone-product-details\">\r\n    <div class=\"d-flex justify-content-between mb-4\">\r\n        <h3 class=\"title\">{{data.zone}}</h3>\r\n\r\n        <svg (click)=\"onClickClose()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\" class=\"cursor-pointer\">\r\n            <path d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </div>\r\n\r\n    @if(selectedProduct){\r\n    <div class=\"hero-card\">\r\n        <div class=\"hero-img\">\r\n            <img *ngIf=\"selectedProduct?.productImageUrl; else placeholder\" [src]=\"selectedProduct?.productImageUrl\"\r\n                alt=\"Product Image\" />\r\n            <ng-template #placeholder>\r\n                <div class=\"missing-img\">MISSING</div>\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div class=\"hero-details\">\r\n            <div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Brand</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.brandName ?? brandName}}</p>\r\n                </div>\r\n\r\n                @if(selectedProduct?.status !== 'missing'){\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Category</p>\r\n                    <span> : </span>\r\n                    <p class=\"details\">{{selectedProduct?.category}}</p>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">SKU</p>\r\n                    <span> : </span>\r\n                    <div class=\"d-flex gap-2 align-items-center\">\r\n                        <p class=\"details\">{{selectedProduct?.barCode}}</p>\r\n                        <svg (click)=\"copySKU(selectedProduct?.barCode)\" class=\"cursor-pointer\" width=\"16\" height=\"16\"\r\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <g clip-path=\"url(#clip0_5307_114007)\">\r\n                                <path\r\n                                    d=\"M3.33203 10H2.66536C2.31174 10 1.9726 9.85956 1.72256 9.60952C1.47251 9.35947 1.33203 9.02033 1.33203 8.66671V2.66671C1.33203 2.31309 1.47251 1.97395 1.72256 1.7239C1.9726 1.47385 2.31174 1.33337 2.66536 1.33337H8.66536C9.01899 1.33337 9.35813 1.47385 9.60817 1.7239C9.85822 1.97395 9.9987 2.31309 9.9987 2.66671V3.33337M7.33203 6.00004H13.332C14.0684 6.00004 14.6654 6.59699 14.6654 7.33337V13.3334C14.6654 14.0698 14.0684 14.6667 13.332 14.6667H7.33203C6.59565 14.6667 5.9987 14.0698 5.9987 13.3334V7.33337C5.9987 6.59699 6.59565 6.00004 7.33203 6.00004Z\"\r\n                                    stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_5307_114007\">\r\n                                    <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg>\r\n\r\n                    </div>\r\n                </div>\r\n                }\r\n                <div *ngIf=\"selectedProduct?.status\" class=\"d-flex align-items-center gap-2 mb-2\">\r\n                    <p class=\"heading\">Compliance</p>\r\n                    <span> : </span>\r\n                    <span class=\"indicator \"\r\n                        [ngClass]=\"{flagged:selectedProduct?.status === 'missing' || selectedProduct?.status ==='misplaced',completed:selectedProduct?.status ==='proper'}\">\r\n                        {{selectedProduct?.status | titlecase}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"d-flex align-items-center gap-2 mb-2\" *ngIf=\"productNote\">\r\n                    <p class=\"heading\">Action required</p>\r\n                    <span> : </span>\r\n                    <!-- <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_3914_56687)\">\r\n                            <path\r\n                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3914_56687\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg> -->\r\n                    @if(selectedProduct?.fixtureDetails?.fixtureName){\r\n                    <a class=\"cursor-pointer text-underline-underline mt-1\" (click)=\"onClickLocateFixture(selectedProduct?.fixtureDetails)\">{{productNote}}</a>\r\n                    }@else {\r\n                    <p class=\"details\">\r\n                        {{productNote}}\r\n                    </p>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n            <div>\r\n                <svg (click)=\"selectedProduct = null\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                        d=\"M2.66667 9.33333H6.66667M6.66667 9.33333V13.3333M6.66667 9.33333L2 14M13.3333 6.66667H9.33333M9.33333 6.66667V2.66667M9.33333 6.66667L14 2\"\r\n                        stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n    <div class=\"zone-details my-2\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div class=\"zone-info\">\r\n                <span class=\"badge draft mb-3\">\r\n                    {{ data.zone }}\r\n                </span>\r\n                <h1>{{allBrands}}</h1>\r\n                <h4>Capacity {{zoneCapacity}}</h4>\r\n            </div>\r\n\r\n            <div class=\"shelves\">\r\n                <ng-container *ngFor=\"let s of data.shelves; let i = index\">\r\n                    @if(s.shelfType ==='shelf'){\r\n                    <div [id]=\"s.shelfType + (i + 1)\" class=\"block shelf\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let p of s.products\" class=\"product\" (click)=\"onSelectProduct(p.productId,s)\"\r\n                            [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\">\r\n\r\n                            @if(p.status != 'missing'){\r\n                            <div class=\"product-img\">\r\n                                <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                    alt=\"Product Image\" />\r\n                                <ng-template #placeholder>\r\n                                    <div></div>\r\n                                </ng-template>\r\n                            </div>\r\n                            <div class=\"product-details\">\r\n                                <span class=\"badge cluster\">\r\n                                    {{ p.productId }}\r\n                                </span>\r\n                                <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                <p class=\"ms-1\">{{p.productType}}</p>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }@else {\r\n                        <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        }\r\n                    </div>\r\n                    }@else {\r\n                    <div [id]=\"s.shelfType! + (i + 1)\" class=\"block\">\r\n                        @if(s.products.length){\r\n                        <div *ngFor=\"let row of s.distributedRows\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of row\" class=\"product\"\r\n                                [ngClass]=\"{'selected':selectedProduct?.productId === p.productId,'error':p.status === 'missing' || p.status === 'misplaced'}\"\r\n                                (click)=\"onSelectProduct(p.productId,s)\">\r\n                                @if(p.status != 'missing'){\r\n                                <div class=\"product-img\">\r\n                                    <img *ngIf=\"p?.productImageUrl; else placeholder\" [src]=\"p?.productImageUrl\"\r\n                                        alt=\"Product Image\" />\r\n                                    <ng-template #placeholder>\r\n                                        <div></div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"product-details\">\r\n                                    <span class=\"badge cluster\">\r\n                                        {{ p.productId }}\r\n                                    </span>\r\n                                    <h6 class=\"ms-1\">{{p.productName}}</h6>\r\n                                    <p class=\"ms-1\">{{p.productType}}</p>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        }@else{\r\n                        <div *ngFor=\"let row of [].constructor(s.trayRows)\" class=\"tray mb-3\">\r\n                            <div *ngFor=\"let p of [].constructor(s.productPerShelf)\" class=\"product\"></div>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- <button type=\"button\" class=\"btn btn-primary w-100\" (click)=\"onClickRefresh()\">Refresh</button> -->\r\n</div>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;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 .block{border:1px solid #98a2b3;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 .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.modal-container{padding:24px}.wrapper{margin:22px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.modal-actions{display:flex;justify-content:stretch;gap:12px}#zone-product-details .title{font-size:16px;font-weight:600;color:#1d2939;margin:0}#zone-product-details .hero-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px;display:flex;gap:26px}#zone-product-details .hero-card .hero-img{height:100px;width:200px;background-color:#fff;border:2px solid #eaecf0;border-radius:16px;display:flex;justify-content:center;align-items:center}#zone-product-details .hero-card .hero-img img{height:100%;width:100%;object-fit:cover;border-radius:16px}#zone-product-details .hero-card .hero-img .missing-img{font-size:28px;color:#a5a5a587;font-weight:600}#zone-product-details .hero-card .hero-details{display:flex;justify-content:space-between;width:100%;align-items:start}#zone-product-details .hero-card .hero-details p{margin:0;font-size:12px}#zone-product-details .hero-card .hero-details .heading{color:#667085;font-weight:500;width:100px}#zone-product-details .hero-card .hero-details .details{color:#344054;font-weight:600}#zone-product-details .zone-details{padding:12px;border-radius:6px;border:1px solid #51c1ff;background-color:#f6fcff}#zone-product-details .zone-details .zone-info{max-width:200px;min-width:150px}#zone-product-details .zone-details .zone-info h1{font-weight:600;font-size:14px;line-height:20px;color:#101828;margin-bottom:0}#zone-product-details .zone-details .zone-info h4{font-weight:400;font-size:12px;line-height:18px;color:#101828}#zone-product-details .zone-details .shelves{width:100%;overflow:auto}#zone-product-details .zone-details .shelves .block{border:none;padding:10px;width:100%;max-width:100%;overflow-x:auto;min-height:52px}#zone-product-details .zone-details .shelves .tray,#zone-product-details .zone-details .shelves .shelf{display:flex;gap:24px}#zone-product-details .zone-details .shelves .tray .product,#zone-product-details .zone-details .shelves .shelf .product{border:2px solid #12B76A;padding:6px;border-radius:4px;min-width:96px;min-height:104px}#zone-product-details .zone-details .shelves .tray .product.selected,#zone-product-details .zone-details .shelves .shelf .product.selected{border:2px solid #12B76A;background-color:#e0fbe9}#zone-product-details .zone-details .shelves .tray .product.error,#zone-product-details .zone-details .shelves .shelf .product.error{border:2px solid rgb(253,162,155);background-color:#fef3f2}#zone-product-details .zone-details .shelves .tray .product.error.selected,#zone-product-details .zone-details .shelves .shelf .product.error.selected{border:2px solid rgb(255,172,168);background-color:#ffe7e5}#zone-product-details .zone-details .shelves .tray .product:hover,#zone-product-details .zone-details .shelves .shelf .product:hover{cursor:pointer}#zone-product-details .zone-details .shelves .tray .product .product-img,#zone-product-details .zone-details .shelves .shelf .product .product-img{width:80px;height:40px;border:1.23px solid rgb(234,236,240);margin-bottom:8px;box-shadow:0 1.23px 2.47px #1018280d;border-radius:4px}#zone-product-details .zone-details .shelves .tray .product .product-img img,#zone-product-details .zone-details .shelves .shelf .product .product-img img{border-radius:4px;height:100%;width:100%;object-fit:cover}#zone-product-details .zone-details .shelves .tray .product .product-details,#zone-product-details .zone-details .shelves .shelf .product .product-details{display:flex;flex-direction:column;gap:2px;width:fit-content}#zone-product-details .zone-details .shelves .tray .product .product-details .badge,#zone-product-details .zone-details .shelves .shelf .product .product-details .badge{font-weight:500!important;font-size:8px!important;line-height:12px!important;text-align:center;padding:1px 6px!important;border-radius:16px!important}#zone-product-details .zone-details .shelves .tray .product .product-details h6,#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details h6,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-size:8px;font-weight:600;color:#101828;margin:0}#zone-product-details .zone-details .shelves .tray .product .product-details p,#zone-product-details .zone-details .shelves .shelf .product .product-details p{font-weight:500!important}::ng-deep .merch-compliance-modal .modal-dialog{max-width:950px;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: i4.ToastService }], propDecorators: { data: [{
                 type: Input
             }], level: [{
@@ -36413,7 +36413,12 @@ class MerchComplianceComponent {
                 this.selectedFixtureData = fixture;
                 this.selectedFixtureData["revisionId"] = this.floorData.revisionId;
             }
-            this.selectedFixture.fixtureData = this.selectedFixtureData;
+            if (this.selectedFixtureData?.header?.label != 'CL') {
+                this.selectedFixture.fixtureData = this.selectedFixtureData;
+            }
+            else {
+                this.selectedFixture.fixtureData = null;
+            }
         }
     }
     drawLabeledRectangle(canvas, x, y, width, height, element) {