import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { CommonUtils } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "@spartacus/core";
import * as i2 from "@angular/router";
import * as i3 from "../services/order-history.service";
import * as i4 from "../services/cart.service";
import * as i5 from "../services/my-account.service";
import * as i6 from "../shared/custom-breadcrum/custom-breadcrum.component";
import * as i7 from "./order-detail-list/order-detail-list.component";
import * as i8 from "./order-detail-grid/order-detail-grid.component";
import * as i9 from "./download-popup/download-popup.component";
import * as i10 from "@angular/common";
export class CustomOrderDetailsComponent {
    constructor(cmsService, router, route, orderHistoryService, cartService, cd, documentsData) {
        this.cmsService = cmsService;
        this.router = router;
        this.route = route;
        this.orderHistoryService = orderHistoryService;
        this.cartService = cartService;
        this.cd = cd;
        this.documentsData = documentsData;
        this.isDesktop = true;
        this.isMobile = false;
        this.isTablet = false;
        this.listview = true;
        this.isExpandAll = false;
        this.showOrder = true;
        this.showWaitCursor = new BehaviorSubject(true);
        this.orderStatuses = [];
        this.sortData = 'Item Number';
        this.filterVal = [];
        this.totalRecord = [];
        this.showPopUp = false;
        this.breadcrumbData = [];
        this.orderDetailsPage = true;
        this.sortby = ['Item Number', 'Job Reference', 'Most advanced Status', 'Least advanced Status'];
    }
    ngOnInit() {
        this.orderId = this.route.snapshot.params['orderCode'];
        this.breadcrumbData.push({ url: '/', name: 'Home' }, { url: '/my-account/orders', name: 'My Orders' }, { url: '/', name: this.orderId });
        this.getOrderList();
        this.onPageRefresh();
        this.getOrderStatusData();
        //this.getInvoiceList();
    }
    ngOnChanges(changes) {
        if (!changes.firstChange) {
            this.cd.detectChanges();
        }
    }
    orderPdf() {
        this.showPopUp = true;
    }
    invoicePdf() {
        this.documentsData.setOrderNumber(this.orderDetails.code);
        window.location.href = '/account';
    }
    getOrderList() {
        this.showWaitCursor.next(true);
        this.orderHistoryService.getOrderDetailList(this.orderId).subscribe((data) => {
            this.orderDetails = data;
            this.showWaitCursor.next(true);
            this.orderDetails.entries.forEach((element) => {
                if (element.status == 'CREATED') {
                    element.statusCode = 'CS00';
                }
                else if (element.status == 'APPROVED') {
                    element.statusCode = 'CS10';
                }
                else if (element.status == 'PROCESSING') {
                    element.statusCode = 'CS20';
                }
                else if (element.status == 'READY') {
                    element.statusCode = 'CS30';
                }
                else if (element.status == 'DELIVERING') {
                    element.statusCode = 'CS40';
                }
                else if (element.status == 'COMPLETED') {
                    element.statusCode = 'CS50';
                }
                else if (element.status == 'RETURNED') {
                    element.statusCode = 'CS60';
                }
                else if (element.status == 'CANCELLED') {
                    element.statusCode = 'CS70';
                }
            });
            if (this.orderDetails) {
                this.dataAvailale = 'hasData';
                this.totalRecord = this.orderDetails.entries;
            }
            else {
                this.dataAvailale = 'noData';
            }
            this.showWaitCursor.next(false);
        });
    }
    sortBy(val) {
        this.sortData = val.target.value;
        let sortVal = this.orderDetails.entries;
        if (this.sortData == 'Item Number') {
            sortVal.sort((a, b) => a.entryNumber - b.entryNumber);
        }
        else if (this.sortData == 'Job Reference') {
            sortVal.sort((a, b) => (a.jobReference.localeCompare(b.jobReference)));
        }
        else if (this.sortData == 'Most advanced Status') {
            sortVal.sort((a, b) => (a.statusCode.localeCompare(b.statusCode)));
        }
        else if (this.sortData == 'Least advanced Status') {
            sortVal.sort((a, b) => (b.statusCode.localeCompare(a.statusCode)));
        }
    }
    checkOrderStatus(event) {
        let val = event.target.value;
        let orderDetail = this.orderDetails.entries;
        this.showWaitCursor.next(true);
        if (event.currentTarget.checked) {
            this.filterVal.push(val);
            this.orderDetails.entries = orderDetail.filter((el) => {
                return this.filterVal.find((element) => {
                    return element === el.statusDisplay;
                });
            });
            this.showWaitCursor.next(false);
        }
        else {
            let index = this.filterVal.indexOf(val);
            this.filterVal.splice(index, 1);
            this.orderDetails.entries = orderDetail.filter((el) => {
                return this.filterVal.find((element) => {
                    return element === el.statusDisplay;
                });
            });
            if (this.filterVal.length == 0) {
                this.orderDetails.entries = this.totalRecord;
            }
        }
        this.showWaitCursor.next(false);
        this.cd.detectChanges();
    }
    gridView() {
        this.listview = false;
    }
    listView() {
        this.listview = true;
    }
    expandAll() {
        this.isExpandAll = true;
        this.cartService.expandAll.next(true);
    }
    contractAll() {
        this.isExpandAll = false;
        this.cartService.expandAll.next(false);
    }
    getOrderStatusData() {
        this.showWaitCursor.next(true);
        this.orderHistoryService.getOrderHistorySearchStatuses().subscribe((data) => {
            if (data) {
                this.orderStatuses = data.statuses;
            }
            this.showWaitCursor.next(false);
        });
    }
    onBackbuttonClick() {
        this.router.navigate(['/my-account/orders']);
    }
    onResize(event) {
        event.target.innerWidth;
        if (event.target.innerWidth < 992) {
            this.isMobile = true;
            this.isDesktop = false;
        }
        else {
            this.isDesktop = true;
        }
    }
    onPageRefresh() {
        this.isMobile = CommonUtils.isMobile();
        this.isTablet = CommonUtils.isTablet();
        this.isDesktop = CommonUtils.isDesktop();
    }
}
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.CartService }, { token: i0.ChangeDetectorRef }, { token: i5.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\">\r\n            <h1 class=\"pageTitle\">My Order: {{orderDetails?.code}}</h1>\r\n            <p class=\"pageTltsubHd mt-4 mb-3\">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                        <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 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?.uid}}</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}} 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\">\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\">\r\n            <p class=\"mb-0 total-text\">Total</p>\r\n            <p class=\"total-value mb-0\">{{orderDetails?.totalPrice?.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>\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}::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 .sortBy{height:40px;border:1px solid #E0E0E0;padding:0 12px;cursor:pointer;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}::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}}\n"], components: [{ type: i6.CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { type: i7.OrderDetailListComponent, selector: "app-order-detail-list", inputs: ["cartDetails", "sortByVal", "orderDate", "isCardData"] }, { type: i8.OrderDetailGridComponent, selector: "app-order-detail-grid", inputs: ["sortByVal", "cartDetails", "orderDate", "isCardData"] }, { type: i9.DownloadPopupComponent, selector: "app-download-popup", inputs: ["orderDetails"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i10.AsyncPipe, "date": i10.DatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomOrderDetailsComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'app-custom-order-details',
                    templateUrl: './custom-order-details.component.html',
                    styleUrls: ['./custom-order-details.component.scss']
                }]
        }], ctorParameters: function () { return [{ type: i1.CmsService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3.OrderHistoryService }, { type: i4.CartService }, { type: i0.ChangeDetectorRef }, { type: i5.MyAccountService }]; } });
//# sourceMappingURL=data:application/json;base64, 