buildingproduct-library 0.3.0 → 0.3.2

package/esm2015/lib/custom-order-details/custom-order-details.component.js

@@ -196,7 +196,7 @@ export class CustomOrderDetailsComponent {
     }
 }
 CustomOrderDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomOrderDetailsComponent, deps: [{ token: i1.CmsService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3.OrderHistoryService }, { token: i4.UserAccountDetailServiceService }, { token: i5.CartService }, { token: i0.ChangeDetectorRef }, { token: i6.MyAccountService }], target: i0.ɵɵFactoryTarget.Component });
-CustomOrderDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomOrderDetailsComponent, selector: "app-custom-order-details", usesOnChanges: true, ngImport: i0, template: "<app-custom-breadcrum [customCrumbData]=\"breadcrumbData\"></app-custom-breadcrum>\r\n<div class=\"loading \" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<div class=\"container\" (window:resize)=\"onResize($event)\">\r\n    <div class=\"row\">\r\n        <div class=\"col-sm-12\" [ngClass]=\"showOrder ? 'mb-3' : ''\">\r\n            <h1 class=\"pageTitle\">My Order: {{orderDetails?.code}}</h1>\r\n            <p class=\"pageTltsubHd mt-4\" *ngIf=\"!isMobile\" [ngClass]=\"showOrder ? '' : 'mb-0'\">Order Details</p>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"showOrder\">\r\n        <div class=\"row m-0 bg-white\">\r\n            <div class=\"col-lg-3 col-sm-6 text-center deliveryInfoBx d-flex flex-column justify-content-center\">\r\n                <p class=\"font-weight-bold\">Delivery Method</p>\r\n                <ng-container *ngIf=\"orderDetails?.deliveryMode?.code=='standard_delivery'; else pickupdelivery\">\r\n                    <p class=\"pickupdelivery\">\r\n                        <img class=\"pickupdelivery-image\" src=\"../../../../../assets/images/delivery.svg\" alt=\"Delivery\" title=\"Delivery\">\r\n                    </p>\r\n                </ng-container>\r\n                <ng-template #pickupdelivery>\r\n                    <p class=\"pickupdelivery\">\r\n                        <img class=\"pickupdelivery-image\" src=\"../../../../assets/images/pickup.svg\" alt=\"Click & Collect\" title=\"Click & Collect\">\r\n                    </p>\r\n                </ng-template>\r\n                <p class=\"font-weight-bold mb-0\">{{orderDetails?.deliveryMode?.name}}</p>\r\n                <p class=\"mb-0\">{{orderDetails?.deliveryMode?.description}}</p>\r\n            </div>\r\n            <div class=\"col-lg-3 col-sm-6 deliveryInfoBx\">\r\n                <p class=\"font-weight-bold mb-3\">Order Information</p>\r\n                <div class=\"row\">\r\n                    <ul class=\"col-12 deliveryInfo\">\r\n                        <li>\r\n                            <ng-container *ngIf=\"orderDetails?.code; else ourReference\">\r\n                                <label>Order #:</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.code}}</span>\r\n                            </ng-container>\r\n                            <ng-template #ourReference>\r\n                                <label>Online Order #:</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.ourReference}}</span>\r\n                            </ng-template>\r\n                        </li>\r\n                        <li>\r\n                            <label>PO #:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.purchaseOrderNumber}}</span>\r\n                        </li>\r\n                        <li>\r\n                            <label>Order Date:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.created | date:'dd/MM/yyyy'}}</span>\r\n                        </li>\r\n                        <!-- future requirement-->\r\n                        <!-- <ng-container *ngIf=\"orderDetails?.deliveryMode?.code=='standard_delivery'\">\r\n                            <li>\r\n                                <label>Delivery Date:</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.expectedFromDate?.split(' ')[0] }} - {{orderDetails?.expectedToDate?.split(' ')[0] }}</span>\r\n                            </li>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"orderDetails?.deliveryMode?.code!='standard_delivery'\">\r\n                            <li>\r\n                                <label>Pickup Date</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.expectedFromDate?.split(' ')[0] }}</span>\r\n                            </li>\r\n                            <li>\r\n                                <label>Pickup Time</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.expectedFromDate?.split(' ')[1] }} {{orderDetails?.expectedToDate?.split(' ')[2] }}</span>\r\n                            </li>\r\n                        </ng-container> -->\r\n\r\n                        <li>\r\n                            <label>Address:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.deliveryAddress?.formattedAddress}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-sm-6 deliveryInfoBx\">\r\n                <p class=\"font-weight-bold mb-3\">Related Information</p>\r\n                <div class=\"row\">\r\n                    <ul class=\"col-12 deliveryInfo\">\r\n                        <li>\r\n                            <label>Order PDFs:</label>\r\n                            <span  class=\"infoValue\"> 1 <small  *ngIf=\"isOrderPermissions\" data-toggle=\"modal\" data-target=\"#downLoadPopup\" (click)=\"orderPdf()\">List</small> </span>\r\n                        </li>\r\n                        <ng-container *ngIf=\"orderDetails?.invoiceCount\">\r\n                            <li>\r\n                                <label>Invoices:</label>\r\n                                <span class=\"infoValue\"> {{orderDetails?.invoiceCount}} <small (click)=\"invoicePdf()\">View</small></span>\r\n                            </li>\r\n                        </ng-container>\r\n                        <li>\r\n                            <label>Status:</label>\r\n                            <span class=\"infoValue text-capitalize\">{{orderDetails?.statusDisplay}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-sm-6 deliveryInfoBx\">\r\n                <p class=\"font-weight-bold mb-3\">Account Information</p>\r\n                <div class=\"row\">\r\n                    <ul class=\"col-12 deliveryInfo\">\r\n                        <li>\r\n                            <label>Account NO.:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.orgCustomer?.orgUnit?.displayUid}}</span>\r\n                        </li>\r\n                        <li>\r\n                            <label>Account Name:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.orgCustomer?.orgUnit?.name}}</span>\r\n                        </li>\r\n                        <li>\r\n                            <label>Address:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.deliveryAddress?.formattedAddress}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"row m-0\">\r\n        <div class=\"col-12 my-4 text-center position-relative\">\r\n            <span (click)=\"showOrder=!showOrder\" class=\"showHide\">{{showOrder==true ? 'Hide Order Details' : 'Show Order Details'}}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"row pb-4\">\r\n        <div class=\"col-sm-6 col-md-4 col-lg-2\">\r\n            <span class=\"total-item\"> {{orderDetails?.entries?.length}} {{orderDetails?.entries?.length == 1 ? 'Item': 'Items'}} in this order</span>\r\n        </div>\r\n        <div class=\"col-sm-6 col-md-8 col-lg-10 text-left\">\r\n            <div class=\"expandcollapse-link text-left\">\r\n                <a title=\"Expand all\" href=\"javascript:void(0)\" (click)=\"expandAll()\" [ngClass]=\"{disabled : isExpandAll == true}\"> Expand all</a> |\r\n                <a title=\"Expand all\" href=\"javascript:void(0)\" (click)=\"contractAll()\" [ngClass]=\"{disabled : isExpandAll == false}\"> Contract all</a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"col-sm-12 col-lg-8 d-sm-flex\">\r\n            <div class=\"btn-group mb-2 status-btn\">\r\n                <div class=\"btn-group\">\r\n                    <select name=\"\" id=\"\" class=\"mr-3 sortBy\" (change)=\"sortBy($event)\">\r\n                        <option value=\"{{item}}\" *ngFor=\"let item of sortby\">{{item}}</option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n            <div class=\"btn-group mb-2\">\r\n                <button class=\"btn history-table-dropdown position-relative\" type=\"button\" id=\"status\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                    Status\r\n                    <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                </button>\r\n                <div class=\"dropdown-menu\" aria-labelledby=\"status\">\r\n                    <label class=\"dropdownItem\" *ngFor=\"let data of orderStatuses\">\r\n                        <input type=\"checkbox\" \r\n                            name=\"dropdown-group\" class=\"rounded-0\" id=\"orderStatusLabel\"\r\n                            [value]=\"data.value\" (change)=\"checkOrderStatus($event)\" />\r\n                        {{data.value}}\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"col-sm-12 col-lg-4 float-right\" *ngIf=\"isDesktop\">\r\n            <div class=\"d-flex justify-content-end\">\r\n                <div class=\"main-view\">\r\n                    <button [ngClass]=\"{'active': listview === false}\" class=\"btn btn-sm\" (click)=\"gridView()\">\r\n                        <img *ngIf=\"listview === false\" src=\"../../../assets/images/Grid-light.svg\" alt=\"gridviewlight\">\r\n                        <img *ngIf=\"listview === true\" src=\"../../../assets/images/Grid-dark.svg\" alt=\"gridviewdark\">\r\n                        Grid</button>\r\n                    <button [ngClass]=\"{'active': listview === true}\" class=\"btn btn-sm active\" (click)=\"listView()\">\r\n                        <img *ngIf=\"listview === true\" class=\"list-img\" src=\"../../../assets/images/List-light.svg\"\r\n                            alt=\"listview\">\r\n                        <img *ngIf=\"listview === false\" class=\"list-img\" src=\"../../../assets/images/List-dark.svg\"\r\n                            alt=\"listview\">\r\n                        List</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isDesktop\">\r\n        <app-order-detail-list [cartDetails]=\"orderDetails?.entries\" [orderDate]=\"orderDetails?.created\" [sortByVal]=\"sortData\" *ngIf=\"listview && orderDetails\" [isCardData]=\"orderDetailsPage\"></app-order-detail-list>\r\n        <app-order-detail-grid [cartDetails]=\"orderDetails?.entries\" [orderDate]=\"orderDetails?.created\" [sortByVal]=\"sortData\" *ngIf=\"!listview && orderDetails\" [isCardData]=\"orderDetailsPage\"></app-order-detail-grid>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isDesktop\">\r\n        <app-order-detail-grid [cartDetails]=\"orderDetails?.entries\" [orderDate]=\"orderDetails?.created\" *ngIf=\"orderDetails\" [isCardData]=\"orderDetailsPage\"></app-order-detail-grid>\r\n    </ng-container>\r\n</div>\r\n<div class=\"container order-footer-container\">\r\n    <div class=\"row\" [ngClass]=\"isMobile ? 'd-flex flex-column-reverse': ''\">\r\n        <div class=\"col-md-6 col-12\" [ngClass]=\"isMobile ? 'text-right mt-4' : 'd-flex align-items-center'\">\r\n            <a href=\"javascript:void(0)\" (click)=\"onBackbuttonClick()\" class=\"font-weight-bold\" title=\"BACK TO MY ORDERS\">\r\n                <img src=\"../../../assets/images/ionic-arrow-back.svg\" alt=\"BACK TO MY ORDERS\" /> BACK TO MY ORDERS</a>\r\n        </div>\r\n        <div class=\"col-md-6 col-12 text-right\" *ngIf=\"isOrderPermissions\">\r\n            <p class=\"mb-0 total-text\">Total</p>\r\n            <p class=\"total-value mb-0\">{{orderDetails?.subTotal?.formattedValue}}</p>\r\n            <span class=\"d-block exclGst\"> excl GST and freight</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-container *ngIf=\"showPopUp\">\r\n    <div class=\"modal fade\" id=\"downLoadPopup\" role=\"dialog\" aria-labelledby=\"downLoadPopup\" aria-hidden=\"true\">\r\n        <div class=\"loading\" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n        <app-download-popup [orderDetails]=\"orderDetails\"></app-download-popup>\r\n    </div>\r\n</ng-container>", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}#visualization-container{text-align:center;margin:0 auto}#cds-viewer-container-3d{width:320px;height:200px}#cds-viewer-container-2d{width:320px;height:200px}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}::ng-deep cx-page-layout.AccountPageTemplate cx-page-slot{max-width:100%!important;padding:0}::ng-deep cx-page-layout.AccountPageTemplate .pageTltsubHd{font-size:var(--fontsize28)}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx{padding:1.5rem;border:1px solid #E0E0E0;box-sizing:border-box}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(2),::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(3){border-left:0}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo{word-wrap:break-word}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li{display:flex;line-height:24px}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li label{width:50%;font-family:\"Arial Bold\",sans-serif;display:inline-block}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li .infoValue{width:50%;display:inline-block}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li .infoValue small{cursor:pointer;text-decoration:underline;color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .status-btn{width:240px}::ng-deep cx-page-layout.AccountPageTemplate .status-btn .btn-group{width:100%}::ng-deep cx-page-layout.AccountPageTemplate .sortBy{width:100%;height:40px;border:1px solid #E0E0E0;padding:0 10px;cursor:pointer;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;-webkit-appearance:none;appearance:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAD/h4/MvwAAAAd0SU1FB+cDDwooHJydnC8AAAC/SURBVCjPvZAxCsJAEEXfJlgEwUljI7iKlRZqIAdwb5CreMS9wRpsPIGNRbTe4FgYRCGW+qeY4f8Pf2bgHyirUnp5KSswm53xelB3vH3KazHeFOrMqiEHDupOb5alGE8BXJN2H4nEIvrFK2gh0cciEmn3wLyyjVWrNkwFYCo2WLVqm3kFBmCyVU8OXO8Okm427lx3Bhhv7x0Nz564S/2xdT4bhZF2FfJZz91DyUKmmWZh2PsXYCBpSMPgm/wrPABhpkGw9gNbqwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMy0xNVQxMDo0MDoyOCswMDowMDdRgKAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDMtMTVUMTA6NDA6MjgrMDA6MDBGDDgcAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAzLTE1VDEwOjQwOjI4KzAwOjAwERkZwwAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:right .8em top 50%;background-size:.75em auto}::ng-deep cx-page-layout.AccountPageTemplate .sortBy option{font-family:\"Arial Regular\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .showHide{text-decoration:underline;cursor:pointer}::ng-deep cx-page-layout.AccountPageTemplate .showHide:hover{color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .showHide:before,::ng-deep cx-page-layout.AccountPageTemplate .showHide:after{content:\"\";position:absolute;border-top:1px solid #E0E0E0;width:calc(50% - 80px);top:12px}::ng-deep cx-page-layout.AccountPageTemplate .showHide:before{left:0}::ng-deep cx-page-layout.AccountPageTemplate .showHide:after{right:0}::ng-deep cx-page-layout.AccountPageTemplate .total-item{font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;text-align:left;background-color:#fff;border:1px solid #E0E0E0;border-radius:0;margin-right:30px;width:240px;height:40px}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown :last-child{margin-right:0}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown .custom-arrow-down{float:right}::ng-deep cx-page-layout.AccountPageTemplate .dropdownItem{padding:10px 0 10px 50px;margin-bottom:0;cursor:pointer}::ng-deep cx-page-layout.AccountPageTemplate .dropdownItem input[type=checkbox]{margin-top:.1rem}::ng-deep cx-page-layout.AccountPageTemplate .sortByDropDown li{cursor:pointer;padding:5px 10px}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link{font-size:var(--fontsize14)}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link a{text-decoration:underline}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link a:hover{color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link a.disabled{pointer-events:none;color:#a6a6a5}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container{background:#ffffff;padding:2rem;border-top:1px solid #E8E8E8;width:100%}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container p{font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container p span{font-family:\"Arial Regular\",sans-serif;font-size:var(--fontsize14);color:#6f6f6f}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container .total-text{font-size:var(--fontsize14)}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container .total-value{font-size:var(--fontsize28)}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container .exclGst{color:#6f6f6f;font-size:var(--fontsize14)}@media screen and (max-width: 991px){::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(2),::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(3){border-left:1px solid #E0E0E0}}@media screen and (max-width: 576px){::ng-deep cx-page-layout.AccountPageTemplate .boxMargin{margin:0}::ng-deep cx-page-layout.AccountPageTemplate .btn-group{width:100%}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown{width:100%;margin-right:0}::ng-deep cx-page-layout.AccountPageTemplate .sortBy{width:100%;margin-right:0!important;background-size:.85em auto}}\n"], components: [{ type: i7.CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { type: i8.OrderDetailListComponent, selector: "app-order-detail-list", inputs: ["cartDetails", "sortByVal", "orderDate", "isCardData"] }, { type: i9.OrderDetailGridComponent, selector: "app-order-detail-grid", inputs: ["sortByVal", "cartDetails", "orderDate", "isCardData"] }, { type: i10.DownloadPopupComponent, selector: "app-download-popup", inputs: ["orderDetails"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i11.AsyncPipe, "date": i11.DatePipe } });
+CustomOrderDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomOrderDetailsComponent, selector: "app-custom-order-details", usesOnChanges: true, ngImport: i0, template: "<app-custom-breadcrum [customCrumbData]=\"breadcrumbData\"></app-custom-breadcrum>\r\n<div class=\"loading \" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<div class=\"container\" (window:resize)=\"onResize($event)\">\r\n    <div class=\"row\">\r\n        <div class=\"col-sm-12\" [ngClass]=\"showOrder ? 'mb-3' : ''\">\r\n            <h1 class=\"pageTitle\">My Order: {{orderDetails?.code}}</h1>\r\n            <p class=\"pageTltsubHd mt-4\" *ngIf=\"!isMobile\" [ngClass]=\"showOrder ? '' : 'mb-0'\">Order Details</p>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"showOrder\">\r\n        <div class=\"row m-0 bg-white\">\r\n            <div class=\"col-lg-3 col-sm-6 text-center deliveryInfoBx d-flex flex-column justify-content-center\">\r\n                <p class=\"font-weight-bold\">Delivery Method</p>\r\n                <ng-container *ngIf=\"orderDetails?.deliveryMode?.code=='standard_delivery'; else pickupdelivery\">\r\n                    <p class=\"pickupdelivery\">\r\n                        <img class=\"pickupdelivery-image\" src=\"../../../../../assets/images/delivery.svg\" alt=\"Delivery\" title=\"Delivery\">\r\n                    </p>\r\n                </ng-container>\r\n                <ng-template #pickupdelivery>\r\n                    <p class=\"pickupdelivery\">\r\n                        <img class=\"pickupdelivery-image\" src=\"../../../../assets/images/pickup.svg\" alt=\"Click & Collect\" title=\"Click & Collect\">\r\n                    </p>\r\n                </ng-template>\r\n                <p class=\"font-weight-bold mb-0\">{{orderDetails?.deliveryMode?.name}}</p>\r\n                <p class=\"mb-0\">{{orderDetails?.deliveryMode?.description}}</p>\r\n            </div>\r\n            <div class=\"col-lg-3 col-sm-6 deliveryInfoBx\">\r\n                <p class=\"font-weight-bold mb-3\">Order Information</p>\r\n                <div class=\"row\">\r\n                    <ul class=\"col-12 deliveryInfo\">\r\n                        <li>\r\n                            <ng-container *ngIf=\"orderDetails?.code; else ourReference\">\r\n                                <label>Order #:</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.code}}</span>\r\n                            </ng-container>\r\n                            <ng-template #ourReference>\r\n                                <label>Online Order #:</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.ourReference}}</span>\r\n                            </ng-template>\r\n                        </li>\r\n                        <li>\r\n                            <label>PO #:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.purchaseOrderNumber}}</span>\r\n                        </li>\r\n                        <li>\r\n                            <label>Order Date:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.created | date:'dd/MM/yyyy'}}</span>\r\n                        </li>\r\n                        <!-- future requirement-->\r\n                        <!-- <ng-container *ngIf=\"orderDetails?.deliveryMode?.code=='standard_delivery'\">\r\n                            <li>\r\n                                <label>Delivery Date:</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.expectedFromDate?.split(' ')[0] }} - {{orderDetails?.expectedToDate?.split(' ')[0] }}</span>\r\n                            </li>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"orderDetails?.deliveryMode?.code!='standard_delivery'\">\r\n                            <li>\r\n                                <label>Pickup Date</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.expectedFromDate?.split(' ')[0] }}</span>\r\n                            </li>\r\n                            <li>\r\n                                <label>Pickup Time</label>\r\n                                <span class=\"infoValue\">{{orderDetails?.expectedFromDate?.split(' ')[1] }} {{orderDetails?.expectedToDate?.split(' ')[2] }}</span>\r\n                            </li>\r\n                        </ng-container> -->\r\n\r\n                        <li>\r\n                            <label>Address:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.deliveryAddress?.formattedAddress}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-sm-6 deliveryInfoBx\">\r\n                <p class=\"font-weight-bold mb-3\">Related Information</p>\r\n                <div class=\"row\">\r\n                    <ul class=\"col-12 deliveryInfo\">\r\n                        <li>\r\n                            <label>Order PDFs:</label>\r\n                            <span  class=\"infoValue\"> 1 <small  *ngIf=\"isOrderPermissions\" data-toggle=\"modal\" data-target=\"#downLoadPopup\" (click)=\"orderPdf()\">List</small> </span>\r\n                        </li>\r\n                        <ng-container *ngIf=\"orderDetails?.invoiceCount\">\r\n                            <li>\r\n                                <label>Invoices:</label>\r\n                                <span class=\"infoValue\"> {{orderDetails?.invoiceCount}} <small (click)=\"invoicePdf()\">View</small></span>\r\n                            </li>\r\n                        </ng-container>\r\n                        <li>\r\n                            <label>Status:</label>\r\n                            <span class=\"infoValue text-capitalize\">{{orderDetails?.statusDisplay}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-sm-6 deliveryInfoBx\">\r\n                <p class=\"font-weight-bold mb-3\">Account Information</p>\r\n                <div class=\"row\">\r\n                    <ul class=\"col-12 deliveryInfo\">\r\n                        <li>\r\n                            <label>Account NO.:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.orgCustomer?.orgUnit?.displayUid}}</span>\r\n                        </li>\r\n                        <li>\r\n                            <label>Account Name:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.orgCustomer?.orgUnit?.name}}</span>\r\n                        </li>\r\n                        <li>\r\n                            <label>Address:</label>\r\n                            <span class=\"infoValue\">{{orderDetails?.deliveryAddress?.formattedAddress}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"row m-0\">\r\n        <div class=\"col-12 my-4 text-center position-relative\">\r\n            <span (click)=\"showOrder=!showOrder\" class=\"showHide\">{{showOrder==true ? 'Hide Order Details' : 'Show Order Details'}}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"row pb-4\">\r\n        <div class=\"col-sm-6 col-md-4 col-lg-2\">\r\n            <span class=\"total-item\"> {{orderDetails?.entries?.length}} {{orderDetails?.entries?.length == 1 ? 'Item': 'Items'}} in this order</span>\r\n        </div>\r\n        <div class=\"col-sm-6 col-md-8 col-lg-10 text-left\">\r\n            <div class=\"expandcollapse-link text-left\">\r\n                <a title=\"Expand all\" href=\"javascript:void(0)\" (click)=\"expandAll()\" [ngClass]=\"{disabled : isExpandAll == true}\"> Expand all</a> |\r\n                <a title=\"Expand all\" href=\"javascript:void(0)\" (click)=\"contractAll()\" [ngClass]=\"{disabled : isExpandAll == false}\"> Contract all</a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"col-sm-12 col-lg-8 d-sm-flex\">\r\n            <div class=\"btn-group mb-2 status-btn\">\r\n                <div class=\"btn-group\">\r\n                    <select name=\"\" id=\"\" class=\"mr-3 sortBy\" (change)=\"sortBy($event)\">\r\n                        <option value=\"{{item}}\" *ngFor=\"let item of sortby\">{{item}}</option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n            <div class=\"btn-group mb-2\">\r\n                <button class=\"btn history-table-dropdown position-relative\" type=\"button\" id=\"status\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                    Status\r\n                    <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                </button>\r\n                <div class=\"dropdown-menu\" aria-labelledby=\"status\">\r\n                    <label class=\"dropdownItem\" *ngFor=\"let data of orderStatuses\">\r\n                        <input type=\"checkbox\" \r\n                            name=\"dropdown-group\" class=\"rounded-0\" id=\"orderStatusLabel\"\r\n                            [value]=\"data.value\" (change)=\"checkOrderStatus($event)\" />\r\n                        {{data.value}}\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"col-sm-12 col-lg-4 float-right\" *ngIf=\"isDesktop\">\r\n            <div class=\"d-flex justify-content-end\">\r\n                <div class=\"main-view\">\r\n                    <button [ngClass]=\"{'active': listview === false}\" class=\"btn btn-sm\" (click)=\"gridView()\">\r\n                        <img *ngIf=\"listview === false\" src=\"../../../assets/images/Grid-light.svg\" alt=\"gridviewlight\">\r\n                        <img *ngIf=\"listview === true\" src=\"../../../assets/images/Grid-dark.svg\" alt=\"gridviewdark\">\r\n                        Grid</button>\r\n                    <button [ngClass]=\"{'active': listview === true}\" class=\"btn btn-sm active\" (click)=\"listView()\">\r\n                        <img *ngIf=\"listview === true\" class=\"list-img\" src=\"../../../assets/images/List-light.svg\"\r\n                            alt=\"listview\">\r\n                        <img *ngIf=\"listview === false\" class=\"list-img\" src=\"../../../assets/images/List-dark.svg\"\r\n                            alt=\"listview\">\r\n                        List</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isDesktop\">\r\n        <app-order-detail-list [cartDetails]=\"orderDetails?.entries\" [orderDate]=\"orderDetails?.created\" [sortByVal]=\"sortData\" *ngIf=\"listview && orderDetails\" [isCardData]=\"orderDetailsPage\"></app-order-detail-list>\r\n        <app-order-detail-grid [cartDetails]=\"orderDetails?.entries\" [orderDate]=\"orderDetails?.created\" [sortByVal]=\"sortData\" *ngIf=\"!listview && orderDetails\" [isCardData]=\"orderDetailsPage\"></app-order-detail-grid>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isDesktop\">\r\n        <app-order-detail-grid [cartDetails]=\"orderDetails?.entries\" [orderDate]=\"orderDetails?.created\" *ngIf=\"orderDetails\" [isCardData]=\"orderDetailsPage\"></app-order-detail-grid>\r\n    </ng-container>\r\n</div>\r\n<div class=\"container order-footer-container\">\r\n    <div class=\"row\" [ngClass]=\"isMobile ? 'd-flex flex-column-reverse': ''\">\r\n        <div class=\"col-md-6 col-12\" [ngClass]=\"isMobile ? 'text-right mt-4' : 'd-flex align-items-center'\">\r\n            <a href=\"javascript:void(0)\" (click)=\"onBackbuttonClick()\" class=\"font-weight-bold\" title=\"BACK TO MY ORDERS\">\r\n                <img src=\"../../../assets/images/ionic-arrow-back.svg\" alt=\"BACK TO MY ORDERS\" /> BACK TO MY ORDERS</a>\r\n        </div>\r\n        <div class=\"col-md-6 col-12 text-right\" *ngIf=\"isOrderPermissions\">\r\n            <p class=\"mb-0 total-text\">Total</p>\r\n            <p class=\"total-value mb-0\">{{orderDetails?.subTotal?.formattedValue}}</p>\r\n            <span class=\"d-block exclGst\"> excl GST and freight</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-container *ngIf=\"showPopUp\">\r\n    <div class=\"modal fade\" id=\"downLoadPopup\" role=\"dialog\" aria-labelledby=\"downLoadPopup\" aria-hidden=\"true\">\r\n        <div class=\"loading\" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n        <app-download-popup [orderDetails]=\"orderDetails\"></app-download-popup>\r\n    </div>\r\n</ng-container>", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}::ng-deep cx-page-layout.AccountPageTemplate cx-page-slot{max-width:100%!important;padding:0}::ng-deep cx-page-layout.AccountPageTemplate .pageTltsubHd{font-size:var(--fontsize28)}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx{padding:1.5rem;border:1px solid #E0E0E0;box-sizing:border-box}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(2),::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(3){border-left:0}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo{word-wrap:break-word}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li{display:flex;line-height:24px}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li label{width:50%;font-family:\"Arial Bold\",sans-serif;display:inline-block}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li .infoValue{width:50%;display:inline-block}::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfo li .infoValue small{cursor:pointer;text-decoration:underline;color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .status-btn{width:240px}::ng-deep cx-page-layout.AccountPageTemplate .status-btn .btn-group{width:100%}::ng-deep cx-page-layout.AccountPageTemplate .sortBy{width:100%;height:40px;border:1px solid #E0E0E0;padding:0 10px;cursor:pointer;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;-webkit-appearance:none;appearance:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAD/h4/MvwAAAAd0SU1FB+cDDwooHJydnC8AAAC/SURBVCjPvZAxCsJAEEXfJlgEwUljI7iKlRZqIAdwb5CreMS9wRpsPIGNRbTe4FgYRCGW+qeY4f8Pf2bgHyirUnp5KSswm53xelB3vH3KazHeFOrMqiEHDupOb5alGE8BXJN2H4nEIvrFK2gh0cciEmn3wLyyjVWrNkwFYCo2WLVqm3kFBmCyVU8OXO8Okm427lx3Bhhv7x0Nz564S/2xdT4bhZF2FfJZz91DyUKmmWZh2PsXYCBpSMPgm/wrPABhpkGw9gNbqwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMy0xNVQxMDo0MDoyOCswMDowMDdRgKAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDMtMTVUMTA6NDA6MjgrMDA6MDBGDDgcAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAzLTE1VDEwOjQwOjI4KzAwOjAwERkZwwAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:right .8em top 50%;background-size:.75em auto}::ng-deep cx-page-layout.AccountPageTemplate .sortBy option{font-family:\"Arial Regular\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .showHide{text-decoration:underline;cursor:pointer}::ng-deep cx-page-layout.AccountPageTemplate .showHide:hover{color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .showHide:before,::ng-deep cx-page-layout.AccountPageTemplate .showHide:after{content:\"\";position:absolute;border-top:1px solid #E0E0E0;width:calc(50% - 80px);top:12px}::ng-deep cx-page-layout.AccountPageTemplate .showHide:before{left:0}::ng-deep cx-page-layout.AccountPageTemplate .showHide:after{right:0}::ng-deep cx-page-layout.AccountPageTemplate .total-item{font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;text-align:left;background-color:#fff;border:1px solid #E0E0E0;border-radius:0;margin-right:30px;width:240px;height:40px}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown :last-child{margin-right:0}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown .custom-arrow-down{float:right}::ng-deep cx-page-layout.AccountPageTemplate .dropdownItem{padding:10px 0 10px 50px;margin-bottom:0;cursor:pointer}::ng-deep cx-page-layout.AccountPageTemplate .dropdownItem input[type=checkbox]{margin-top:.1rem}::ng-deep cx-page-layout.AccountPageTemplate .sortByDropDown li{cursor:pointer;padding:5px 10px}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link{font-size:var(--fontsize14)}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link a{text-decoration:underline}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link a:hover{color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .expandcollapse-link a.disabled{pointer-events:none;color:#a6a6a5}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container{background:#ffffff;padding:2rem;border-top:1px solid #E8E8E8;width:100%}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container p{font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container p span{font-family:\"Arial Regular\",sans-serif;font-size:var(--fontsize14);color:#6f6f6f}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container .total-text{font-size:var(--fontsize14)}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container .total-value{font-size:var(--fontsize28)}::ng-deep cx-page-layout.AccountPageTemplate .order-footer-container .exclGst{color:#6f6f6f;font-size:var(--fontsize14)}@media screen and (max-width: 991px){::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(2),::ng-deep cx-page-layout.AccountPageTemplate .deliveryInfoBx:nth-child(3){border-left:1px solid #E0E0E0}}@media screen and (max-width: 576px){::ng-deep cx-page-layout.AccountPageTemplate .boxMargin{margin:0}::ng-deep cx-page-layout.AccountPageTemplate .btn-group{width:100%}::ng-deep cx-page-layout.AccountPageTemplate .history-table-dropdown{width:100%;margin-right:0}::ng-deep cx-page-layout.AccountPageTemplate .sortBy{width:100%;margin-right:0!important;background-size:.85em auto}}\n"], components: [{ type: i7.CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { type: i8.OrderDetailListComponent, selector: "app-order-detail-list", inputs: ["cartDetails", "sortByVal", "orderDate", "isCardData"] }, { type: i9.OrderDetailGridComponent, selector: "app-order-detail-grid", inputs: ["sortByVal", "cartDetails", "orderDate", "isCardData"] }, { type: i10.DownloadPopupComponent, selector: "app-download-popup", inputs: ["orderDetails"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i11.AsyncPipe, "date": i11.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomOrderDetailsComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/custom-order-details/download-popup/download-popup.component.js

@@ -17,7 +17,7 @@ export class DownloadPopupComponent {
     }
 }
 DownloadPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DownloadPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DownloadPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DownloadPopupComponent, selector: "app-download-popup", inputs: { orderDetails: "orderDetails" }, viewQueries: [{ propertyName: "shareDownload", first: true, predicate: SharedDownloadOrderComponent, descendants: true }], ngImport: i0, template: "<!-- <div class=\"loading \" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div> -->\r\n<div class=\"modal-dialog\" role=\"document\">\r\n    <div class=\"modal-content\">\r\n        <div class=\"modal-header p-0 pb-3 mb-2\">\r\n            <h4 class=\"modal-title\"> Order PDFs</h4>\r\n            <i class=\"icon-close closePopup\" data-dismiss=\"modal\" aria-label=\"Close\"></i>\r\n        </div>\r\n        <div class=\"modal-body p-0\">\r\n            <table class=\"table border-0\">\r\n                    <tr>\r\n                        <td class=\"colOne\">\r\n                            <p class=\"m-0 pb-0\">Order Confirmation</p><span class=\"orderDate\">{{orderDetails?.created | date:'dd/MM/yyyy'}}</span>\r\n                        </td>\r\n                        <td class=\"text-right\"> <span class=\"downloadPDF\"> \r\n                            <span target=\"_blank\" (click)=\"pdfDownload()\" ><img src=\"../../../../assets/images/download-icon.svg\"> PDF</span>\r\n                            </span>\r\n                        </td>\r\n                    </tr>\r\n                    <div #divRef class=\"row\">\r\n                        <div class=\"col-sm-12 pl-0\">\r\n                            <app-shared-download-order [isOrder]=\"isOrderDownload\"></app-shared-download-order> \r\n                        </div> \r\n                    </div>\r\n            </table>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}#visualization-container{text-align:center;margin:0 auto}#cds-viewer-container-3d{width:320px;height:200px}#cds-viewer-container-2d{width:320px;height:200px}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}::ng-deep .modal-dialog{max-width:740px}::ng-deep .modal-dialog .modal-content{padding-bottom:60px!important}::ng-deep .modal-dialog .modal-content{padding:30px 40px}::ng-deep .modal-dialog h4{font-size:var(--fontsize28);line-height:2.25rem}::ng-deep .modal-dialog .closePopup{cursor:pointer}::ng-deep .modal-dialog td{color:#161616;padding:10px 0;border:none}::ng-deep .modal-dialog .colOne{width:80%}::ng-deep .modal-dialog .downloadPDF{cursor:pointer;display:inline-block;color:#b61828;text-decoration:underline}::ng-deep .modal-dialog .downloadPDF a{color:#b61828}::ng-deep .modal-dialog .downloadPDF img{margin-right:10px}::ng-deep .modal-dialog .orderDate{font-size:14px;color:#707070}@media screen and (max-width: 767px){::ng-deep .modal-dialog .modal-content{height:100vh}}\n"], components: [{ type: i1.SharedDownloadOrderComponent, selector: "app-shared-download-order", inputs: ["isOrder"] }], pipes: { "date": i2.DatePipe } });
+DownloadPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DownloadPopupComponent, selector: "app-download-popup", inputs: { orderDetails: "orderDetails" }, viewQueries: [{ propertyName: "shareDownload", first: true, predicate: SharedDownloadOrderComponent, descendants: true }], ngImport: i0, template: "<!-- <div class=\"loading \" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div> -->\r\n<div class=\"modal-dialog\" role=\"document\">\r\n    <div class=\"modal-content\">\r\n        <div class=\"modal-header p-0 pb-3 mb-2\">\r\n            <h4 class=\"modal-title\"> Order PDFs</h4>\r\n            <i class=\"icon-close closePopup\" data-dismiss=\"modal\" aria-label=\"Close\"></i>\r\n        </div>\r\n        <div class=\"modal-body p-0\">\r\n            <table class=\"table border-0\">\r\n                    <tr>\r\n                        <td class=\"colOne\">\r\n                            <p class=\"m-0 pb-0\">Order Confirmation</p><span class=\"orderDate\">{{orderDetails?.created | date:'dd/MM/yyyy'}}</span>\r\n                        </td>\r\n                        <td class=\"text-right\"> <span class=\"downloadPDF\"> \r\n                            <span target=\"_blank\" (click)=\"pdfDownload()\" ><img src=\"../../../../assets/images/download-icon.svg\"> PDF</span>\r\n                            </span>\r\n                        </td>\r\n                    </tr>\r\n                    <div #divRef class=\"row\">\r\n                        <div class=\"col-sm-12 pl-0\">\r\n                            <app-shared-download-order [isOrder]=\"isOrderDownload\"></app-shared-download-order> \r\n                        </div> \r\n                    </div>\r\n            </table>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}::ng-deep .modal-dialog{max-width:740px}::ng-deep .modal-dialog .modal-content{padding-bottom:60px!important}::ng-deep .modal-dialog .modal-content{padding:30px 40px}::ng-deep .modal-dialog h4{font-size:var(--fontsize28);line-height:2.25rem}::ng-deep .modal-dialog .closePopup{cursor:pointer}::ng-deep .modal-dialog td{color:#161616;padding:10px 0;border:none}::ng-deep .modal-dialog .colOne{width:80%}::ng-deep .modal-dialog .downloadPDF{cursor:pointer;display:inline-block;color:#b61828;text-decoration:underline}::ng-deep .modal-dialog .downloadPDF a{color:#b61828}::ng-deep .modal-dialog .downloadPDF img{margin-right:10px}::ng-deep .modal-dialog .orderDate{font-size:14px;color:#707070}@media screen and (max-width: 767px){::ng-deep .modal-dialog .modal-content{height:100vh}}\n"], components: [{ type: i1.SharedDownloadOrderComponent, selector: "app-shared-download-order", inputs: ["isOrder"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DownloadPopupComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/custom-order-details/order-detail-grid/order-detail-grid.component.js

@@ -212,7 +212,7 @@ export class OrderDetailGridComponent {
     }
 }
 OrderDetailGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderDetailGridComponent, deps: [{ token: i1.CartService }, { token: i2.UserAccountDetailServiceService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OrderDetailGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OrderDetailGridComponent, selector: "app-order-detail-grid", inputs: { sortByVal: "sortByVal", cartDetails: "cartDetails", orderDate: "orderDate", isCardData: "isCardData" }, viewQueries: [{ propertyName: "masonry", first: true, predicate: NgxMasonryComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async\">Loading&#8230;</div>\r\n<div class=\"py-3\">\r\n  <ngx-masonry class=\"row\" *ngIf=\"cartDetails?.length; else nodata\">\r\n    <div\r\n      class=\"col-lg-3 col-sm-6\"\r\n      ngxMasonryItem\r\n      *ngFor=\"let cart of cartDetails; let i = index\"\r\n    >\r\n      <div class=\"cart-grid-tile\">\r\n        <div class=\"grid-tile-top position-relative\">\r\n          <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n            <span class=\"sku-code\">SKU:{{ cart?.product?.code }}</span> \r\n          </div>\r\n          <div class=\"row flex-nowrap\">\r\n            <div class=\"col-md-4 product-img\">\r\n              <ng-container\r\n                *ngIf=\"\r\n                  cartDetails[i]?.product?.flashingProduct;\r\n                  else normalImage\r\n                \"\r\n              >\r\n                <a\r\n                  data-toggle=\"modal\"\r\n                  class=\"flashing-expand\"\r\n                  (click)=\"viewImage($event, cartDetails[i])\"\r\n                  [attr.data-target]=\"'#imageModal'\"\r\n                  *ngIf=\"hasImage(cartDetails[i]); else hasPdf\"\r\n                >\r\n                  <cx-media\r\n                    [container]=\"getImageDetails(cartDetails[i])\"\r\n                    format=\"cartIcon\"\r\n                    role=\"presentation\"\r\n                  ></cx-media>\r\n                </a>\r\n                <ng-template #hasPdf>\r\n                  <a\r\n                    class=\"flashing-expand flashing-open\"\r\n                    [href]=\"getPdfLink(cartDetails[i])\"\r\n                    target=\"_blank\"\r\n                  >\r\n                    <img\r\n                      class=\"pdf-icon\"\r\n                      src=\"../../../../../assets/images/pdf-icon.svg\"\r\n                      alt=\"Click to open PDF\"\r\n                      title=\"Click to open PDF\"\r\n                    />\r\n                  </a>\r\n                </ng-template>\r\n              </ng-container>\r\n              <ng-template #normalImage>\r\n                <cx-media\r\n                  [container]=\"getImageDetails(cartDetails[i])\"\r\n                  format=\"cartIcon\"\r\n                  role=\"presentation\"\r\n                ></cx-media>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"col-md-8\">\r\n              <h4 class=\"productName\">{{ cart?.product?.name }}</h4>\r\n            </div>\r\n          </div>\r\n          <span class=\"expandBtn\" (click)=\"arrowHideShow(i)\">\r\n            <ng-container *ngIf=\"arrowUpDown[i] == true; else arrowUp\">\r\n              <i class=\"fas fa-chevron-up\"></i>\r\n            </ng-container>\r\n            <ng-template #arrowUp>\r\n              <i class=\"fas fa-chevron-down\"></i>\r\n            </ng-template>\r\n          </span>\r\n        </div>\r\n        <ng-container *ngIf=\"arrowUpDown[i]\">\r\n          <div class=\"grid-tile-middle\">\r\n            <ng-container *ngIf=\"cart?.product?.classifications\">\r\n              <p class=\"mt-1 mb-4 attribute\">\r\n                <span *ngIf=\"cart?.product?.classifications[0]?.features\">\r\n                  {{\r\n                    getClassifications(cartDetails[i]?.product?.classifications)\r\n                  }}\r\n                </span>\r\n              </p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"cart?.subLineConfigInfos?.length > 0\">\r\n              <a\r\n                href=\"javascript:void(0)\"\r\n                (click)=\"showHide(i)\"\r\n                class=\"see-more-link\"\r\n              >\r\n                {{ showDetails[i] == true ? \"Hide\" : \"See\" }} more details\r\n              </a>\r\n              <div *ngIf=\"showDetails[i]\">\r\n                <ng-container>\r\n                  <table class=\"no-border cart-details-table w-100\">\r\n                    <tr>\r\n                      <th>Quantity</th>\r\n                      <th>Length (LM)</th>\r\n                      <th *ngIf=\"cart?.subLineConfigInfos[0]?.bundleName\">\r\n                        Bundle\r\n                      </th>\r\n                    </tr>\r\n                    <tr *ngFor=\"let subLine of cart?.subLineConfigInfos\">\r\n                      <td>{{ subLine?.quantity }}</td>\r\n                      <td>{{ subLine?.length | number : \"0.3-3\" }}</td>\r\n                      <td *ngIf=\"subLine?.bundleName\">\r\n                        {{ subLine?.bundleName }}<br />{{ subLine?.reference }}\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"col-sm-12 mt-3\">\r\n            <div class=\"row border-bottom\">\r\n              <ul class=\"col-12 orderInfo\"> \r\n                <!-- <li>\r\n                  <label>Qty Shipped:</label>\r\n                  <span class=\"InfoText\">-</span>\r\n                </li> -->\r\n                <li *ngIf=\"cart?.consignments && cart?.consignments?.length == 1\">\r\n                  <label>Delivery #:</label>\r\n                  <span class=\"InfoText\">\r\n                  <a [href]=\"'/delivery-details/' + cart?.consignments[0].code\" class=\"consignment-number\" title=\"Consignment Number\">{{cart?.consignments[0]?.code}} </a>\r\n                  </span>\r\n                </li>\r\n                <li>\r\n                  <label>Delivery Date:</label>\r\n                  <span class=\"InfoText\">\r\n                    {{ orderDate | date : \"dd/MM/yyyy\" }}</span\r\n                  >\r\n                </li>\r\n                <li\r\n                *ngIf=\"\r\n              !cart?.consignments ||\r\n              (cart?.consignments && cart?.consignments?.length < 2)\"\r\n                >\r\n                  <label>Status:</label>\r\n                  <span class=\"InfoText\">\r\n                    <small\r\n                    *ngIf=\"\r\n                      !cart?.consignments || \r\n                      (cart?.consignments && cart?.consignments?.length < 2)\"\r\n                      class=\"statusColor\"\r\n                      [ngStyle]=\"{'background-color': getStatusColor(cart)}\"\r\n                    ></small>\r\n                    {{\r\n                      !cart?.consignments ||\r\n                      (cart?.consignments && cart?.consignments?.length < 2)\r\n                        ? cart?.consignments && cart?.consignments?.length == 1\r\n                          ? cart?.consignments[0]?.entries[0]?.statusDisplay\r\n                          : cart?.statusDisplay\r\n                        : \"\"\r\n                    }}\r\n                    </span\r\n                  >\r\n                </li>\r\n              </ul>\r\n            </div>\r\n            <ng-container\r\n            *ngIf=\"cart?.consignments && cart?.consignments.length > 1\"\r\n            >\r\n              <div *ngFor=\"let consignment of cart?.consignments\" class=\"row mt-3 border-bottom\">\r\n                <ul class=\"col-12 orderInfo\">\r\n                  <li>\r\n                    <label>Qty Shipped:</label>\r\n                    <span class=\"InfoText\">{{ consignment.entries[0]?.shippedQuantity }} {{ cart?.unit?.code }}</span>\r\n                  </li>\r\n                  <li>\r\n                    <label>Delivery #:</label>\r\n                    <span class=\"InfoText\">\r\n                      <a [href]=\"'/delivery-details/' + consignment?.code\" class=\"consignment-number\" title=\"Consignment Number\">{{ consignment?.code }}</a>\r\n                    </span>\r\n                  </li>\r\n                  <li>\r\n                    <label>Delivery Date:</label>\r\n                    <span class=\"InfoText\">\r\n                      {{ consignment.statusDate | date : \"dd/MM/yyyy\" }}</span\r\n                    >\r\n                  </li>\r\n                  <li>\r\n                    <label>Status:</label>\r\n                    <span class=\"InfoText\">\r\n                      <small\r\n                        class=\"statusColor\"\r\n                        [ngStyle]=\"{\r\n                          'background-color':\r\n                            consignment?.entries[0]?.status == 'CREATED'\r\n                              ? '#F3A931'\r\n                              : consignment?.entries[0]?.status == 'APPROVED'\r\n                              ? '#f26522'\r\n                              : consignment?.entries[0]?.status == 'PROCESSING'\r\n                              ? '#75578A'\r\n                              : consignment?.entries[0]?.status == 'READY'\r\n                              ? '#496471'\r\n                              : consignment?.entries[0]?.status == 'DELIVERING'\r\n                              ? '#00ACBD'\r\n                              : consignment?.entries[0]?.status == 'COMPLETED'\r\n                              ? '#8DC440'\r\n                              : consignment?.entries[0]?.status == 'RETURNED'\r\n                              ? '#8DC440'\r\n                              : consignment?.entries[0]?.status == 'CANCELLED'\r\n                              ? '#000000'\r\n                              : consignment?.entries[0]?.status == 'DESPATCHED'\r\n                              ? '#4081c4'\r\n                              : ''\r\n                        }\"\r\n                      ></small>\r\n                      {{ consignment?.entries[0]?.statusDisplay || \"-\" }}</span\r\n                    >\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"grid-tile-bottom\">\r\n          <div class=\"row\">\r\n            <div class=\"col-7 border-right\">\r\n              <div class=\"total-qty\">\r\n                <div>\r\n                  <p class=\"m-0\">{{ cart?.jobReference || \"-\" }}</p>\r\n                  <ng-container\r\n                    *ngIf=\"\r\n                      cart?.configurationInfos?.length;\r\n                      else accessoriesColor\r\n                    \"\r\n                  >\r\n                    <p\r\n                      class=\"colors-paragraph mb-0\"\r\n                      *ngIf=\"\r\n                        !cart?.product?.flashingProduct;\r\n                        else flashingColour\r\n                      \"\r\n                    >\r\n                      <span\r\n                        class=\"revieworder-color mr-2\"\r\n                        [ngStyle]=\"{\r\n                          background:\r\n                            cart?.configurationInfos[0]?.configurationValue?.split(\r\n                              '|'\r\n                            ) | slice : 2\r\n                        }\"\r\n                      ></span>\r\n                      {{\r\n                        cart?.configurationInfos[0]?.configurationValue?.split(\r\n                          \"|\"\r\n                        ) | slice : 1 : 2\r\n                      }}\r\n                    </p>\r\n                    <ng-template #flashingColour>\r\n                      <p class=\"colors-paragraph mb-0\">\r\n                        <span\r\n                          class=\"revieworder-color mr-3\"\r\n                          [ngStyle]=\"{\r\n                            background: getColourDetails(\r\n                              cartDetails[i]?.configurationInfos,\r\n                              'background'\r\n                            )\r\n                          }\"\r\n                        ></span>\r\n                        {{\r\n                          getColourDetails(\r\n                            cartDetails[i]?.configurationInfos,\r\n                            \"name\"\r\n                          )\r\n                        }}\r\n                      </p>\r\n                    </ng-template>\r\n                  </ng-container>\r\n\r\n                  <ng-template #accessoriesColor>\r\n                    <p class=\"colors-paragraph my-2\" *ngIf=\"hasColour(cart)\">\r\n                      <span\r\n                        class=\"revieworder-color mr-2\"\r\n                        [ngStyle]=\"{\r\n                          background: cart?.colour?.hexadecimalCode\r\n                        }\"\r\n                      ></span>\r\n                      {{ cart?.colour?.name }}\r\n                    </p>\r\n                  </ng-template>\r\n                </div>\r\n                <span\r\n                  >Total Qty: {{ cart?.quantityDouble }}\r\n                  {{ cart?.unit?.code }}</span\r\n                ><br />\r\n                <span *ngIf=\"isOrderPermissions\" class=\"subPrice\"\r\n                  >@ {{  cart.discountedBasePrice?.formattedValue? cart.discountedBasePrice?.formattedValue : cart.basePrice?.formattedValue }}/{{\r\n                    cart.discountedBasePrice?.unitType ? cart.discountedBasePrice?.unitType : cart.basePrice?.unitType\r\n                  }}</span\r\n                >\r\n              </div>\r\n            </div>\r\n            <div class=\"col-5 px-0 d-flex flex-column\">\r\n              <div class=\"total-amount text-right py-3 px-2\">\r\n                <h4>{{ cart?.totalPrice?.formattedValue || \"-\" }}</h4>\r\n                <span *ngIf=\"isOrderPermissions\">excl GST</span>\r\n              </div>\r\n              <div class=\"text-left py-3 px-2\">\r\n                <span\r\n                *ngIf=\"cart?.consignments && cart?.consignments?.length == 1\"\r\n                class=\"InfoText\"\r\n              >\r\n                <small\r\n                  class=\"statusColor\"\r\n                  [ngStyle]=\"{\r\n                    'background-color':\r\n                      cart?.consignments[0]?.entries[0]?.status == 'CREATED'\r\n                        ? '#F3A931'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'APPROVED'\r\n                        ? '#f26522'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'PROCESSING'\r\n                        ? '#75578A'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'READY'\r\n                        ? '#496471'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'DELIVERING'\r\n                        ? '#00ACBD'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'COMPLETED'\r\n                        ? '#8DC440'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'RETURNED'\r\n                        ? '#8DC440'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'CANCELLED'\r\n                        ? '#000000'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'DESPATCHED'\r\n                        ? '#4081c4'\r\n                        : ''\r\n                  }\"\r\n                ></small>\r\n                {{\r\n                  cart?.consignments[0]?.entries[0]?.statusDisplay\r\n                    ? cart?.consignments[0]?.entries[0]?.statusDisplay\r\n                    : cart?.statusDisplay\r\n                }}</span\r\n              >\r\n              <span\r\n                *ngIf=\"\r\n                  !cart?.consignments ||\r\n                  cart?.consignments?.length > 1 ||\r\n                  cart?.consignments?.length == 0\r\n                \"\r\n                class=\"InfoText\"\r\n              >\r\n                <small\r\n                  class=\"statusColor\"\r\n                  [ngStyle]=\"{\r\n                    'background-color':\r\n                      cart == 'CREATED'\r\n                        ? '#F3A931'\r\n                        : cart == 'APPROVED'\r\n                        ? '#f26522'\r\n                        : cart == 'PROCESSING'\r\n                        ? '#75578A'\r\n                        : cart == 'READY'\r\n                        ? '#496471'\r\n                        : cart == 'DELIVERING'\r\n                        ? '#00ACBD'\r\n                        : cart == 'COMPLETED'\r\n                        ? '#8DC440'\r\n                        : cart == 'RETURNED'\r\n                        ? '#8DC440'\r\n                        : cart == 'CANCELLED'\r\n                        ? '#000000'\r\n                        : cart == 'DESPATCHED'\r\n                        ? '#4081c4'\r\n                        : ''\r\n                  }\"\r\n                ></small>\r\n                {{ cart?.consignments?.entries[0]?.statusDisplay || \"-\" }}\r\n</span\r\n              >\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"\r\n            cartDetails[i]?.product?.flashingProduct &&\r\n            cartDetails[i]?.productConfiguredInfos\r\n          \"\r\n        >\r\n          <ng-container\r\n            *ngFor=\"let data of cartDetails[i]?.productConfiguredInfos\"\r\n          >\r\n            <div\r\n              class=\"flashing-block\"\r\n              *ngIf=\"data?.product?.name?.toLowerCase() == 'flashguard'\"\r\n            >\r\n              <div class=\"grid-tile-top\">\r\n                <div>\r\n                  <h6 class=\"skuId\">SKU: {{ data?.product?.code }}</h6>\r\n                  <h3 class=\"flash-title\">{{ data?.product?.name }}</h3>\r\n                  <span *ngIf=\"data?.girth\">Girth: +{{ data?.girth }}mm</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"grid-tile-bottom\">\r\n                <div class=\"row\">\r\n                  <div\r\n                    class=\"col-md-6 col-6 d-flex align-items-center border-right\"\r\n                  >\r\n                    <div class=\"total-qty\">\r\n                      <div>\r\n                        Total Qty: {{ data?.quantityDouble }}\r\n                        {{ data?.unitType }}\r\n                      </div>\r\n                      <span *ngIf=\"isOrderPermissions\"\r\n                        >@{{  cart.discountedBasePrice?.formattedValue? cart.discountedBasePrice?.formattedValue : cart.basePrice?.formattedValue }}/{{\r\n                          cart.discountedBasePrice?.unitType ? cart.discountedBasePrice?.unitType : cart.basePrice?.unitType\r\n                        }}</span\r\n                      >\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"col-md-6 col-6 d-flex justify-content-end align-items-center text-right\"\r\n                  >\r\n                    <div class=\"total-amount text-right\">\r\n                      <h4>{{ data?.totalPrice?.formattedValue || \"-\" }}</h4>\r\n                      <span *ngIf=\"isOrderPermissions\">excl GST</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ngx-masonry>\r\n  <ng-template #nodata>\r\n    <div class=\"col-sm-12\">\r\n      <p class=\"text-center\">{{ noRecord }}</p>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<div\r\n  class=\"modal fade\"\r\n  id=\"imageModal\"\r\n  role=\"dialog\"\r\n  aria-labelledby=\"imageModal\"\r\n  aria-hidden=\"true\"\r\n  #imageModal\r\n>\r\n  <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <i\r\n          class=\"icon-close invite-pop-close\"\r\n          #closeInviteModal\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n        ></i>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <img [src]=\"imageModalSrc\" alt=\"alert\" />\r\n        <div *ngIf=\"isFlashingModal\" class=\"flashing-details\">\r\n          <app-custom-flashing-image-details\r\n            [cartDetails]=\"flashingImageDetails\"\r\n          ></app-custom-flashing-image-details>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}#visualization-container{text-align:center;margin:0 auto}#cds-viewer-container-3d{width:320px;height:200px}#cds-viewer-container-2d{width:320px;height:200px}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}.cart-grid-tile{border:1px solid #E0E0E0;margin-bottom:20px;color:#1d1d1b}.cart-grid-tile .grid-tile-top{background-color:#e8e8e8;border:1px solid #E0E0E0;padding:15px;color:#1d1d1b}.cart-grid-tile .grid-tile-top .sku-code{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;color:#707070}.cart-grid-tile .grid-tile-top .prod-img{width:70px;height:70px;background-color:#fff}.cart-grid-tile .grid-tile-top .delete-icon{cursor:pointer}.cart-grid-tile .grid-tile-top h4{margin-left:6px;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.cart-grid-tile .border-bottom{border-bottom:1px solid #E0E0E0}.cart-grid-tile .grid-tile-middle{background-color:#fff;padding:15px;border-bottom:1px solid #E0E0E0}.cart-grid-tile .grid-tile-middle .see-more-link{text-decoration:underline}.cart-grid-tile .grid-tile-middle .see-more-link:hover{color:#d51317}.cart-grid-tile .grid-tile-middle .custom-input-field{width:100%;border:1px solid #E0E0E0;height:40px;margin-bottom:15px;padding-left:15px}.cart-grid-tile .grid-tile-middle .color-block{width:20px;height:20px;border:1px solid #E0E0E0}.cart-grid-tile .grid-tile-middle .more-color{cursor:pointer;color:#b61828;margin-left:10px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-underline-offset:4px;-webkit-text-decoration-style:dashed;text-decoration-style:dashed;position:relative}.cart-grid-tile .grid-tile-middle .more-detail{text-decoration:underline;cursor:pointer;margin-bottom:0}.cart-grid-tile .grid-tile-middle a{color:#262626;text-decoration:underline;cursor:pointer}.cart-grid-tile .grid-tile-middle a:hover{color:#262626}.cart-grid-tile .expandBtn{z-index:9;cursor:pointer;position:absolute;background-color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;bottom:-24px;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);box-shadow:0 0 6px #00000026;-webkit-box-shadow:0px 0px 6px rgba(0,0,0,.15);-moz-box-shadow:0px 0px 6px rgba(0,0,0,.15)}.cart-grid-tile .subPrice{color:#707070}.cart-grid-tile .grid-tile-bottom{background-color:#fff;padding:0 15px;border-top:1px solid #E0E0E0}.cart-grid-tile .grid-tile-bottom .total-qty{color:#1d1d1b;font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif;padding:15px 0}.cart-grid-tile .grid-tile-bottom .total-amount{color:#1d1d1b;border-bottom:1px solid #E0E0E0}.cart-grid-tile .grid-tile-bottom .total-amount h4{font-size:var(--fontsize20);margin-bottom:0}.cart-grid-tile .grid-tile-bottom .total-amount span{font-size:var(--fontsize14)}.cart-grid-tile .cart-grid-tile .product-img{width:50px;height:50px;min-width:70px;text-align:center}.cart-grid-tile .cart-grid-tile .product-img cx-media{top:-5px;border:1px solid #C6C6C6}.cart-grid-tile .consignment-number{text-decoration:underline;color:#b61828}.cart-grid-tile .consignment-number:hover,.cart-grid-tile .consignment-number:visited{color:#b61828}.bundling{text-align:right;top:20px;margin-bottom:15px}.bundling span.text{display:inline-block;position:relative;top:-12px;font-size:var(--fontsize14)}.switch{position:relative;display:inline-block;width:50px;margin-top:-4px;height:22px}.switch input{opacity:0;width:0;height:0}.switch input:not(:checked)+.slider:after{content:\"NO\";right:6px;position:absolute;color:#fff;top:3px;font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.switch input:checked+.slider{background-color:#b61828}.switch input:checked+.slider:before{transform:translate(26px);left:5px}.switch input:checked+.slider:after{content:\"YES\";left:5px;position:absolute;color:#fff;top:3px;font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.switch input:focus+.slider{box-shadow:0 0 1px #2196f3}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#a6a6a5;transition:.4s}.slider:before{position:absolute;content:\"\";height:16px;width:16px;top:3px;left:3px;bottom:3px;background-color:#fff;transition:.4s}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.cart-details-table th{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.add-more-btn{background:none;border:none}.add-more-btn .add-more{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2219%22 height%3D%2219%22 viewBox%3D%220 0 19 19%22%3E%0D  %3Cpath id%3D%22Icon_awesome-plus-circle%22 data-name%3D%22Icon awesome-plus-circle%22 d%3D%22M10.063.563a9.5%2C9.5%2C0%2C1%2C0%2C9.5%2C9.5A9.5%2C9.5%2C0%2C0%2C0%2C10.063.563Zm5.516%2C10.573a.461.461%2C0%2C0%2C1-.46.46H11.595v3.524a.461.461%2C0%2C0%2C1-.46.46H8.99a.461.461%2C0%2C0%2C1-.46-.46V11.595H5.006a.461.461%2C0%2C0%2C1-.46-.46V8.99a.461.461%2C0%2C0%2C1%2C.46-.46H8.53V5.006a.461.461%2C0%2C0%2C1%2C.46-.46h2.145a.461.461%2C0%2C0%2C1%2C.46.46V8.53h3.524a.461.461%2C0%2C0%2C1%2C.46.46Z%22 transform%3D%22translate(-0.563 -0.563)%22%2F%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center;width:20px;height:20px;display:inline-block;top:4px}.colours .colour{padding:0 15px;position:relative}.colours .colour .checkbox{display:none}.colours .colour .colour-title{position:absolute;bottom:-48px;width:40px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:var(--fontsize14);text-align:center;cursor:grabbing}.colours .colour.selected{border:1px solid #000000}.colours .colour.selected .checkbox{position:absolute;background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2217.186%22 height%3D%2217.186%22 viewBox%3D%220 0 17.186 17.186%22%3E%0D  %3Cg id%3D%22Group_12857%22 data-name%3D%22Group 12857%22 transform%3D%22translate(0.25 0.25)%22%3E%0D    %3Ccircle id%3D%22Ellipse_14%22 data-name%3D%22Ellipse 14%22 cx%3D%228.316%22 cy%3D%228.316%22 r%3D%228.316%22 transform%3D%22translate(0 0.039)%22%2F%3E%0D    %3Cpath id%3D%22Icon_ionic-md-checkmark-circle%22 data-name%3D%22Icon ionic-md-checkmark-circle%22 d%3D%22M11.718%2C3.375a8.343%2C8.343%2C0%2C1%2C0%2C8.343%2C8.343A8.367%2C8.367%2C0%2C0%2C0%2C11.718%2C3.375ZM10.005%2C16.166%2C5.729%2C11.89l1.2-1.2%2C3.08%2C3.08%2C6.5-6.5%2C1.2%2C1.2Z%22 transform%3D%22translate(-3.375 -3.375)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Icon_ionic-md-checkmark-circle_-_Outline%22 data-name%3D%22Icon ionic-md-checkmark-circle - Outline%22 d%3D%22M11.718%2C3.125a8.583%2C8.583%2C0%2C0%2C1%2C6.069%2C14.662A8.583%2C8.583%2C0%2C1%2C1%2C5.649%2C5.649%2C8.532%2C8.532%2C0%2C0%2C1%2C11.718%2C3.125Zm0%2C16.686A8.117%2C8.117%2C0%2C1%2C0%2C6%2C17.433%2C8.035%2C8.035%2C0%2C0%2C0%2C11.718%2C19.811ZM16.511%2C6.916l1.553%2C1.553-8.059%2C8.05L5.376%2C11.89l1.553-1.553%2C3.08%2C3.08Zm.846%2C1.553-.846-.846-6.5%2C6.5-3.08-3.08-.846.846%2C3.922%2C3.922Z%22 transform%3D%22translate(-3.375 -3.375)%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center;width:20px;height:20px;display:inline-block;top:10px;left:10px}.colours .colour.main{box-sizing:border-box;width:40px;height:40px;display:inline-block;padding:0;border:1px solid #C6C6C6}.colours_container{width:320px;height:auto;position:absolute;z-index:1}.colors-paragraph{display:flex;align-items:center}.colors-paragraph .revieworder-color{width:20px;height:20px;border:1px solid #000000;display:inline-flex}.orderInfo li{display:flex}.orderInfo li label{font-family:\"Arial Bold\",sans-serif;width:50%}.orderInfo li .InfoText{display:inline-block;padding-left:10px;width:50%}.productImg{width:71px;height:71px}.productName{line-height:20px}.statusColor{display:inline-block;width:12px;height:12px;border-radius:50%}.attribute{font-size:14px}::ng-deep .flashing-expand{cursor:pointer}::ng-deep .flashing-expand:after{background:url(../../../../assets/images/expand-icon.svg) no-repeat center;z-index:2;width:24px;content:\"\";height:24px;position:absolute;top:0;right:0}::ng-deep .flashing-expand img{max-height:55px;max-width:60px;background:#ffffff}::ng-deep .flashing-expand.flashing-open:after{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%0D  %3Cg id%3D%22Group_14477%22 data-name%3D%22Group 14477%22 transform%3D%22translate(-5533.5 11452.992)%22%3E%0D    %3Cg id%3D%22Group_14476%22 data-name%3D%22Group 14476%22%3E%0D      %3Cg id%3D%22Group_14475%22 data-name%3D%22Group 14475%22 transform%3D%22translate(5164.5 -12321.992)%22%3E%0D        %3Crect id%3D%22Rectangle_1116%22 data-name%3D%22Rectangle 1116%22 width%3D%2224%22 height%3D%2224%22 transform%3D%22translate(369 869)%22 fill%3D%22%23fff%22%2F%3E%0D      %3C%2Fg%3E%0D      %3Cpath id%3D%22Path_11366%22 data-name%3D%22Path 11366%22 d%3D%22M142.587%2C65.954v4.569a1.963%2C1.963%2C0%2C0%2C1-1.839%2C2.068H127.833a1.965%2C1.965%2C0%2C0%2C1-1.839-2.068V58.066A1.963%2C1.963%2C0%2C0%2C1%2C127.833%2C56h4.8a.83.83%2C0%2C1%2C1%2C0%2C1.659h-4.505a.516.516%2C0%2C0%2C0-.472.553V70.378a.521.521%2C0%2C0%2C0%2C.472.553h12.33a.516.516%2C0%2C0%2C0%2C.472-.553V65.954a.83.83%2C0%2C1%2C1%2C1.659%2C0Z%22 transform%3D%22translate(5411.209 -11505.287)%22 fill-rule%3D%22evenodd%22%2F%3E%0D    %3C%2Fg%3E%0D    %3Cpath id%3D%22Path_11367%22 data-name%3D%22Path 11367%22 d%3D%22M26.413%2C4.5H21.5a.607.607%2C0%2C0%2C0-.608.608v.009a.607.607%2C0%2C0%2C0%2C.608.608h3.4l-5.091%2C5.126a.608.608%2C0%2C0%2C0%2C.858.862l5.126-5.1v3.4a.607.607%2C0%2C0%2C0%2C.608.608h.009a.607.607%2C0%2C0%2C0%2C.608-.608V5.108A.607.607%2C0%2C0%2C0%2C26.413%2C4.5Z%22 transform%3D%22translate(5526.775 -11453.789)%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}#imageModal.show{display:flex!important;vertical-align:middle!important;align-items:center!important}#imageModal.show .modal-header{justify-content:right;border:none}#imageModal.show .modal-body{vertical-align:middle;margin:0 1rem;overflow:auto;max-height:80vh}#imageModal.show .modal-body img{max-width:100%;max-height:80vh}.flashing-block{background-color:#e8e8e8}.flashing-block .flash-title{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}.flashing-block .skuId{color:#707070;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.flashing-block .gst-text{display:block;font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif}.flashing-block .total-amount{border-bottom:none!important}@media screen and (max-width: 767px){.cart-grid-tile .grid-tile-top h4{margin-top:10px;margin-left:0}.productImg{width:100%;height:100%}.total-qty span,.total-amount span{font-size:1rem}.total-qty h4,.total-amount h4{font-size:1.25rem!important}}\n"], components: [{ type: i3.NgxMasonryComponent, selector: "[ngx-masonry], ngx-masonry", inputs: ["updateLayout", "ordered", "options"], outputs: ["layoutComplete", "removeComplete", "itemsLoaded"] }, { type: i4.MediaComponent, selector: "cx-media", inputs: ["container", "format", "alt", "role", "loading"], outputs: ["loaded"] }, { type: i5.CustomFlashingImageDetailsComponent, selector: "app-custom-flashing-image-details", inputs: ["cartDetails", "forPdf", "appendixNo"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgxMasonryDirective, selector: "[ngxMasonryItem], ngxMasonryItem", inputs: ["prepend"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i6.AsyncPipe, "number": i6.DecimalPipe, "date": i6.DatePipe, "slice": i6.SlicePipe } });
+OrderDetailGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OrderDetailGridComponent, selector: "app-order-detail-grid", inputs: { sortByVal: "sortByVal", cartDetails: "cartDetails", orderDate: "orderDate", isCardData: "isCardData" }, viewQueries: [{ propertyName: "masonry", first: true, predicate: NgxMasonryComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async\">Loading&#8230;</div>\r\n<div class=\"py-3\">\r\n  <ngx-masonry class=\"row\" *ngIf=\"cartDetails?.length; else nodata\">\r\n    <div\r\n      class=\"col-lg-3 col-sm-6\"\r\n      ngxMasonryItem\r\n      *ngFor=\"let cart of cartDetails; let i = index\"\r\n    >\r\n      <div class=\"cart-grid-tile\">\r\n        <div class=\"grid-tile-top position-relative\">\r\n          <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n            <span class=\"sku-code\">SKU:{{ cart?.product?.code }}</span> \r\n          </div>\r\n          <div class=\"row flex-nowrap\">\r\n            <div class=\"col-md-4 product-img\">\r\n              <ng-container\r\n                *ngIf=\"\r\n                  cartDetails[i]?.product?.flashingProduct;\r\n                  else normalImage\r\n                \"\r\n              >\r\n                <a\r\n                  data-toggle=\"modal\"\r\n                  class=\"flashing-expand\"\r\n                  (click)=\"viewImage($event, cartDetails[i])\"\r\n                  [attr.data-target]=\"'#imageModal'\"\r\n                  *ngIf=\"hasImage(cartDetails[i]); else hasPdf\"\r\n                >\r\n                  <cx-media\r\n                    [container]=\"getImageDetails(cartDetails[i])\"\r\n                    format=\"cartIcon\"\r\n                    role=\"presentation\"\r\n                  ></cx-media>\r\n                </a>\r\n                <ng-template #hasPdf>\r\n                  <a\r\n                    class=\"flashing-expand flashing-open\"\r\n                    [href]=\"getPdfLink(cartDetails[i])\"\r\n                    target=\"_blank\"\r\n                  >\r\n                    <img\r\n                      class=\"pdf-icon\"\r\n                      src=\"../../../../../assets/images/pdf-icon.svg\"\r\n                      alt=\"Click to open PDF\"\r\n                      title=\"Click to open PDF\"\r\n                    />\r\n                  </a>\r\n                </ng-template>\r\n              </ng-container>\r\n              <ng-template #normalImage>\r\n                <cx-media\r\n                  [container]=\"getImageDetails(cartDetails[i])\"\r\n                  format=\"cartIcon\"\r\n                  role=\"presentation\"\r\n                ></cx-media>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"col-md-8\">\r\n              <h4 class=\"productName\">{{ cart?.product?.name }}</h4>\r\n            </div>\r\n          </div>\r\n          <span class=\"expandBtn\" (click)=\"arrowHideShow(i)\">\r\n            <ng-container *ngIf=\"arrowUpDown[i] == true; else arrowUp\">\r\n              <i class=\"fas fa-chevron-up\"></i>\r\n            </ng-container>\r\n            <ng-template #arrowUp>\r\n              <i class=\"fas fa-chevron-down\"></i>\r\n            </ng-template>\r\n          </span>\r\n        </div>\r\n        <ng-container *ngIf=\"arrowUpDown[i]\">\r\n          <div class=\"grid-tile-middle\">\r\n            <ng-container *ngIf=\"cart?.product?.classifications\">\r\n              <p class=\"mt-1 mb-4 attribute\">\r\n                <span *ngIf=\"cart?.product?.classifications[0]?.features\">\r\n                  {{\r\n                    getClassifications(cartDetails[i]?.product?.classifications)\r\n                  }}\r\n                </span>\r\n              </p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"cart?.subLineConfigInfos?.length > 0\">\r\n              <a\r\n                href=\"javascript:void(0)\"\r\n                (click)=\"showHide(i)\"\r\n                class=\"see-more-link\"\r\n              >\r\n                {{ showDetails[i] == true ? \"Hide\" : \"See\" }} more details\r\n              </a>\r\n              <div *ngIf=\"showDetails[i]\">\r\n                <ng-container>\r\n                  <table class=\"no-border cart-details-table w-100\">\r\n                    <tr>\r\n                      <th>Quantity</th>\r\n                      <th>Length (LM)</th>\r\n                      <th *ngIf=\"cart?.subLineConfigInfos[0]?.bundleName\">\r\n                        Bundle\r\n                      </th>\r\n                    </tr>\r\n                    <tr *ngFor=\"let subLine of cart?.subLineConfigInfos\">\r\n                      <td>{{ subLine?.quantity }}</td>\r\n                      <td>{{ subLine?.length | number : \"0.3-3\" }}</td>\r\n                      <td *ngIf=\"subLine?.bundleName\">\r\n                        {{ subLine?.bundleName }}<br />{{ subLine?.reference }}\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"col-sm-12 mt-3\">\r\n            <div class=\"row border-bottom\">\r\n              <ul class=\"col-12 orderInfo\"> \r\n                <!-- <li>\r\n                  <label>Qty Shipped:</label>\r\n                  <span class=\"InfoText\">-</span>\r\n                </li> -->\r\n                <li *ngIf=\"cart?.consignments && cart?.consignments?.length == 1\">\r\n                  <label>Delivery #:</label>\r\n                  <span class=\"InfoText\">\r\n                  <a [href]=\"'/delivery-details/' + cart?.consignments[0].code\" class=\"consignment-number\" title=\"Consignment Number\">{{cart?.consignments[0]?.code}} </a>\r\n                  </span>\r\n                </li>\r\n                <li>\r\n                  <label>Delivery Date:</label>\r\n                  <span class=\"InfoText\">\r\n                    {{ orderDate | date : \"dd/MM/yyyy\" }}</span\r\n                  >\r\n                </li>\r\n                <li\r\n                *ngIf=\"\r\n              !cart?.consignments ||\r\n              (cart?.consignments && cart?.consignments?.length < 2)\"\r\n                >\r\n                  <label>Status:</label>\r\n                  <span class=\"InfoText\">\r\n                    <small\r\n                    *ngIf=\"\r\n                      !cart?.consignments || \r\n                      (cart?.consignments && cart?.consignments?.length < 2)\"\r\n                      class=\"statusColor\"\r\n                      [ngStyle]=\"{'background-color': getStatusColor(cart)}\"\r\n                    ></small>\r\n                    {{\r\n                      !cart?.consignments ||\r\n                      (cart?.consignments && cart?.consignments?.length < 2)\r\n                        ? cart?.consignments && cart?.consignments?.length == 1\r\n                          ? cart?.consignments[0]?.entries[0]?.statusDisplay\r\n                          : cart?.statusDisplay\r\n                        : \"\"\r\n                    }}\r\n                    </span\r\n                  >\r\n                </li>\r\n              </ul>\r\n            </div>\r\n            <ng-container\r\n            *ngIf=\"cart?.consignments && cart?.consignments.length > 1\"\r\n            >\r\n              <div *ngFor=\"let consignment of cart?.consignments\" class=\"row mt-3 border-bottom\">\r\n                <ul class=\"col-12 orderInfo\">\r\n                  <li>\r\n                    <label>Qty Shipped:</label>\r\n                    <span class=\"InfoText\">{{ consignment.entries[0]?.shippedQuantity }} {{ cart?.unit?.code }}</span>\r\n                  </li>\r\n                  <li>\r\n                    <label>Delivery #:</label>\r\n                    <span class=\"InfoText\">\r\n                      <a [href]=\"'/delivery-details/' + consignment?.code\" class=\"consignment-number\" title=\"Consignment Number\">{{ consignment?.code }}</a>\r\n                    </span>\r\n                  </li>\r\n                  <li>\r\n                    <label>Delivery Date:</label>\r\n                    <span class=\"InfoText\">\r\n                      {{ consignment.statusDate | date : \"dd/MM/yyyy\" }}</span\r\n                    >\r\n                  </li>\r\n                  <li>\r\n                    <label>Status:</label>\r\n                    <span class=\"InfoText\">\r\n                      <small\r\n                        class=\"statusColor\"\r\n                        [ngStyle]=\"{\r\n                          'background-color':\r\n                            consignment?.entries[0]?.status == 'CREATED'\r\n                              ? '#F3A931'\r\n                              : consignment?.entries[0]?.status == 'APPROVED'\r\n                              ? '#f26522'\r\n                              : consignment?.entries[0]?.status == 'PROCESSING'\r\n                              ? '#75578A'\r\n                              : consignment?.entries[0]?.status == 'READY'\r\n                              ? '#496471'\r\n                              : consignment?.entries[0]?.status == 'DELIVERING'\r\n                              ? '#00ACBD'\r\n                              : consignment?.entries[0]?.status == 'COMPLETED'\r\n                              ? '#8DC440'\r\n                              : consignment?.entries[0]?.status == 'RETURNED'\r\n                              ? '#8DC440'\r\n                              : consignment?.entries[0]?.status == 'CANCELLED'\r\n                              ? '#000000'\r\n                              : consignment?.entries[0]?.status == 'DESPATCHED'\r\n                              ? '#4081c4'\r\n                              : ''\r\n                        }\"\r\n                      ></small>\r\n                      {{ consignment?.entries[0]?.statusDisplay || \"-\" }}</span\r\n                    >\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"grid-tile-bottom\">\r\n          <div class=\"row\">\r\n            <div class=\"col-7 border-right\">\r\n              <div class=\"total-qty\">\r\n                <div>\r\n                  <p class=\"m-0\">{{ cart?.jobReference || \"-\" }}</p>\r\n                  <ng-container\r\n                    *ngIf=\"\r\n                      cart?.configurationInfos?.length;\r\n                      else accessoriesColor\r\n                    \"\r\n                  >\r\n                    <p\r\n                      class=\"colors-paragraph mb-0\"\r\n                      *ngIf=\"\r\n                        !cart?.product?.flashingProduct;\r\n                        else flashingColour\r\n                      \"\r\n                    >\r\n                      <span\r\n                        class=\"revieworder-color mr-2\"\r\n                        [ngStyle]=\"{\r\n                          background:\r\n                            cart?.configurationInfos[0]?.configurationValue?.split(\r\n                              '|'\r\n                            ) | slice : 2\r\n                        }\"\r\n                      ></span>\r\n                      {{\r\n                        cart?.configurationInfos[0]?.configurationValue?.split(\r\n                          \"|\"\r\n                        ) | slice : 1 : 2\r\n                      }}\r\n                    </p>\r\n                    <ng-template #flashingColour>\r\n                      <p class=\"colors-paragraph mb-0\">\r\n                        <span\r\n                          class=\"revieworder-color mr-3\"\r\n                          [ngStyle]=\"{\r\n                            background: getColourDetails(\r\n                              cartDetails[i]?.configurationInfos,\r\n                              'background'\r\n                            )\r\n                          }\"\r\n                        ></span>\r\n                        {{\r\n                          getColourDetails(\r\n                            cartDetails[i]?.configurationInfos,\r\n                            \"name\"\r\n                          )\r\n                        }}\r\n                      </p>\r\n                    </ng-template>\r\n                  </ng-container>\r\n\r\n                  <ng-template #accessoriesColor>\r\n                    <p class=\"colors-paragraph my-2\" *ngIf=\"hasColour(cart)\">\r\n                      <span\r\n                        class=\"revieworder-color mr-2\"\r\n                        [ngStyle]=\"{\r\n                          background: cart?.colour?.hexadecimalCode\r\n                        }\"\r\n                      ></span>\r\n                      {{ cart?.colour?.name }}\r\n                    </p>\r\n                  </ng-template>\r\n                </div>\r\n                <span\r\n                  >Total Qty: {{ cart?.quantityDouble }}\r\n                  {{ cart?.unit?.code }}</span\r\n                ><br />\r\n                <span *ngIf=\"isOrderPermissions\" class=\"subPrice\"\r\n                  >@ {{  cart.discountedBasePrice?.formattedValue? cart.discountedBasePrice?.formattedValue : cart.basePrice?.formattedValue }}/{{\r\n                    cart.discountedBasePrice?.unitType ? cart.discountedBasePrice?.unitType : cart.basePrice?.unitType\r\n                  }}</span\r\n                >\r\n              </div>\r\n            </div>\r\n            <div class=\"col-5 px-0 d-flex flex-column\">\r\n              <div class=\"total-amount text-right py-3 px-2\">\r\n                <h4>{{ cart?.totalPrice?.formattedValue || \"-\" }}</h4>\r\n                <span *ngIf=\"isOrderPermissions\">excl GST</span>\r\n              </div>\r\n              <div class=\"text-left py-3 px-2\">\r\n                <span\r\n                *ngIf=\"cart?.consignments && cart?.consignments?.length == 1\"\r\n                class=\"InfoText\"\r\n              >\r\n                <small\r\n                  class=\"statusColor\"\r\n                  [ngStyle]=\"{\r\n                    'background-color':\r\n                      cart?.consignments[0]?.entries[0]?.status == 'CREATED'\r\n                        ? '#F3A931'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'APPROVED'\r\n                        ? '#f26522'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'PROCESSING'\r\n                        ? '#75578A'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'READY'\r\n                        ? '#496471'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'DELIVERING'\r\n                        ? '#00ACBD'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'COMPLETED'\r\n                        ? '#8DC440'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'RETURNED'\r\n                        ? '#8DC440'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'CANCELLED'\r\n                        ? '#000000'\r\n                        : cart?.consignments[0]?.entries[0]?.status == 'DESPATCHED'\r\n                        ? '#4081c4'\r\n                        : ''\r\n                  }\"\r\n                ></small>\r\n                {{\r\n                  cart?.consignments[0]?.entries[0]?.statusDisplay\r\n                    ? cart?.consignments[0]?.entries[0]?.statusDisplay\r\n                    : cart?.statusDisplay\r\n                }}</span\r\n              >\r\n              <span\r\n                *ngIf=\"\r\n                  !cart?.consignments ||\r\n                  cart?.consignments?.length > 1 ||\r\n                  cart?.consignments?.length == 0\r\n                \"\r\n                class=\"InfoText\"\r\n              >\r\n                <small\r\n                  class=\"statusColor\"\r\n                  [ngStyle]=\"{\r\n                    'background-color':\r\n                      cart == 'CREATED'\r\n                        ? '#F3A931'\r\n                        : cart == 'APPROVED'\r\n                        ? '#f26522'\r\n                        : cart == 'PROCESSING'\r\n                        ? '#75578A'\r\n                        : cart == 'READY'\r\n                        ? '#496471'\r\n                        : cart == 'DELIVERING'\r\n                        ? '#00ACBD'\r\n                        : cart == 'COMPLETED'\r\n                        ? '#8DC440'\r\n                        : cart == 'RETURNED'\r\n                        ? '#8DC440'\r\n                        : cart == 'CANCELLED'\r\n                        ? '#000000'\r\n                        : cart == 'DESPATCHED'\r\n                        ? '#4081c4'\r\n                        : ''\r\n                  }\"\r\n                ></small>\r\n                {{ cart?.consignments?.entries[0]?.statusDisplay || \"-\" }}\r\n</span\r\n              >\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"\r\n            cartDetails[i]?.product?.flashingProduct &&\r\n            cartDetails[i]?.productConfiguredInfos\r\n          \"\r\n        >\r\n          <ng-container\r\n            *ngFor=\"let data of cartDetails[i]?.productConfiguredInfos\"\r\n          >\r\n            <div\r\n              class=\"flashing-block\"\r\n              *ngIf=\"data?.product?.name?.toLowerCase() == 'flashguard'\"\r\n            >\r\n              <div class=\"grid-tile-top\">\r\n                <div>\r\n                  <h6 class=\"skuId\">SKU: {{ data?.product?.code }}</h6>\r\n                  <h3 class=\"flash-title\">{{ data?.product?.name }}</h3>\r\n                  <span *ngIf=\"data?.girth\">Girth: +{{ data?.girth }}mm</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"grid-tile-bottom\">\r\n                <div class=\"row\">\r\n                  <div\r\n                    class=\"col-md-6 col-6 d-flex align-items-center border-right\"\r\n                  >\r\n                    <div class=\"total-qty\">\r\n                      <div>\r\n                        Total Qty: {{ data?.quantityDouble }}\r\n                        {{ data?.unitType }}\r\n                      </div>\r\n                      <span *ngIf=\"isOrderPermissions\"\r\n                        >@{{  cart.discountedBasePrice?.formattedValue? cart.discountedBasePrice?.formattedValue : cart.basePrice?.formattedValue }}/{{\r\n                          cart.discountedBasePrice?.unitType ? cart.discountedBasePrice?.unitType : cart.basePrice?.unitType\r\n                        }}</span\r\n                      >\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"col-md-6 col-6 d-flex justify-content-end align-items-center text-right\"\r\n                  >\r\n                    <div class=\"total-amount text-right\">\r\n                      <h4>{{ data?.totalPrice?.formattedValue || \"-\" }}</h4>\r\n                      <span *ngIf=\"isOrderPermissions\">excl GST</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ngx-masonry>\r\n  <ng-template #nodata>\r\n    <div class=\"col-sm-12\">\r\n      <p class=\"text-center\">{{ noRecord }}</p>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<div\r\n  class=\"modal fade\"\r\n  id=\"imageModal\"\r\n  role=\"dialog\"\r\n  aria-labelledby=\"imageModal\"\r\n  aria-hidden=\"true\"\r\n  #imageModal\r\n>\r\n  <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <i\r\n          class=\"icon-close invite-pop-close\"\r\n          #closeInviteModal\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n        ></i>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <img [src]=\"imageModalSrc\" alt=\"alert\" />\r\n        <div *ngIf=\"isFlashingModal\" class=\"flashing-details\">\r\n          <app-custom-flashing-image-details\r\n            [cartDetails]=\"flashingImageDetails\"\r\n          ></app-custom-flashing-image-details>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}.cart-grid-tile{border:1px solid #E0E0E0;margin-bottom:20px;color:#1d1d1b}.cart-grid-tile .grid-tile-top{background-color:#e8e8e8;border:1px solid #E0E0E0;padding:15px;color:#1d1d1b}.cart-grid-tile .grid-tile-top .sku-code{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;color:#707070}.cart-grid-tile .grid-tile-top .prod-img{width:70px;height:70px;background-color:#fff}.cart-grid-tile .grid-tile-top .delete-icon{cursor:pointer}.cart-grid-tile .grid-tile-top h4{margin-left:6px;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.cart-grid-tile .border-bottom{border-bottom:1px solid #E0E0E0}.cart-grid-tile .grid-tile-middle{background-color:#fff;padding:15px;border-bottom:1px solid #E0E0E0}.cart-grid-tile .grid-tile-middle .see-more-link{text-decoration:underline}.cart-grid-tile .grid-tile-middle .see-more-link:hover{color:#d51317}.cart-grid-tile .grid-tile-middle .custom-input-field{width:100%;border:1px solid #E0E0E0;height:40px;margin-bottom:15px;padding-left:15px}.cart-grid-tile .grid-tile-middle .color-block{width:20px;height:20px;border:1px solid #E0E0E0}.cart-grid-tile .grid-tile-middle .more-color{cursor:pointer;color:#b61828;margin-left:10px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-underline-offset:4px;-webkit-text-decoration-style:dashed;text-decoration-style:dashed;position:relative}.cart-grid-tile .grid-tile-middle .more-detail{text-decoration:underline;cursor:pointer;margin-bottom:0}.cart-grid-tile .grid-tile-middle a{color:#262626;text-decoration:underline;cursor:pointer}.cart-grid-tile .grid-tile-middle a:hover{color:#262626}.cart-grid-tile .expandBtn{z-index:9;cursor:pointer;position:absolute;background-color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;bottom:-24px;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);box-shadow:0 0 6px #00000026;-webkit-box-shadow:0px 0px 6px rgba(0,0,0,.15);-moz-box-shadow:0px 0px 6px rgba(0,0,0,.15)}.cart-grid-tile .subPrice{color:#707070}.cart-grid-tile .grid-tile-bottom{background-color:#fff;padding:0 15px;border-top:1px solid #E0E0E0}.cart-grid-tile .grid-tile-bottom .total-qty{color:#1d1d1b;font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif;padding:15px 0}.cart-grid-tile .grid-tile-bottom .total-amount{color:#1d1d1b;border-bottom:1px solid #E0E0E0}.cart-grid-tile .grid-tile-bottom .total-amount h4{font-size:var(--fontsize20);margin-bottom:0}.cart-grid-tile .grid-tile-bottom .total-amount span{font-size:var(--fontsize14)}.cart-grid-tile .cart-grid-tile .product-img{width:50px;height:50px;min-width:70px;text-align:center}.cart-grid-tile .cart-grid-tile .product-img cx-media{top:-5px;border:1px solid #C6C6C6}.cart-grid-tile .consignment-number{text-decoration:underline;color:#b61828}.cart-grid-tile .consignment-number:hover,.cart-grid-tile .consignment-number:visited{color:#b61828}.bundling{text-align:right;top:20px;margin-bottom:15px}.bundling span.text{display:inline-block;position:relative;top:-12px;font-size:var(--fontsize14)}.switch{position:relative;display:inline-block;width:50px;margin-top:-4px;height:22px}.switch input{opacity:0;width:0;height:0}.switch input:not(:checked)+.slider:after{content:\"NO\";right:6px;position:absolute;color:#fff;top:3px;font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.switch input:checked+.slider{background-color:#b61828}.switch input:checked+.slider:before{transform:translate(26px);left:5px}.switch input:checked+.slider:after{content:\"YES\";left:5px;position:absolute;color:#fff;top:3px;font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.switch input:focus+.slider{box-shadow:0 0 1px #2196f3}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#a6a6a5;transition:.4s}.slider:before{position:absolute;content:\"\";height:16px;width:16px;top:3px;left:3px;bottom:3px;background-color:#fff;transition:.4s}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.cart-details-table th{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.add-more-btn{background:none;border:none}.add-more-btn .add-more{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2219%22 height%3D%2219%22 viewBox%3D%220 0 19 19%22%3E%0D  %3Cpath id%3D%22Icon_awesome-plus-circle%22 data-name%3D%22Icon awesome-plus-circle%22 d%3D%22M10.063.563a9.5%2C9.5%2C0%2C1%2C0%2C9.5%2C9.5A9.5%2C9.5%2C0%2C0%2C0%2C10.063.563Zm5.516%2C10.573a.461.461%2C0%2C0%2C1-.46.46H11.595v3.524a.461.461%2C0%2C0%2C1-.46.46H8.99a.461.461%2C0%2C0%2C1-.46-.46V11.595H5.006a.461.461%2C0%2C0%2C1-.46-.46V8.99a.461.461%2C0%2C0%2C1%2C.46-.46H8.53V5.006a.461.461%2C0%2C0%2C1%2C.46-.46h2.145a.461.461%2C0%2C0%2C1%2C.46.46V8.53h3.524a.461.461%2C0%2C0%2C1%2C.46.46Z%22 transform%3D%22translate(-0.563 -0.563)%22%2F%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center;width:20px;height:20px;display:inline-block;top:4px}.colours .colour{padding:0 15px;position:relative}.colours .colour .checkbox{display:none}.colours .colour .colour-title{position:absolute;bottom:-48px;width:40px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:var(--fontsize14);text-align:center;cursor:grabbing}.colours .colour.selected{border:1px solid #000000}.colours .colour.selected .checkbox{position:absolute;background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2217.186%22 height%3D%2217.186%22 viewBox%3D%220 0 17.186 17.186%22%3E%0D  %3Cg id%3D%22Group_12857%22 data-name%3D%22Group 12857%22 transform%3D%22translate(0.25 0.25)%22%3E%0D    %3Ccircle id%3D%22Ellipse_14%22 data-name%3D%22Ellipse 14%22 cx%3D%228.316%22 cy%3D%228.316%22 r%3D%228.316%22 transform%3D%22translate(0 0.039)%22%2F%3E%0D    %3Cpath id%3D%22Icon_ionic-md-checkmark-circle%22 data-name%3D%22Icon ionic-md-checkmark-circle%22 d%3D%22M11.718%2C3.375a8.343%2C8.343%2C0%2C1%2C0%2C8.343%2C8.343A8.367%2C8.367%2C0%2C0%2C0%2C11.718%2C3.375ZM10.005%2C16.166%2C5.729%2C11.89l1.2-1.2%2C3.08%2C3.08%2C6.5-6.5%2C1.2%2C1.2Z%22 transform%3D%22translate(-3.375 -3.375)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Icon_ionic-md-checkmark-circle_-_Outline%22 data-name%3D%22Icon ionic-md-checkmark-circle - Outline%22 d%3D%22M11.718%2C3.125a8.583%2C8.583%2C0%2C0%2C1%2C6.069%2C14.662A8.583%2C8.583%2C0%2C1%2C1%2C5.649%2C5.649%2C8.532%2C8.532%2C0%2C0%2C1%2C11.718%2C3.125Zm0%2C16.686A8.117%2C8.117%2C0%2C1%2C0%2C6%2C17.433%2C8.035%2C8.035%2C0%2C0%2C0%2C11.718%2C19.811ZM16.511%2C6.916l1.553%2C1.553-8.059%2C8.05L5.376%2C11.89l1.553-1.553%2C3.08%2C3.08Zm.846%2C1.553-.846-.846-6.5%2C6.5-3.08-3.08-.846.846%2C3.922%2C3.922Z%22 transform%3D%22translate(-3.375 -3.375)%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center;width:20px;height:20px;display:inline-block;top:10px;left:10px}.colours .colour.main{box-sizing:border-box;width:40px;height:40px;display:inline-block;padding:0;border:1px solid #C6C6C6}.colours_container{width:320px;height:auto;position:absolute;z-index:1}.colors-paragraph{display:flex;align-items:center}.colors-paragraph .revieworder-color{width:20px;height:20px;border:1px solid #000000;display:inline-flex}.orderInfo li{display:flex}.orderInfo li label{font-family:\"Arial Bold\",sans-serif;width:50%}.orderInfo li .InfoText{display:inline-block;padding-left:10px;width:50%}.productImg{width:71px;height:71px}.productName{line-height:20px}.statusColor{display:inline-block;width:12px;height:12px;border-radius:50%}.attribute{font-size:14px}::ng-deep .flashing-expand{cursor:pointer}::ng-deep .flashing-expand:after{background:url(../../../../assets/images/expand-icon.svg) no-repeat center;z-index:2;width:24px;content:\"\";height:24px;position:absolute;top:0;right:0}::ng-deep .flashing-expand img{max-height:55px;max-width:60px;background:#ffffff}::ng-deep .flashing-expand.flashing-open:after{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%0D  %3Cg id%3D%22Group_14477%22 data-name%3D%22Group 14477%22 transform%3D%22translate(-5533.5 11452.992)%22%3E%0D    %3Cg id%3D%22Group_14476%22 data-name%3D%22Group 14476%22%3E%0D      %3Cg id%3D%22Group_14475%22 data-name%3D%22Group 14475%22 transform%3D%22translate(5164.5 -12321.992)%22%3E%0D        %3Crect id%3D%22Rectangle_1116%22 data-name%3D%22Rectangle 1116%22 width%3D%2224%22 height%3D%2224%22 transform%3D%22translate(369 869)%22 fill%3D%22%23fff%22%2F%3E%0D      %3C%2Fg%3E%0D      %3Cpath id%3D%22Path_11366%22 data-name%3D%22Path 11366%22 d%3D%22M142.587%2C65.954v4.569a1.963%2C1.963%2C0%2C0%2C1-1.839%2C2.068H127.833a1.965%2C1.965%2C0%2C0%2C1-1.839-2.068V58.066A1.963%2C1.963%2C0%2C0%2C1%2C127.833%2C56h4.8a.83.83%2C0%2C1%2C1%2C0%2C1.659h-4.505a.516.516%2C0%2C0%2C0-.472.553V70.378a.521.521%2C0%2C0%2C0%2C.472.553h12.33a.516.516%2C0%2C0%2C0%2C.472-.553V65.954a.83.83%2C0%2C1%2C1%2C1.659%2C0Z%22 transform%3D%22translate(5411.209 -11505.287)%22 fill-rule%3D%22evenodd%22%2F%3E%0D    %3C%2Fg%3E%0D    %3Cpath id%3D%22Path_11367%22 data-name%3D%22Path 11367%22 d%3D%22M26.413%2C4.5H21.5a.607.607%2C0%2C0%2C0-.608.608v.009a.607.607%2C0%2C0%2C0%2C.608.608h3.4l-5.091%2C5.126a.608.608%2C0%2C0%2C0%2C.858.862l5.126-5.1v3.4a.607.607%2C0%2C0%2C0%2C.608.608h.009a.607.607%2C0%2C0%2C0%2C.608-.608V5.108A.607.607%2C0%2C0%2C0%2C26.413%2C4.5Z%22 transform%3D%22translate(5526.775 -11453.789)%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}#imageModal.show{display:flex!important;vertical-align:middle!important;align-items:center!important}#imageModal.show .modal-header{justify-content:right;border:none}#imageModal.show .modal-body{vertical-align:middle;margin:0 1rem;overflow:auto;max-height:80vh}#imageModal.show .modal-body img{max-width:100%;max-height:80vh}.flashing-block{background-color:#e8e8e8}.flashing-block .flash-title{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}.flashing-block .skuId{color:#707070;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.flashing-block .gst-text{display:block;font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif}.flashing-block .total-amount{border-bottom:none!important}@media screen and (max-width: 767px){.cart-grid-tile .grid-tile-top h4{margin-top:10px;margin-left:0}.productImg{width:100%;height:100%}.total-qty span,.total-amount span{font-size:1rem}.total-qty h4,.total-amount h4{font-size:1.25rem!important}}\n"], components: [{ type: i3.NgxMasonryComponent, selector: "[ngx-masonry], ngx-masonry", inputs: ["updateLayout", "ordered", "options"], outputs: ["layoutComplete", "removeComplete", "itemsLoaded"] }, { type: i4.MediaComponent, selector: "cx-media", inputs: ["container", "format", "alt", "role", "loading"], outputs: ["loaded"] }, { type: i5.CustomFlashingImageDetailsComponent, selector: "app-custom-flashing-image-details", inputs: ["cartDetails", "forPdf", "appendixNo"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgxMasonryDirective, selector: "[ngxMasonryItem], ngxMasonryItem", inputs: ["prepend"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i6.AsyncPipe, "number": i6.DecimalPipe, "date": i6.DatePipe, "slice": i6.SlicePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderDetailGridComponent, decorators: [{
             type: Component,
             args: [{