import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as moment from 'moment';
import { CommonUtils } from '../../utils';
import * as i0 from "@angular/core";
import * as i1 from "../../services/my-account.service";
import * as i2 from "@spartacus/core";
import * as i3 from "@angular/common/http";
import * as i4 from "../../shared/date-range-picker/date-range-picker.component";
import * as i5 from "@angular/common";
import * as i6 from "ngx-infinite-scroll";
import * as i7 from "@angular/forms";
const FileSaver = require('file-saver');
export class InvoiceCreditComponent {
    constructor(myAccountService, cmsService, cd, http) {
        this.myAccountService = myAccountService;
        this.cmsService = cmsService;
        this.cd = cd;
        this.http = http;
        this.listview = true;
        this.isDesktop = true;
        this.isMobile = false;
        this.isTablet = false;
        this.showWaitCursor = new BehaviorSubject(false);
        this.loaderImage = new BehaviorSubject(false);
        this.currentPage = 0;
        this.invoiceCreditList = [];
        this.statusLists = [];
        this.searchText = '';
        this.isClearAll = false;
        this.noSearchResults = false;
        this.sortByValue = 'byDocumentAsc';
        this.selectedOrderType = 'documentNumber';
        this.selectedStatuses = [];
        this.invoiceStates = [];
        this.invoiceTypes = [];
        this.billingStatuses = [];
        this.isInputValue = false;
        this.selectedDateKey = 'dateRange';
        this.isSearchBtnClicked = false;
    }
    ngOnInit() {
        this.cmsService.getComponentData('EmptySearchInvoicesListComponent').subscribe((data) => {
            if (data) {
                this.noInvoiceCrditData = data.content;
            }
        });
        const orderNumber = this.myAccountService.getOrderNumber();
        if (orderNumber != null) {
            this.searchText = orderNumber;
            this.selectedOrderType = 'orderNumber';
        }
        this.getLastMonthDateRange();
        this.getSearchDropdownData();
        this.getInvoiceCreditData();
        // this.getSearchResults();
        this.onPageRefresh();
    }
    getInvoiceCreditData() {
        this.showWaitCursor.next(true);
        const reqObj = {
            searchParams: this.selectedStatuses,
        };
        this.myAccountService
            .getInvoicesCreditList(reqObj, this.currentPage)
            .subscribe((data) => {
            var _a, _b;
            if (this.isClearAll == true) {
                this.invoiceCreditList = [];
                this.isClearAll = false;
            }
            let date = new Date();
            date.getFullYear();
            date.getMonth();
            date.getDay();
            this.invoiceCreditList = [];
            this.invoiceCreditList = this.invoiceCreditList.concat(data.documents);
            this.statusLists = (_a = data === null || data === void 0 ? void 0 : data.documents) === null || _a === void 0 ? void 0 : _a.status;
            this.invoiceSortLists = data === null || data === void 0 ? void 0 : data.sorts;
            this.totalResults = (_b = data === null || data === void 0 ? void 0 : data.pagination) === null || _b === void 0 ? void 0 : _b.totalResults;
            this.getStatus();
            this.invoiceSortLists.forEach((element) => {
                if (element.code == 'byDocumentDesc') {
                    element.value = 'Newest Invoice';
                }
                if (element.code == 'byDocumentAsc') {
                    element.value = 'Oldest Invoice';
                }
                if (element.code == 'byPODesc') {
                    element.value = 'Highest PO Number';
                }
                if (element.code == 'byPOAsc') {
                    element.value = 'Lowest PO Number';
                }
                if (element.code == 'byOrderCodeDesc') {
                    element.value = 'Highest Order Number';
                }
                if (element.code == 'byOrderCodeAsc') {
                    element.value = 'Lowest Order Number';
                }
                this.loaderImage.next(false);
                this.cd.markForCheck();
            });
            this.cd.markForCheck();
            this.showWaitCursor.next(false);
        }, (error) => {
            this.invoiceCreditList = [];
            this.showWaitCursor.next(false);
        });
    }
    getStatus() {
        this.invoiceCreditList.forEach((element) => {
            if (element.status == 'open') {
                element.className = 'status-open';
            }
            else if (element.status == 'closed') {
                element.className = 'status-paid';
            }
            else if (element.status == 'paid') {
                element.className = 'status-paid';
            }
            else if (element.status == 'overdue') {
                element.className = 'status-overdue';
            }
            else if (element.status == 'outstanding') {
                element.className = 'status-open';
            }
            else if (element.status == 'refund') {
                element.className = 'status-paid';
            }
            this.loaderImage.next(false);
            this.cd.markForCheck();
        });
    }
    getLastMonthDateRange() {
        this.selectedDateRange = [moment().subtract(29, 'days'), moment()];
        const dateValue = this.selectedDateRange[0]._d.getDate() +
            '/' +
            (this.selectedDateRange[0]._d.getMonth() + 1) +
            '/' +
            this.selectedDateRange[0]._d.getFullYear() +
            ',' +
            this.selectedDateRange[1]._d.getDate() +
            '/' +
            (this.selectedDateRange[1]._d.getMonth() + 1) +
            '/' +
            this.selectedDateRange[1]._d.getFullYear();
        let obj = {
            key: this.selectedDateKey,
            value: dateValue,
        };
        this.selectedStatuses.push(obj);
    }
    getSelectedDate(event) {
        event.name = event.value;
        event.key = 'dateRange';
        this.selectedDateRange = event;
        const ind = this.selectedStatuses.findIndex((element) => element.key == 'dateRange');
        if (ind > -1)
            this.selectedStatuses.splice(ind, 1);
        this.selectedStatuses.push(event);
        this.invoiceCreditList = [];
        this.getInvoiceCreditData();
    }
    getSearchDropdownData() {
        this.showWaitCursor.next(true);
        this.myAccountService.getInvoiceCreditStatuses().subscribe((data) => {
            if (data) {
                this.invoiceStates = data.states;
                this.invoiceTypes = data.types;
                this.billingStatuses = data.statuses;
                this.cd.markForCheck();
            }
            this.showWaitCursor.next(false);
        });
    }
    clearAll() {
        this.searchText = '';
        this.selectedOrderType = 'documentNumber';
        this.selectedStatuses = [];
        this.noSearchResults = false;
        this.isClearAll = true;
        this.isInputValue = false;
        this.isSearchBtnClicked = false;
        this.getLastMonthDateRange();
        this.getInvoiceCreditData();
    }
    getCheckedInvoiceStatuses(data) {
        const ind = this.selectedStatuses.findIndex((element) => element.value == data.value);
        return ind > -1 ? true : false;
        this.invoiceCreditList = [];
        this.getSearchResults();
    }
    checkInvoiceStatus(event, data, mobileData) {
        this.currentPage = 0;
        if (event.currentTarget.checked) {
            this.selectedStatuses.push(data);
            this.invoiceCreditList = [];
            if (!mobileData) {
                this.getSearchResults();
            }
            this.cd.markForCheck();
        }
        else {
            const ind = this.selectedStatuses.findIndex((element) => element.value == data.value);
            this.selectedStatuses.splice(ind, 1);
            this.invoiceCreditList = [];
            if (!mobileData) {
                this.getSearchResults();
            }
            this.cd.markForCheck();
        }
    }
    removeChips(data) {
        const ind = this.selectedStatuses.findIndex((element) => element.value == data.value);
        this.selectedStatuses.splice(ind, 1);
        this.invoiceCreditList = [];
        this.getInvoiceCreditData();
    }
    onChange(e) {
        this.selectedOrderType = e.target.value;
    }
    getSearchResults() {
        this.isSearchBtnClicked = true;
        this.selectedFilters = JSON.parse(JSON.stringify(this.selectedStatuses));
        const obj = {
            key: this.selectedOrderType,
            value: this.searchText,
        };
        if (this.searchText != '') {
            this.selectedStatuses = [];
            this.selectedFilters = [];
            this.selectedFilters.push(obj);
        }
        const reqObj = {
            searchParams: this.selectedFilters,
        };
        this.showWaitCursor.next(true);
        this.myAccountService.getInvoiceCreditSearchResults(reqObj, this.currentPage).subscribe((res) => {
            var _a, _b;
            if (res && ((_a = res === null || res === void 0 ? void 0 : res.documents) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                if (this.currentPage > 0) {
                    this.invoiceCreditList = this.invoiceCreditList.concat(res === null || res === void 0 ? void 0 : res.documents);
                }
                else {
                    this.invoiceCreditList = res === null || res === void 0 ? void 0 : res.documents;
                }
                this.totalResults = (_b = res === null || res === void 0 ? void 0 : res.pagination) === null || _b === void 0 ? void 0 : _b.totalResults;
                this.noSearchResults = false;
                this.getStatus();
                this.cd.markForCheck();
            }
            else {
                this.invoiceCreditList = [];
                this.noSearchResults = true;
            }
            this.showWaitCursor.next(false);
        }, (error) => {
            this.invoiceCreditList = [];
            this.showWaitCursor.next(false);
        });
    }
    onSearchChange(e) {
        if (e.target.value == '' || e.target.value.indexOf(' ') >= 0) {
            this.isInputValue = false;
        }
        else {
            this.isInputValue = true;
        }
    }
    onSubmit() {
        this.getSearchResults();
    }
    sortBy(e) {
        this.showWaitCursor.next(true);
        this.sortByValue = e.target.value;
        const reqObj = {
            searchParams: this.selectedFilters,
        };
        this.myAccountService.sortInvoiceCredit(this.sortByValue, reqObj).subscribe((res) => {
            this.invoiceCreditList = res === null || res === void 0 ? void 0 : res.documents;
            this.getStatus();
            this.cd.markForCheck();
            this.showWaitCursor.next(false);
        }, (error) => {
            this.showWaitCursor.next(false);
        });
    }
    toggleGridOrListView(event) {
        event.preventDefault();
        this.listview = !this.listview;
    }
    // Future requirement
    // downloadPdf(pdfUrl: any, pdfName: string) {
    //   FileSaver.saveAs(pdfUrl, pdfName);
    // }
    loadMoreRecord() {
        this.loaderImage.next(true);
        this.currentPage += 1;
        if (this.isSearchBtnClicked) {
            this.getSearchResults();
        }
        else {
            this.getInvoiceCreditData();
        }
    }
    onScroll() {
        if (!this.noSearchResults &&
            this.totalResults > this.invoiceCreditList.length) {
            this.loadMoreRecord();
        }
    }
    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();
    }
    ngOnDestroy() {
        this.myAccountService.setOrderNumber('');
    }
}
InvoiceCreditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InvoiceCreditComponent, deps: [{ token: i1.MyAccountService }, { token: i2.CmsService }, { token: i0.ChangeDetectorRef }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
InvoiceCreditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: InvoiceCreditComponent, selector: "app-invoice-credit", ngImport: i0, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async \">Loading&#8230;</div>\r\n<div class=\"container px-0\" infiniteScroll [infiniteScrollDistance]=\"0\" [infiniteScrollThrottle]=\"1000\" (scrolled)=\"onScroll()\" (window:resize)=\"onResize($event)\">\r\n    <div class=\"invoice-credit-content\">\r\n        <span *ngIf=\"isDesktop\" class=\"d-flex justify-content-end\">\r\n                <a href=\"javascript:void(0)\" (click)=\"clearAll()\"><u>Clear all</u></a>\r\n            </span>\r\n        <div class=\"invoice-search-block\">\r\n            <div class=\"input-group\">\r\n                <div class=\"input-group-prepend\">\r\n                    <select name=\"\" id=\"\" (change)=\"onChange($event)\">\r\n                            <option value=\"documentNumber\" [selected]=\"selectedOrderType == 'documentNumber'\">Invoice #</option>\r\n                            <option value=\"poNumber\" [selected]=\"selectedOrderType == 'poNumber'\">PO #</option>\r\n                            <option value=\"orderNumber\" [selected]=\"selectedOrderType == 'orderNumber'\">Order #</option>\r\n                        </select>\r\n                </div>\r\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"searchText\" (input)=\"onSearchChange($event)\" aria-label=\"Text input with dropdown button\">\r\n                <div class=\"input-group-append\">\r\n                    <button type=\"button\" class=\"btn search-btn\" (click)=\"getSearchResults()\" [disabled]=\"!isInputValue\">\r\n                            <img src=\"../../../assets/images/icon-ionic-ios-search.svg\" alt=\"\">\r\n                        </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"filter-block\">\r\n            <div class=\"custom-date-input\">\r\n                <app-date-range-picker (selectedDate)=\"getSelectedDate($event)\" [(ngModel)]=\"selectedDateRange\"></app-date-range-picker>\r\n                <!-- <img src=\"../../../../assets/images/ic_calender.svg\" alt=\"calender\" class=\"date-icon\"> -->\r\n            </div>\r\n            <ng-container *ngIf=\"isDesktop; else filterMobile\">\r\n                <div class=\"btn-group\">\r\n                    <button class=\"btn custom-dropdown-btn position-relative\" type=\"button\" id=\"orderState\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                            Invoice State\r\n                            <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                        </button>\r\n                    <div class=\"dropdown-menu\" aria-labelledby=\"orderState\">\r\n                        <label class=\"dropdownItem\" *ngFor=\"let data of invoiceStates\">\r\n                                <input type=\"checkbox\"\r\n                                    name=\"dropdown-group\" class=\"rounded-0\" id=\"orderStateLabel\"\r\n                                    [checked]=\"getCheckedInvoiceStatuses(data)\"\r\n                                    [value]=\"data.value\" (change)=\"checkInvoiceStatus($event,{ key: 'state' , value: data.key })\" />\r\n                                {{data.value}}\r\n                            </label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                    <button class=\"btn custom-dropdown-btn position-relative\" type=\"button\" id=\"deliveryType\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                            Invoice Type\r\n                            <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                        </button>\r\n                    <div class=\"dropdown-menu\" aria-labelledby=\"deliveryType\">\r\n                        <label class=\"dropdownItem\" *ngFor=\"let data of invoiceTypes\">\r\n                                <input type=\"checkbox\"\r\n                                    name=\"dropdown-group\" class=\"rounded-0\" id=\"deliveryTypeLabel\"\r\n                                    [checked]=\"getCheckedInvoiceStatuses(data)\"\r\n                                    [value]=\"data.value\" (change)=\"checkInvoiceStatus($event,{ key: 'documentType' , value: data.key })\" />\r\n                                {{data.value}}\r\n                            </label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                    <button class=\"btn custom-dropdown-btn position-relative\" type=\"button\" id=\"orderStatus\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                            Billing Status\r\n                            <i class=\"fas fa-chevron-down custom-arrow-down\"></i>\r\n                        </button>\r\n                    <div class=\"dropdown-menu\" aria-labelledby=\"orderStatus\">\r\n                        <label class=\"dropdownItem\" *ngFor=\"let data of billingStatuses\">\r\n                                <input type=\"checkbox\"\r\n                                    name=\"dropdown-group\" class=\"rounded-0\" id=\"orderStatusLabel\"\r\n                                    [checked]=\"getCheckedInvoiceStatuses(data)\"\r\n                                    [value]=\"data.value\" (change)=\"checkInvoiceStatus($event,{ key: 'statuses' , value: data.key })\"/>\r\n                                {{data.value}}\r\n                            </label>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"chips-block\" *ngIf=\"selectedStatuses.length > 0\">\r\n                <ng-container *ngIf=\"selectedStatuses && selectedStatuses.length>0\">\r\n                    <div class=\"chips\" *ngFor=\"let data of selectedStatuses\">\r\n                        <p class=\"chip-title\"> {{data.key == 'state' ? 'Invoice State' : data.key == 'documentType' ? 'Invoice Type' : data.key == 'statuses' ? 'Billing Status' : 'Date Range'}} :</p>\r\n                        <span class=\"chip-content ml-1\">{{data.value}}</span>\r\n                        <i class=\"fas fa-times-circle ml-3 close-icon\" (click)=\"removeChips(data)\"></i>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <ng-template #filterMobile>\r\n                <button type=\"button\" class=\"btn dimond-secondary-btn filter-btn\" data-toggle=\"modal\" data-target=\"#filterModal\">More Filters</button>\r\n            </ng-template>\r\n        </div>\r\n        <hr>\r\n        <!-- Filter Modal-->\r\n        <div class=\"modal fade\" id=\"filterModal\" role=\"dialog\" aria-labelledby=\"inviteMemberLabel\" aria-hidden=\"true\">\r\n            <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n                <div class=\"modal-content\">\r\n                    <div class=\"modal-header\">\r\n                        <h5 class=\"modal-title\"></h5>\r\n                        <i class=\"icon-close filter-popup-close\" (click)=\"clearAll()\" data-dismiss=\"modal\" aria-label=\"Close\"></i>\r\n                    </div>\r\n                    <div class=\"modal-body\">\r\n                        <div class=\" d-flex justify-content-between main-view\">\r\n                            <div class=\"filter-head\">\r\n                                <h3>Filters</h3>\r\n                            </div>\r\n                            <a href=\"javascript:void(0)\" (click)=\"clearAll()\" class=\"clearAll\"> <u>Clear all</u></a>\r\n                        </div>\r\n                        <div id=\"main\">\r\n                            <div class=\"accordion\" id=\"faq\">\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-header\" id=\"faqhead1\">\r\n                                        <a href=\"#\" class=\"btn btn-header-link\" data-toggle=\"collapse\" data-target=\"#faq1\" aria-expanded=\"true\" aria-controls=\"faq1\">Invoice State</a>\r\n                                    </div>\r\n\r\n                                    <div id=\"faq1\" class=\"collapse show\" aria-labelledby=\"faqhead1\" data-parent=\"#faq\">\r\n                                        <div class=\"card-body\">\r\n                                            <label class=\"dropdownItem\" *ngFor=\"let data of invoiceStates\">\r\n                                                    <input type=\"checkbox\" name=\"dropdown-group\" class=\"rounded-0\" id=\"orderStateLabel\"\r\n                                                        [checked]=\"getCheckedInvoiceStatuses(data)\" [value]=\"data.value\"\r\n                                                        (change)=\"checkInvoiceStatus($event,{ key: 'state' , value: data.key },'mobile')\" />\r\n                                                    {{data.value}}\r\n                                                </label>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-header\" id=\"faqhead2\">\r\n                                        <a href=\"#\" class=\"btn btn-header-link collapsed\" data-toggle=\"collapse\" data-target=\"#faq2\" aria-expanded=\"true\" aria-controls=\"faq2\">Invoice Type</a>\r\n                                    </div>\r\n\r\n                                    <div id=\"faq2\" class=\"collapse\" aria-labelledby=\"faqhead2\" data-parent=\"#faq\">\r\n                                        <div class=\"card-body\">\r\n                                            <label class=\"dropdownItem\" *ngFor=\"let data of invoiceTypes\">\r\n                                                    <input type=\"checkbox\" name=\"dropdown-group\" class=\"rounded-0\" id=\"deliveryTypeLabel\"\r\n                                                        [checked]=\"getCheckedInvoiceStatuses(data)\" [value]=\"data.value\"\r\n                                                        (change)=\"checkInvoiceStatus($event,{ key: 'documentType' , value: data.key },'mobile')\" />\r\n                                                    {{data.value}}\r\n                                                </label>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-header\" id=\"faqhead3\">\r\n                                        <a href=\"#\" class=\"btn btn-header-link collapsed\" data-toggle=\"collapse\" data-target=\"#faq3\" aria-expanded=\"true\" aria-controls=\"faq3\">Billing Status</a>\r\n                                    </div>\r\n\r\n                                    <div id=\"faq3\" class=\"collapse\" aria-labelledby=\"faqhead3\" data-parent=\"#faq\">\r\n                                        <div class=\"card-body\">\r\n                                            <label class=\"dropdownItem\" *ngFor=\"let data of billingStatuses\">\r\n                                                    <input type=\"checkbox\" name=\"dropdown-group\" class=\"rounded-0\" id=\"orderStatusLabel\"\r\n                                                        [checked]=\"getCheckedInvoiceStatuses(data)\" [value]=\"data.value\"\r\n                                                        (change)=\"checkInvoiceStatus($event,{ key: 'statuses' , value: data.key },'mobile')\" />\r\n                                                    {{data.value}}\r\n                                                </label>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-lg-flex d-sm-block justify-content-end d-block fixed-bottom\">\r\n                                <button type=\"button\" data-dismiss=\"modal\" (click)=\"clearAll()\" class=\"btn mobile-cancel-btn dimond-secondary-btn mr-lg-5\">Cancel</button>\r\n                                <button type=\"submit\" data-dismiss=\"modal\" class=\"btn mobile-save-btn dimond-primary-btn float-right\" (click)=\"onSubmit()\">Apply</button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <!-- NO SEARCH RESULTS -->\r\n        <ng-container *ngIf=\"invoiceCreditList?.length == 0\">\r\n            <div class=\"row empty-accountPage-container text-center\">\r\n                <div class=\"col-sm-12 col-md-12 col-12\">\r\n                    <div class=\"text-center\" [innerHTML]=\"noInvoiceCrditData\"></div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container>\r\n            <div class=\"invoice-credit-table\" *ngIf=\"invoiceCreditList?.length > 0\">\r\n                <span class=\"total-order\">{{totalResults}} Invoices and Credit Notes found</span>\r\n                <div class=\"d-flex justify-content-between py-3\">\r\n                    <div>\r\n                        <div class=\"btn-group\">\r\n                            <select name=\"\" id=\"\" class=\"mr-3\" (change)=\"sortBy($event)\">\r\n                                    <option value=\"{{option.code}}\" *ngFor=\"let option of invoiceSortLists\">{{option.value}}</option>\r\n                                </select>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <div class=\"main-view\" *ngIf=\"isDesktop\">\r\n                            <button [ngClass]=\"{'active': listview === false}\" class=\"btn btn-sm\" (click)=\"toggleGridOrListView($event)\">\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\r\n                                </button>\r\n                            <button [ngClass]=\"{'active': listview === true}\" class=\"btn btn-sm active\" (click)=\"toggleGridOrListView($event)\">\r\n                                    <img *ngIf=\"listview === true\" class=\"list-img\" src=\"../../../assets/images/List-light.svg\" alt=\"listview\">\r\n                                    <img *ngIf=\"listview === false\" class=\"list-img\" src=\"../../../assets/images/List-dark.svg\" alt=\"listview\">\r\n                                    List\r\n                                </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- INVOICE CREDIT LIST -->\r\n            <div class=\"list-view table-responsive\" *ngIf=\"listview && isDesktop && invoiceCreditList?.length > 0\">\r\n                <table class=\"table account-list-table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th scope=\"col\">Date</th>\r\n                            <th scope=\"col\">Type</th>\r\n                            <th scope=\"col\">Invoice #</th>\r\n                            <th scope=\"col\">Order #</th>\r\n                            <th scope=\"col\">PO #</th>\r\n                            <th scope=\"col\">Status</th>\r\n                            <th scope=\"col\">Total <span class=\"gst-text\">excl GST</span></th>\r\n                            <th scope=\"col\">Outstanding <span class=\"gst-text\">excl GST</span></th>\r\n                            <th scope=\"col\">Download</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let data of invoiceCreditList\">\r\n                            <td>{{data.date | date: 'dd/MM/yyyy'}}</td>\r\n                            <td>{{data.documentType.name}}</td>\r\n                            <td>{{data.documentNumber}}</td>\r\n                            <td>{{data.orderNumber}}</td>\r\n                            <td>{{data.poNumber}}</td>\r\n                            <td class=\"status-message {{data.className}}\">{{data.status}}</td>\r\n                            <td [ngClass]=\"{'negative-price':data.amount < 0}\">{{data.formattedAmount}}</td>\r\n                            <td [ngClass]=\"{'negative-price':data.openAmount < 0}\">{{data.formattedOpenAmount}}</td>\r\n                            <td>\r\n                                <!-- <a href=\"javascript:void(0)\" (click)=\"downloadPdf(data?.attachments[0]?.downloadURL, data?.attachments[0]?.realFileName)\">\r\n                                        <img src=\"../../../../assets/images/download-icon.svg\" alt=\"download\" class=\"mr-2\">PDF</a> -->\r\n                                <a *ngIf=\"data.attachments\" target=\"_blank\" href=\"{{data?.attachments[0]?.downloadURL }}\"><img src=\"../../../../assets/images/download-icon.svg\" alt=\"download\" class=\"mr-2\">PDF</a>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n\r\n            <!-- INVOICE CREDIT GRID -->\r\n            <div class=\"row grid-view\" *ngIf=\"(!listview || !isDesktop) && invoiceCreditList?.length > 0\">\r\n                <div class=\"col-lg-3 col-md-6 col-sm-12 col-12\" *ngFor=\"let data of invoiceCreditList\">\r\n                    <div class=\"grid-tile\">\r\n                        <div class=\"grid-top\">\r\n                            <table>\r\n                                <tr>\r\n                                    <th>Invoice #:</th>\r\n                                    <td>{{data.documentNumber}}</td>\r\n                                </tr>\r\n                                <tr>\r\n                                    <th>Type:</th>\r\n                                    <td>{{data.documentType.name}}</td>\r\n                                </tr>\r\n                            </table>\r\n                        </div>\r\n                        <div class=\"grid-middle\">\r\n                            <table>\r\n                                <tr>\r\n                                    <th>Date:</th>\r\n                                    <td>{{data.date | date: 'dd/MM/yyyy'}}</td>\r\n                                </tr>\r\n                                <tr>\r\n                                    <th>Order #:</th>\r\n                                    <td>{{data.orderNumber}}</td>\r\n                                </tr>\r\n                                <tr>\r\n                                    <th>PO #:</th>\r\n                                    <td>{{data.poNumber}}</td>\r\n                                </tr>\r\n                                <tr>\r\n                                    <th>Total:</th>\r\n                                    <td [ngClass]=\"{'negative-price':data.amount < 0}\">{{data.formattedAmount}}<span class=\"gst-text\">excl GST</span></td>\r\n                                </tr>\r\n                                <tr>\r\n                                    <th>Outstanding:</th>\r\n                                    <td [ngClass]=\"{'negative-price':data.openAmount < 0}\">{{data.formattedOpenAmount}}<span class=\"gst-text\">excl GST</span></td>\r\n                                </tr>\r\n                                <tr>\r\n                                    <th>Status:</th>\r\n                                    <td class=\"status-message {{data.className}} status-icon\">{{data.status}}</td>\r\n                                </tr>\r\n                                <tr>\r\n                                    <th>Download:</th>\r\n                                    <td>\r\n                                        <!-- Future requirement-->\r\n                                        <!-- <a href=\"javascript:void(0)\" (click)=\"downloadPdf(data?.attachments[0]?.downloadURL, data?.attachments[0]?.realFileName)\">\r\n                                                <img src=\"../../../../assets/images/download-icon.svg\" alt=\"download\" class=\"mr-2\">PDF</a> -->\r\n                                        <a *ngIf=\"data.attachments\" target=\"_blank\" href=\"{{data?.attachments[0]?.downloadURL }}\"><img src=\"../../../../assets/images/download-icon.svg\" alt=\"download\" class=\"mr-2\">PDF</a>\r\n                                    </td>\r\n                                </tr>\r\n                            </table>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\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;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 .invoice-credit-content{margin-top:30px}::ng-deep cx-page-layout.AccountPageTemplate .invoice-search-block{background-color:#fff;border:1px solid #E0E0E0;padding:35px 30px}::ng-deep cx-page-layout.AccountPageTemplate .invoice-search-block .drop-down-btn{background-color:#f6f6f6;border:1px solid #E0E0E0;border-radius:0;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .invoice-search-block .search-btn{background-color:#000;color:#fff;border-radius:0}::ng-deep cx-page-layout.AccountPageTemplate .invoice-search-block .input-group-prepend select{border:1px solid #E0E0E0;border-right:10px solid #F6F6F6;background-color:#f6f6f6;cursor:pointer;padding:0 10px;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .filter-block{padding:20px 30px;border:1px solid #E0E0E0;margin-bottom:2.375rem;position:relative}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .custom-date-input{display:inline-block}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .custom-date-input mat-radio-group{display:none}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .custom-date-input .mat-radio-inner-circle{background-color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .custom-date-input .mat-radio-outer-circle{border-color:#b61828}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .custom-date-input .ngx-daterangepicker-action{height:40px;border:1px solid #E0E0E0;vertical-align:middle;padding:12px;color:#161616;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .custom-date-input .ngx-daterangepicker-action::placeholder{color:#1d1d1b}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .custom-date-input .date-icon{position:absolute;left:180px;top:43px;height:auto;border:none;cursor:pointer}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .btn-group .dropdown-menu{margin-top:0!important;width:calc(100% - 30px)}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .btn-group .custom-dropdown-btn{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;height:40px;width:240px}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .btn-group .custom-dropdown-btn .custom-arrow-down{float:right}::ng-deep cx-page-layout.AccountPageTemplate .chips-block{margin-top:40px}::ng-deep cx-page-layout.AccountPageTemplate .chips-block .chips{background-color:#e8e8e8;display:inline-block;margin-bottom:10px;padding:8px 12px;border-radius:20px;margin-right:24px;font-size:var(--fontsize14)}::ng-deep cx-page-layout.AccountPageTemplate .chips-block .chips .chip-title{display:inline;font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .chips-block .chips .chip-content{font-family:\"Arial Regular\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .chips-block .chips .close-icon{cursor:pointer}::ng-deep cx-page-layout.AccountPageTemplate .dropdownItem{padding:10px 0 10px 50px;margin-bottom:0}::ng-deep cx-page-layout.AccountPageTemplate .dropdownItem input[type=checkbox]{margin-top:.1rem}::ng-deep cx-page-layout.AccountPageTemplate .invoice-credit-table{margin-top:1.25rem}::ng-deep cx-page-layout.AccountPageTemplate .invoice-credit-table select{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 .invoice-credit-table .dropdown-menu{margin-top:0!important;width:calc(100% - 30px)}::ng-deep cx-page-layout.AccountPageTemplate .invoice-credit-table .total-order{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .invoice-credit-table .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 .invoice-credit-table .history-table-dropdown .custom-arrow-down{float:right}::ng-deep cx-page-layout.AccountPageTemplate .status-message{text-transform:capitalize}::ng-deep cx-page-layout.AccountPageTemplate .status-default,::ng-deep cx-page-layout.AccountPageTemplate .status-deactive:before,::ng-deep cx-page-layout.AccountPageTemplate .status-open:before,::ng-deep cx-page-layout.AccountPageTemplate .status-paid:before,::ng-deep cx-page-layout.AccountPageTemplate .status-overdue:before{content:\"\";width:8px;height:8px;border-radius:50%;position:absolute;left:0px;top:50%;transform:translate(-50%,-50%)}::ng-deep cx-page-layout.AccountPageTemplate .status-overdue:before{background-color:#d0021b}::ng-deep cx-page-layout.AccountPageTemplate .status-paid:before{background-color:#2aa900}::ng-deep cx-page-layout.AccountPageTemplate .status-open:before{background-color:#ff7d00}::ng-deep cx-page-layout.AccountPageTemplate .status-deactive{color:#8d8d8d}::ng-deep cx-page-layout.AccountPageTemplate .status-deactive:before{background-color:#8d8d8d}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile{border:1px solid #E0E0E0;margin-bottom:30px}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile .grid-top{padding:15px}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile .grid-middle{background-color:#fff;padding:15px;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile .grid-middle .status-icon{position:relative;padding-left:10px}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile table{width:100%}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile table tr{vertical-align:baseline;line-height:2rem}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile table tr th{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif;width:50%}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile table tr td{font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile table a{color:#b61828;text-decoration:underline}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile table .price-bold{font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile table .gst-text{font-size:var(--fontsize14);font-family:\"Arial Regular\",sans-serif;display:block;line-height:10px}::ng-deep cx-page-layout.AccountPageTemplate .noResults{margin:5rem auto}::ng-deep cx-page-layout.AccountPageTemplate .noResults h3{margin-top:1.5rem;font-size:var(--fontsize28);font-family:\"Arial Regular\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table thead{background-color:#646363;height:60px}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table thead th{border-bottom:none;vertical-align:middle;text-align:left;color:#fff;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table tbody tr{background-color:#fff}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table tbody tr:nth-child(even){background-color:#f6f6f6}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table tbody td{position:relative}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table tbody td a{color:#b61828;text-decoration:underline}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table tbody .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;width:200px}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table tbody .price-bold{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table .gst-text{font-size:var(--fontsize12);display:block;text-transform:none;font-style:italic}::ng-deep cx-page-layout.AccountPageTemplate .account-list-table .negative-price{color:#d0021b}::ng-deep cx-page-layout.AccountPageTemplate .empty-accountPage-container{margin:5rem auto}#filterModal .modal-body .btn-group{display:block}#filterModal .modal-body .btn-group .custom-dropdown-btn{width:100%;display:flex;justify-content:space-between;border-bottom:1px solid #E0E0E0}#filterModal .modal-body .filter-head h3{font-family:\"Arial Bold\",sans-serif}#filterModal .modal-body .fixed-bottom{position:fixed;right:20px;left:20px}#filterModal .modal-body .mobile-cancel-btn{display:block;width:100%;max-width:100%;margin-bottom:1.5rem}#filterModal .modal-body .mobile-save-btn{display:block;width:100%;max-width:100%;margin-bottom:1.5rem}#filterModal .modal-content{height:100vh}#filterModal .modal-content .filter-popup-close{font-size:1.6rem;color:#1d1d1b}#main{margin:50px 0}#main #faq .card{margin-bottom:30px;border:0}#main #faq .card .card-header{padding:0;border-bottom:1px solid #E0E0E0;background-color:#fff}#main #faq .card .card-header .btn-header-link{display:block;text-align:left;padding-left:0;color:#161616;font-family:\"Arial Bold\",sans-serif}#main #faq .card .card-header .btn-header-link:after{content:\"\\f107\";font-family:\"Font Awesome 5 Free\";font-weight:900;float:right}#main #faq .card .card-header .btn-header-link.collapsed:after{content:\"\\f106\"}#main #faq .card .collapse{border:0}@media screen and (max-width: 991px){.invoice-search-block{background-color:transparent!important;border:none!important;padding:0!important}.invoice-search-block .input-group-prepend select{height:48px}::ng-deep .filter-block{padding:0!important;border:none!important;margin-top:1.875rem}::ng-deep .filter-block .fx-date-range-container{display:inline!important}::ng-deep .filter-block .dimond-secondary-btn{margin-bottom:0!important}::ng-deep .filter-block .custom-date-input .date-icon{top:-2px!important;left:150px!important}#filterModal .modal-dialog{margin:0}#filterModal .modal-body .fixed-bottom{position:absolute;right:20px;left:20px}#filterModal .modal-content{width:50%!important;float:right!important}::ng-deep .fx-date-range-container .md-drppicker{z-index:9}::ng-deep .fx-date-range-container .md-drppicker .ranges ul li button{padding-top:3px;padding-bottom:3px;margin-bottom:0}}@media screen and (max-width: 768px){.invoice-search-block{background-color:transparent!important;border:none!important;padding:0!important}::ng-deep .filter-block{padding:0!important;border:none!important;margin-top:1.875rem}::ng-deep .filter-block .d-flex-mobile{display:flex;align-items:center}::ng-deep .filter-block .custom-date-input .date-icon{position:absolute!important;left:150px!important;top:-2px!important}::ng-deep .filter-block .btn-group .custom-dropdown-btn{width:auto}::ng-deep .filter-block .filter-btn{border:1px solid #E0E0E0!important;float:right;text-transform:none}#filterModal .modal-dialog{margin:0}#filterModal .modal-content{width:100%!important}.input-group-prepend select{height:48px}}@media screen and (max-width: 440px){#filterModal .modal-body{padding:20px}#filterModal #main{margin:10px 0}#filterModal #main .card{margin-bottom:15px}#filterModal #main .card-body{padding:10px 0 0}#filterModal #main .card-body .dropdownItem{padding:10px 0 10px 36px}}@media only screen and (min-width: 360px) and (max-width: 440px){::ng-deep .filter-block .custom-date-input .ngx-daterangepicker-action{width:140px}::ng-deep .filter-block .custom-date-input .date-icon{width:auto;left:100px!important}::ng-deep .filter-block .custom-date-input .md-drppicker.double{width:100%}#filterModal .modal-body{padding:15px 20px}#filterModal #main{margin:10px 0}#filterModal #main .card{margin-bottom:15px}#filterModal #main .card-body{padding:10px 0 0}#filterModal #main .card-body .dropdownItem{padding:10px 0 10px 36px}}\n"], components: [{ type: i4.DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["selectedDateRange"], outputs: ["selectedDate"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InvoiceCreditComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'app-invoice-credit',
                    templateUrl: './invoice-credit.component.html',
                    styleUrls: ['./invoice-credit.component.scss'],
                }]
        }], ctorParameters: function () { return [{ type: i1.MyAccountService }, { type: i2.CmsService }, { type: i0.ChangeDetectorRef }, { type: i3.HttpClient }]; } });
//# sourceMappingURL=data:application/json;base64, 