import { Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { environment } from '../../environments/environment';
import * as i0 from "@angular/core";
import * as i1 from "../../services/cart.service";
import * as i2 from "@spartacus/storefront";
import * as i3 from "@angular/common";
export class OrderDetailGridComponent {
    constructor(cartService, cdr) {
        this.cartService = cartService;
        this.cdr = cdr;
        this.showDetails = [];
        this.arrowUpDown = [];
        this.showWaitCursor = new BehaviorSubject(false);
        this.cartDetails = [];
    }
    ngOnInit() {
    }
    ngOnChanges(changes) {
        var _a;
        if (!changes.cartDetails.firstChange) {
            this.cdr.detectChanges();
        }
        this.showWaitCursor.next(true);
        if ((_a = this.cartDetails) === null || _a === void 0 ? void 0 : _a.length) {
            this.showWaitCursor.next(false);
        }
        else {
            this.showWaitCursor.next(false);
            this.noRecord = 'No data';
        }
        for (let i = 0; i < this.cartDetails.length; i++) {
            this.showDetails.push(false);
        }
        this.cartService.expandAll.subscribe((data) => {
            for (let i = 0; i < this.cartDetails.length; i++) {
                this.showDetails[i] = data;
            }
        });
        this.cdr.detectChanges();
    }
    showHide(ind) {
        this.showDetails[ind] = !this.showDetails[ind];
    }
    arrowHideShow(id) {
        this.arrowUpDown[id] = !this.arrowUpDown[id];
    }
    // Get the Image Details based on Products
    getImageDetails(cartDetails, thumbnail = true) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
        let imageUrl = (_a = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.product) === null || _a === void 0 ? void 0 : _a.images;
        if (this.isCardData) {
            imageUrl = (_b = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.product) === null || _b === void 0 ? void 0 : _b.images;
        }
        else {
            imageUrl = (_e = (_d = (_c = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.product) === null || _c === void 0 ? void 0 : _c.images) === null || _d === void 0 ? void 0 : _d.PRIMARY) === null || _e === void 0 ? void 0 : _e.cartIcon;
        }
        let srcUrl;
        if ((cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.attachments) &&
            ((_f = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.attachments) === null || _f === void 0 ? void 0 : _f.length) &&
            ((_g = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.product) === null || _g === void 0 ? void 0 : _g.flashingProduct)) {
            srcUrl =
                thumbnail && ((_h = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.attachments) === null || _h === void 0 ? void 0 : _h.length) > 1
                    ? (_j = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.attachments[1]) === null || _j === void 0 ? void 0 : _j.downloadURL
                    : (_k = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.attachments[0]) === null || _k === void 0 ? void 0 : _k.downloadURL;
            imageUrl = {
                url: (_l = (environment.occBaseUrl.slice(0, environment.occBaseUrl.length - 1) +
                    srcUrl)) === null || _l === void 0 ? void 0 : _l.replace('&attachment=true', ''),
            };
        }
        return imageUrl;
    }
    viewImage(event, cartDetails) {
        var _a;
        event.preventDefault();
        this.imageModalSrc = (_a = this.getImageDetails(cartDetails, false)) === null || _a === void 0 ? void 0 : _a.url;
    }
    getPdfLink(cartDetails) {
        var _a;
        return (_a = this.getImageDetails(cartDetails, false)) === null || _a === void 0 ? void 0 : _a.url;
    }
    hasImage(cartDetails) {
        var _a;
        const mimeType = (_a = cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.attachments[0]) === null || _a === void 0 ? void 0 : _a.mime;
        const mimeArray = ["image/png", "image/jpg", "image/jpeg"];
        return mimeArray.includes(mimeType);
    }
}
OrderDetailGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderDetailGridComponent, deps: [{ token: i1.CartService }, { 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading \" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<div class=\"py-3\">\r\n    <div class=\"row\">\r\n        <ng-container *ngIf=\"cartDetails.length; else nodata\">\r\n            <div class=\"col-lg-3 col-sm-6\" *ngFor=\"let cart of cartDetails;let i = index\">\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                            <span>#{{cart.entryNumber}}</span>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <ng-container *ngIf=\"cartDetails[i]?.product?.flashingProduct;else normalImage\">\r\n                                    <a data-toggle=\"modal\" class=\"flashing-expand\" (click)=\"viewImage($event,cartDetails[i])\"\r\n                                        [attr.data-target]=\"'#imageModal'\" *ngIf=\"hasImage(cartDetails[i]);else hasPdf\">\r\n                                        <cx-media [container]=\"getImageDetails(cartDetails[i])\" format=\"cartIcon\" role=\"presentation\"></cx-media>\r\n                                    </a>\r\n                                    <ng-template #hasPdf>\r\n                                        <a class=\"flashing-expand flashing-open\" [href]=\"getPdfLink(cartDetails[i])\" target=\"_blank\">\r\n                                          <img class=\"pdf-icon\" src=\"../../../../../assets/images/pdf-icon.svg\" alt=\"Click to open PDF\" title=\"Click to open PDF\" />\r\n                                        </a>\r\n                                      </ng-template>\r\n                                </ng-container>\r\n                                <ng-template #normalImage>\r\n                                    <cx-media [container]=\"getImageDetails(cartDetails[i])\" format=\"cartIcon\" role=\"presentation\"></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 *ngFor=\"let attributes of cart?.product?.classifications[0]?.features;last as isLast\">\r\n                                        {{attributes?.featureValues[0]?.value }} <span *ngIf=\"!isLast\"> | </span>\r\n                                    </span>\r\n                                    mm\r\n                                </p>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"cart?.subLineConfigInfos.length>0\">\r\n                                <a href=\"javascript:void(0)\" (click)=\"showHide(i)\" class=\"see-more-link\">\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\">\r\n                                            <tr>\r\n                                                <th>Quantity</th>\r\n                                                <th>Length (LM)</th> \r\n                                                <th *ngIf=\"cart?.subLineConfigInfos[i]?.bundleName\">Bundle</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\">{{subLine?.bundleName}}<br>{{subLine?.reference}}</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\">\r\n                                <ul class=\"col-12 orderInfo\">\r\n                                    <!-- <li>\r\n                                        <label>Delivery #:</label>\r\n                                        <span class=\"InfoText\">-</span>\r\n                                    </li> -->\r\n                                    <li>\r\n                                        <label>Qty Shipped:</label>\r\n                                        <span class=\"InfoText\">-</span>\r\n                                    </li>\r\n                                    <li>\r\n                                        <label>Delivery Date:</label>\r\n                                        <span class=\"InfoText\"> {{orderDate | date:\"dd/MM/yyyy\"}}</span>\r\n                                    </li>\r\n                                    <li>\r\n                                        <label>Status:</label>\r\n                                        <span class=\"InfoText\">\r\n                                            <small class=\"statusColor\"\r\n                                                [ngStyle]=\"{'background-color':\r\n                                                (cart?.status=='CREATED') ? ('#F3A931') :\r\n                                                (cart?.status=='APPROVED') ? ('#f26522') :\r\n                                                (cart?.status=='PROCESSING') ? ('#75578A') :\r\n                                                (cart?.status=='READY') ? ('#496471') :\r\n                                                (cart?.status=='DELIVERING') ? ('#00ACBD') :\r\n                                                (cart?.status=='COMPLETED') ? ('#8DC440') :\r\n                                                (cart?.status=='RETURNED') ? ('#8DC440') :\r\n                                                (cart?.status=='CANCELLED') ? ('#000000') :\r\n                                                ('')}\"\r\n                                                ></small>\r\n                            {{cart?.statusDisplay || '-'}}</span>\r\n                                    </li>\r\n                                </ul>\r\n                            </div>\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 *ngIf=\"cart?.configurationInfos.length\">\r\n                                                <p class=\"colors-paragraph my-2\">\r\n                                                    <span class=\"revieworder-color mr-2\"\r\n                                                    [ngStyle]=\"{ background: cart?.configurationInfos[0]?.configurationValue.split('|') | slice:2}\"></span>\r\n                                                    {{cart?.configurationInfos[0]?.configurationValue.split('|') | slice:1:2}}\r\n                                                </p>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <span>Total Qty: {{cart.quantityDouble}}{{cart?.totalPrice?.unitType}}</span><br>\r\n                                        <span class=\"subPrice\">@ {{cart?.totalPrice?.formattedValue}}/{{cart?.totalPrice?.unitType}}</span>\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>excl GST</span>\r\n                                    </div>\r\n                                    <div class=\"text-left py-3 px-2\">\r\n                                        <span class=\"InfoText\">\r\n                                            <small class=\"statusColor\"\r\n                                                [ngStyle]=\"{'background-color':\r\n                                                (cart?.status=='CREATED') ? ('#F3A931') :\r\n                                                (cart?.status=='APPROVED') ? ('#f26522') :\r\n                                                (cart?.status=='PROCESSING') ? ('#75578A') :\r\n                                                (cart?.status=='READY') ? ('#496471') :\r\n                                                (cart?.status=='DELIVERING') ? ('#00ACBD') :\r\n                                                (cart?.status=='COMPLETED') ? ('#8DC440') :\r\n                                                (cart?.status=='RETURNED') ? ('#8DC440') :\r\n                                                (cart?.status=='CANCELLED') ? ('#000000') :\r\n                                                ('')}\"\r\n                                                ></small>\r\n                            {{cart?.statusDisplay ? cart?.statusDisplay : '-'}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"cartDetails[i]?.product?.flashingProduct && cartDetails[i]?.productConfiguredInfos\">\r\n                            <div class=\"flashing-block \" *ngFor=\"let data of cartDetails[i]?.productConfiguredInfos\">\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\">Grith: +{{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 class=\"col-md-6 col-6 d-flex align-items-center border-right\">\r\n                                    <div class=\"total-qty\">\r\n                                      <div>Total Qty: {{data?.quantityDouble}}{{data?.unitType}}</div>\r\n                                      <span>@{{data?.basePrice?.formattedValue}}/{{data?.unitType}}</span>\r\n                                    </div>\r\n                                  </div>\r\n                                  <div class=\"col-md-6 col-6 d-flex justify-content-end align-items-center text-right\">\r\n                                    <div class=\"total-amount text-right\">\r\n                                      <h4>{{data?.totalPrice?.formattedValue}}</h4>\r\n                                      <span>excl GST</span>\r\n                                    </div>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\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</div>\r\n\r\n<div class=\"modal fade\" id=\"imageModal\" role=\"dialog\" aria-labelledby=\"imageModal\" aria-hidden=\"true\" #imageModal>\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 class=\"icon-close invite-pop-close\" #closeInviteModal data-dismiss=\"modal\" aria-label=\"Close\"></i>\r\n            </div>\r\n            <div class=\"modal-body m-4\">\r\n                <img [src]=\"imageModalSrc\" alt=\"alert\" />\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;z-index:10}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}d .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}d .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}d .helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}d .helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}d .helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}d .helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}d .helpSupport .contact-us-info a{color:#fff;text-decoration:none}d .helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}@media screen and (max-width: 991px){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}cx-storefront header.is-expanded .PreHeader{position:absolute;right:15px;top:15px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;top:25px;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{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}}#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}.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 .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)}.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}.flashing-expand{cursor:pointer}.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}#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{text-align:center;vertical-align:middle;margin:0 auto}.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: i2.MediaComponent, selector: "cx-media", inputs: ["container", "format", "alt", "role", "loading"], outputs: ["loaded"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i3.AsyncPipe, "number": i3.DecimalPipe, "date": i3.DatePipe, "slice": i3.SlicePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderDetailGridComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'app-order-detail-grid',
                    templateUrl: './order-detail-grid.component.html',
                    styleUrls: ['./order-detail-grid.component.scss']
                }]
        }], ctorParameters: function () { return [{ type: i1.CartService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sortByVal: [{
                type: Input
            }], cartDetails: [{
                type: Input
            }], orderDate: [{
                type: Input
            }], isCardData: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 