buildingproduct-library 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/{buildingproduct-library-0.3.0.tgz → buildingproduct-library-0.3.2.tgz} +0 -0
  2. package/bundles/buildingproduct-library.umd.js +255 -157
  3. package/bundles/buildingproduct-library.umd.js.map +1 -1
  4. package/esm2015/lib/account-dropdown/account-dropdown.component.js +1 -1
  5. package/esm2015/lib/checkout/add-new-address/add-new-address.component.js +1 -1
  6. package/esm2015/lib/checkout/custom-checkout/custom-checkout.component.js +1 -1
  7. package/esm2015/lib/checkout/order-confirmation/order-confirmation.component.js +1 -1
  8. package/esm2015/lib/checkout/order-review/delivery-information/delivery-information.component.js +1 -1
  9. package/esm2015/lib/checkout/order-review/order-review-grid/order-review-grid.component.js +4 -4
  10. package/esm2015/lib/checkout/order-review/order-review-list/order-review-list.component.js +1 -1
  11. package/esm2015/lib/checkout/order-review/order-review.component.js +1 -1
  12. package/esm2015/lib/contact-us/contact-us.component.js +1 -1
  13. package/esm2015/lib/custom-cart/addto-saved-carts/addto-saved-carts.component.js +1 -1
  14. package/esm2015/lib/custom-cart/custom-cart.component.js +1 -1
  15. package/esm2015/lib/custom-mini-cart/custom-mini-cart.component.js +2 -2
  16. package/esm2015/lib/custom-navigation/custom-navigation.component.js +1 -1
  17. package/esm2015/lib/custom-order-details/custom-order-details.component.js +1 -1
  18. package/esm2015/lib/custom-order-details/download-popup/download-popup.component.js +1 -1
  19. package/esm2015/lib/custom-order-details/order-detail-grid/order-detail-grid.component.js +1 -1
  20. package/esm2015/lib/custom-order-details/order-detail-list/order-detail-list.component.js +1 -1
  21. package/esm2015/lib/custom-order-history/custom-order-history.component.js +1 -1
  22. package/esm2015/lib/custom-order-history/slider-progress/slider-progress.component.js +1 -1
  23. package/esm2015/lib/custom-saved-cart/custom-saved-cart-details/custom-save-cart-dtl/custom-save-cart-dtl.component.js +1 -1
  24. package/esm2015/lib/custom-saved-cart/custom-saved-cart-details/saved-cart-details-action/saved-cart-details-action.component.js +1 -1
  25. package/esm2015/lib/custom-saved-cart/custom-saved-cart-details/saved-cart-details-overview/saved-cart-details-overview.component.js +1 -1
  26. package/esm2015/lib/custom-saved-cart/custom-saved-cart.component.js +1 -1
  27. package/esm2015/lib/custom-search/custom-search.component.js +1 -1
  28. package/esm2015/lib/custom-user-account/custom-user-account.component.js +1 -1
  29. package/esm2015/lib/delivery-details/delivery-details-grid/delivery-details-grid.component.js +1 -1
  30. package/esm2015/lib/delivery-details/delivery-details-list/delivery-details-list.component.js +1 -1
  31. package/esm2015/lib/delivery-details/delivery-details.component.js +1 -1
  32. package/esm2015/lib/find-store/find-store.component.js +1 -1
  33. package/esm2015/lib/help-support/help-support.component.js +1 -1
  34. package/esm2015/lib/my-account/account-dashboard/account-dashboard.component.js +1 -1
  35. package/esm2015/lib/my-account/account-statements/account-statements.component.js +2 -2
  36. package/esm2015/lib/my-account/invoice-credit/invoice-credit.component.js +1 -1
  37. package/esm2015/lib/my-account/my-account.component.js +1 -1
  38. package/esm2015/lib/my-deliveries/delivery-grid/delivery-grid.component.js +1 -1
  39. package/esm2015/lib/my-deliveries/delivery-list/delivery-list.component.js +1 -1
  40. package/esm2015/lib/my-deliveries/my-deliveries.component.js +1 -1
  41. package/esm2015/lib/my-reports/my-reports.component.js +36 -0
  42. package/esm2015/lib/my-reports/my-reports.module.js +70 -0
  43. package/esm2015/lib/my-team/my-team.component.js +1 -1
  44. package/esm2015/lib/shared/active-saved-cart/active-saved-cart.component.js +1 -1
  45. package/esm2015/lib/shared/custom-breadcrum/custom-breadcrum.component.js +1 -1
  46. package/esm2015/lib/shared/custom-cart-detail/bundlepopup/bundlepopup.component.js +1 -1
  47. package/esm2015/lib/shared/custom-cart-detail/custom-cart-detail.component.js +1 -1
  48. package/esm2015/lib/shared/custom-cart-detail/custom-cart-grid/custom-cart-grid.component.js +2 -2
  49. package/esm2015/lib/shared/custom-cart-detail/custom-cart-list/custom-cart-list.component.js +2 -2
  50. package/esm2015/lib/shared/custom-cart-detail/custom-product-quantity-form/custom-product-quantity-form.component.js +1 -1
  51. package/esm2015/lib/shared/custom-flashing-image-details/custom-flashing-image-details.component.js +1 -1
  52. package/esm2015/lib/shared/date-range-picker/date-range-picker.component.js +1 -1
  53. package/esm2015/lib/shared/pod-download-popup/pod-download-popup.component.js +1 -1
  54. package/esm2015/lib/shared/saved-cart-popup/saved-cart-popup.component.js +1 -1
  55. package/esm2015/lib/shared/shared-download-order/shared-download-order.component.js +1 -1
  56. package/esm2015/public-api.js +2 -1
  57. package/fesm2015/buildingproduct-library.js +251 -159
  58. package/fesm2015/buildingproduct-library.js.map +1 -1
  59. package/lib/checkout/order-review/order-review-grid/order-review-grid.component.d.ts +1 -1
  60. package/lib/my-reports/my-reports.component.d.ts +14 -0
  61. package/lib/my-reports/my-reports.module.d.ts +13 -0
  62. package/package.json +1 -1
  63. package/public-api.d.ts +1 -0
package/esm2015/lib/custom-order-details/order-detail-list/order-detail-list.component.js CHANGED
@@ -212,7 +212,7 @@ export class OrderDetailListComponent {
212
212
  }
213
213
  }
214
214
  OrderDetailListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderDetailListComponent, deps: [{ token: i1.CartService }, { token: i2.UserAccountDetailServiceService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
215
- OrderDetailListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OrderDetailListComponent, selector: "app-order-detail-list", inputs: { cartDetails: "cartDetails", sortByVal: "sortByVal", orderDate: "orderDate", isCardData: "isCardData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async\">Loading&#8230;</div>\r\n<div class=\"revieworder-table-container py-3\">\r\n <table class=\"w-100 table\">\r\n <tr class=\"revieworder-header-container\">\r\n <th>#</th>\r\n <th class=\"item\">ITEM</th>\r\n <th>JOB REFERENCE</th>\r\n <th>DELIVERY DATE</th>\r\n <th>DELIVERY #</th>\r\n <th>QUANTITY ORDERED</th>\r\n <th>QUANTITY SHIPPED</th>\r\n <th class=\"colHD\">\r\n <div class=\"text-right\">TOTAL PRICE</div>\r\n <span class=\"text-right\">excl GST</span>\r\n </th>\r\n <th>STATUS</th>\r\n </tr>\r\n <ng-container *ngIf=\"cartDetails?.length; else nodata\">\r\n <ng-container *ngFor=\"let cart of cartDetails; let i = index\">\r\n <tr\r\n class=\"revieworder-body-container\"\r\n [ngClass]=\"\r\n !hasColour(cart) && cart?.product?.finishedProduct\r\n ? 'borderNew'\r\n : ''\r\n \"\r\n >\r\n <td>\r\n <ng-container *ngIf=\"cart?.entryNumber?.length > 9; else entryId\">{{\r\n cart?.entryNumber\r\n }}</ng-container>\r\n <ng-template #entryId>0{{ cart?.entryNumber + 1 }}</ng-template>\r\n </td>\r\n <td>\r\n <div class=\"row product-image-container\">\r\n <div class=\"col-sm-4 col-lg-2 p-2 product-img\">\r\n <ng-container\r\n *ngIf=\"\r\n cartDetails[i]?.product?.flashingProduct;\r\n else normalImage\r\n \"\r\n >\r\n <a\r\n data-toggle=\"modal\"\r\n class=\"flashing-expand\"\r\n (click)=\"viewImage($event, cartDetails[i])\"\r\n [attr.data-target]=\"'#imageModal'\"\r\n *ngIf=\"hasImage(cartDetails[i]); else hasPdf\"\r\n >\r\n <cx-media\r\n [container]=\"getImageDetails(cartDetails[i])\"\r\n format=\"cartIcon\"\r\n role=\"presentation\"\r\n ></cx-media>\r\n </a>\r\n <ng-template #hasPdf>\r\n <a\r\n class=\"flashing-expand flashing-open\"\r\n [href]=\"getPdfLink(cartDetails[i])\"\r\n target=\"_blank\"\r\n >\r\n <img\r\n class=\"pdf-icon\"\r\n src=\"../../../../../assets/images/pdf-icon.svg\"\r\n alt=\"Click to open PDF\"\r\n title=\"Click to open PDF\"\r\n />\r\n </a>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #normalImage>\r\n <cx-media\r\n [container]=\"getImageDetails(cartDetails[i])\"\r\n format=\"cartIcon\"\r\n role=\"presentation\"\r\n ></cx-media>\r\n </ng-template>\r\n </div>\r\n <div class=\"col-sm-8 col-lg-10\">\r\n <p class=\"reviewproduct-name mb-2\">{{ cart?.product?.name }}</p>\r\n <p class=\"sku-text mb-0\">SKU: {{ cart?.product?.code }}</p>\r\n </div>\r\n </div>\r\n </td>\r\n <td>{{ cart?.jobReference || \"-\" }}</td>\r\n <td>\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? (orderDate | date : \"dd/MM/yyyy\")\r\n : \"\"\r\n }}\r\n </td>\r\n <td>\r\n <a *ngIf=\"cart?.consignments && cart?.consignments?.length == 1\"\r\n [href]=\"'/delivery-details/' + cart?.consignments[0].code\"\r\n class=\"consignment-number\"\r\n title=\"Consignment Number\"\r\n >\r\n {{\r\n cart?.consignments && cart?.consignments?.length == 1\r\n ? cart?.consignments[0].code\r\n : \"\"\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{ cart?.quantityDouble }} {{ cart?.unit?.code }}<br />\r\n <span *ngIf=\"isOrderPermissions\" class=\"subPrice\"\r\n >@ {{ cart.discountedBasePrice?.formattedValue? cart.discountedBasePrice?.formattedValue : cart.basePrice?.formattedValue }}/{{\r\n cart.discountedBasePrice?.unitType ? cart.discountedBasePrice?.unitType : cart.basePrice?.unitType\r\n }}</span\r\n >\r\n </td>\r\n <td>\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? cart?.quantityDouble\r\n : \"\"\r\n }}\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? cart?.unit?.code\r\n : \"\"\r\n }}\r\n </td>\r\n <td>\r\n {{ cart?.totalPrice?.formattedValue || \"-\" }}\r\n <span *ngIf=\"isOrderPermissions\" class=\"d-block\">excl GST</span>\r\n </td>\r\n <td class=\"statusColm\">\r\n <small\r\n *ngIf=\"\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n \"\r\n class=\"statusColor\"\r\n [ngStyle]=\"{\r\n 'background-color': getStatusColor(cart)\r\n }\"\r\n ></small>\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? cart?.consignments && cart?.consignments?.length == 1\r\n ? cart?.consignments[0]?.entries[0]?.statusDisplay\r\n : cart?.statusDisplay\r\n : \"\"\r\n }}\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"cart?.product?.classifications\">\r\n <tr class=\"revieworder-body-container\">\r\n <td colspan=\"9\">\r\n <span *ngIf=\"cart?.product?.classifications[0]?.features\">\r\n {{\r\n getClassifications(cartDetails[i]?.product?.classifications)\r\n }}\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr\r\n class=\"revieworder-body-container\"\r\n *ngIf=\"!cart?.configurationInfos?.length && hasColour(cart)\"\r\n >\r\n <td colspan=\"9\">\r\n <p class=\"colors-paragraph mb-0\">\r\n <span\r\n class=\"revieworder-color mr-3\"\r\n [ngStyle]=\"{ background: cart?.colour?.hexadecimalCode }\"\r\n ></span>\r\n {{ cart?.colour?.name }}\r\n </p>\r\n </td>\r\n </tr>\r\n <tr\r\n class=\"revieworder-body-container\"\r\n *ngIf=\"\r\n cart?.configurationInfos?.length || cart?.subLineConfigInfos?.length\r\n \"\r\n [ngClass]=\"\r\n (cart?.configurationInfos?.length > 0 ||\r\n cart?.subLineConfigInfos?.length > 0) &&\r\n (!cart?.consignments || cart?.consignments?.length < 2)\r\n ? 'borderNew'\r\n : ''\r\n \"\r\n >\r\n <td colspan=\"9\">\r\n <ng-container\r\n *ngIf=\"cart?.configurationInfos?.length; else accessoriesColor\"\r\n >\r\n <p\r\n class=\"colors-paragraph mb-0\"\r\n *ngIf=\"!cart?.product?.flashingProduct; else flashingColour\"\r\n >\r\n <span\r\n class=\"revieworder-color mr-3\"\r\n [ngStyle]=\"{\r\n background:\r\n cart?.configurationInfos[0]?.configurationValue?.split(\r\n '|'\r\n ) | slice : 2\r\n }\"\r\n ></span>\r\n {{\r\n cart?.configurationInfos[0]?.configurationValue?.split(\"|\")\r\n | slice : 1 : 2\r\n }}\r\n </p>\r\n <ng-template #flashingColour>\r\n <p class=\"colors-paragraph mb-0\">\r\n <span\r\n class=\"revieworder-color mr-3\"\r\n [ngStyle]=\"{\r\n background: getColourDetails(\r\n cartDetails[i]?.configurationInfos,\r\n 'background'\r\n )\r\n }\"\r\n ></span>\r\n {{\r\n getColourDetails(cartDetails[i]?.configurationInfos, \"name\")\r\n }}\r\n </p>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #accessoriesColor>\r\n <p class=\"colors-paragraph my-2\" *ngIf=\"hasColour(cart)\">\r\n <span\r\n class=\"revieworder-color mr-2\"\r\n [ngStyle]=\"{\r\n background: cart?.colour?.hexadecimalCode\r\n }\"\r\n ></span>\r\n {{ cart?.colour?.name }}\r\n </p>\r\n </ng-template>\r\n <ng-container *ngIf=\"cart?.subLineConfigInfos?.length > 0\">\r\n <p class=\"m-0\">\r\n <a\r\n href=\"javascript:void(0)\"\r\n (click)=\"showHide(i)\"\r\n class=\"see-more-link\"\r\n >\r\n {{ showDetails[i] == true ? \"Hide\" : \"See\" }} more details\r\n </a>\r\n </p>\r\n <div class=\"revieworder-collapse\" *ngIf=\"showDetails[i]\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-6 bundle-details\">\r\n <div class=\"row bundle-details-header\">\r\n <div class=\"col-3\">Quantity</div>\r\n <div class=\"col-3\">Length (LM)</div>\r\n <ng-container\r\n *ngIf=\"cart?.subLineConfigInfos[0]?.bundleName\"\r\n >\r\n <div class=\"col-3\">Bundle</div>\r\n <div class=\"col-3\">Reference</div>\r\n </ng-container>\r\n </div>\r\n <div\r\n class=\"row\"\r\n *ngFor=\"let subLine of cart?.subLineConfigInfos\"\r\n >\r\n <div class=\"col-3\">{{ subLine?.quantity }}</div>\r\n <div class=\"col-3\">\r\n {{ subLine?.length | number : \"0.3-3\" }}\r\n </div>\r\n <ng-container *ngIf=\"subLine?.bundleName\">\r\n <div class=\"col-3\">{{ subLine?.bundleName }}</div>\r\n <div class=\"col-3\">{{ subLine?.reference }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td colspan=\"9\" class=\"p-0\">\r\n <div\r\n *ngIf=\"\r\n cartDetails[i]?.product?.flashingProduct &&\r\n cartDetails[i]?.productConfiguredInfos\r\n \"\r\n >\r\n <ng-container\r\n *ngFor=\"let data of cartDetails[i]?.productConfiguredInfos\"\r\n >\r\n <div\r\n class=\"flashing-block\"\r\n *ngIf=\"data?.product?.name?.toLowerCase() == 'flashguard'\"\r\n >\r\n <div class=\"row\">\r\n <div class=\"col-sm-3\">\r\n <h3 class=\"flash-title\">{{ data?.product?.name }}</h3>\r\n <h6 class=\"skuId\">SKU: {{ data?.product?.code }}</h6>\r\n <span *ngIf=\"data?.girth\"\r\n >Girth: +{{ data.girth }}mm\r\n </span>\r\n </div>\r\n <div class=\"offset-sm-3 col-sm-2\">\r\n {{ data?.quantityDouble }} {{ data?.unitType }}\r\n </div>\r\n <div class=\"col-sm-2\">\r\n {{ data?.basePrice?.formattedValue || \"-\"\r\n }}<span *ngIf=\"isOrderPermissions\"\r\n >/{{ data?.unitType }}</span\r\n >\r\n </div>\r\n <div class=\"col-sm-2\">\r\n {{ data?.totalPrice?.formattedValue || \"-\" }}\r\n <span *ngIf=\"isOrderPermissions\" class=\"gst-text\"\r\n >excl GST</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <ng-container\r\n *ngIf=\"cart?.consignments && cart?.consignments.length > 1\"\r\n >\r\n <tr\r\n *ngFor=\"let consignment of cart?.consignments; let last = last\"\r\n [ngClass]=\"last ? 'borderNew' : ''\"\r\n >\r\n <td>&nbsp;</td>\r\n <td>&nbsp;</td>\r\n <td>&nbsp;</td>\r\n <td>{{ consignment?.statusDate | date : \"dd/MM/yyyy\" }}</td>\r\n <td>\r\n <a\r\n [href]=\"'/delivery-details/' + consignment?.code\"\r\n class=\"consignment-number\"\r\n title=\"Consignment Number\"\r\n >\r\n {{ consignment?.code }}\r\n </a>\r\n </td>\r\n <td>&nbsp;</td>\r\n <td>\r\n {{ consignment?.entries[0]?.shippedQuantity }}\r\n {{ cart?.unit?.code }}\r\n </td>\r\n <td>&nbsp;</td>\r\n <td class=\"statusColm\">\r\n <small\r\n class=\"statusColor\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n consignment?.entries[0]?.status == 'CREATED'\r\n ? '#F3A931'\r\n : consignment?.entries[0]?.status == 'APPROVED'\r\n ? '#f26522'\r\n : consignment?.entries[0]?.status == 'PROCESSING'\r\n ? '#75578A'\r\n : consignment?.entries[0]?.status == 'READY'\r\n ? '#496471'\r\n : consignment?.entries[0]?.status == 'DELIVERING'\r\n ? '#00ACBD'\r\n : consignment?.entries[0]?.status == 'COMPLETED'\r\n ? '#8DC440'\r\n : consignment?.entries[0]?.status == 'RETURNED'\r\n ? '#8DC440'\r\n : consignment?.entries[0]?.status == 'CANCELLED'\r\n ? '#000000'\r\n : consignment?.entries[0]?.status == 'DESPATCHED'\r\n ? '#4081c4'\r\n : ''\r\n }\"\r\n ></small>\r\n {{ consignment?.entries[0]?.statusDisplay || \"-\" }}\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #nodata>\r\n <tr class=\"revieworder-body-container\">\r\n <td colspan=\"7\" class=\"text-center\">{{ noRecord }}</td>\r\n </tr>\r\n </ng-template>\r\n </table>\r\n</div>\r\n<div\r\n class=\"modal fade\"\r\n id=\"imageModal\"\r\n role=\"dialog\"\r\n aria-labelledby=\"imageModal\"\r\n aria-hidden=\"true\"\r\n #imageModal\r\n>\r\n <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <i\r\n class=\"icon-close invite-pop-close\"\r\n #closeInviteModal\r\n data-dismiss=\"modal\"\r\n aria-label=\"Close\"\r\n ></i>\r\n </div>\r\n <div class=\"modal-body\">\r\n <img [src]=\"imageModalSrc\" alt=\"alert\" />\r\n <div *ngIf=\"isFlashingModal\" class=\"flashing-details\">\r\n <app-custom-flashing-image-details\r\n [cartDetails]=\"flashingImageDetails\"\r\n ></app-custom-flashing-image-details>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}#visualization-container{text-align:center;margin:0 auto}#cds-viewer-container-3d{width:320px;height:200px}#cds-viewer-container-2d{width:320px;height:200px}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}.table{color:#1d1d1b;background:#ffffff}.table td{border:0;vertical-align:top!important}.revieworder-table-container{padding-bottom:15rem}.revieworder-table-container .revieworder-header-container{background:#646363;color:#fff;font-family:\"Arial Bold\",sans-serif}.revieworder-table-container .revieworder-header-container th{vertical-align:middle!important;font-size:var(--fontsize14)}.revieworder-table-container .revieworder-header-container .colHD{width:120px;font-size:var(--fontsize14);display:flex;flex-direction:column;align-self:center;line-height:18px}.revieworder-table-container .revieworder-header-container .colHD span{text-align:right;display:block;font-size:var(--fontsize12)}.revieworder-table-container .revieworder-header-container .item{width:350px}.revieworder-table-container .product-img{width:50px;height:50px;border:1px solid #E0E0E0;min-width:50px}.revieworder-table-container .product-img cx-media{top:-1px}.revieworder-table-container .borderNew{border-bottom:1px solid #E0E0E0}.revieworder-table-container .statusColm{width:140px}.revieworder-table-container .statusColor{display:inline-block;width:12px;height:12px;border-radius:50%}.revieworder-table-container .subPrice{color:#707070}.revieworder-table-container .revieworder-body-container{padding-bottom:1rem}.revieworder-table-container .revieworder-body-container .product-image-container{display:flex}.revieworder-table-container .revieworder-body-container .product-image-container .reviewproduct-image{width:71px;height:71px}.revieworder-table-container .revieworder-body-container .product-image-container .reviewproduct-name{font-family:\"Arial Bold\",sans-serif}.revieworder-table-container .revieworder-body-container .product-image-container .sku-text{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;color:#6f6f6f}.revieworder-table-container .revieworder-body-container .see-more-link{text-decoration:underline}.revieworder-table-container .revieworder-body-container .see-more-link:hover{color:#d51317}.revieworder-table-container .revieworder-body-container .seemoredetails-link{font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif;text-decoration:underline;cursor:pointer}.revieworder-table-container .revieworder-body-container .seemoredetails-link:hover{color:#b61828}.revieworder-table-container .revieworder-body-container .revieworder-collapse .bundle-details{background:#F6F6F6;border:1px solid #E0E0E0;margin-left:15px;padding:1rem;line-height:2.5rem}.revieworder-table-container .revieworder-body-container .revieworder-collapse .bundle-details .bundle-details-header{font-family:\"Arial Bold\",sans-serif}.revieworder-table-container .colors-paragraph{display:flex;align-items:center}.revieworder-table-container .colors-paragraph .revieworder-color{width:20px;height:20px;border:1px solid #000000;display:inline-flex}.revieworder-table-container .consignment-number{text-decoration:underline;color:#b61828}.revieworder-table-container .consignment-number:hover,.revieworder-table-container .consignment-number:visited{color:#b61828}::ng-deep .flashing-expand{cursor:pointer}::ng-deep .flashing-expand:after{background:url(../../../../assets/images/expand-icon.svg) no-repeat center;z-index:2;width:24px;content:\"\";height:24px;position:absolute;top:0;right:0}::ng-deep .flashing-expand img{max-height:40px;max-width:40px}::ng-deep .flashing-expand.flashing-open:after{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%0D %3Cg id%3D%22Group_14477%22 data-name%3D%22Group 14477%22 transform%3D%22translate(-5533.5 11452.992)%22%3E%0D %3Cg id%3D%22Group_14476%22 data-name%3D%22Group 14476%22%3E%0D %3Cg id%3D%22Group_14475%22 data-name%3D%22Group 14475%22 transform%3D%22translate(5164.5 -12321.992)%22%3E%0D %3Crect id%3D%22Rectangle_1116%22 data-name%3D%22Rectangle 1116%22 width%3D%2224%22 height%3D%2224%22 transform%3D%22translate(369 869)%22 fill%3D%22%23fff%22%2F%3E%0D %3C%2Fg%3E%0D %3Cpath id%3D%22Path_11366%22 data-name%3D%22Path 11366%22 d%3D%22M142.587%2C65.954v4.569a1.963%2C1.963%2C0%2C0%2C1-1.839%2C2.068H127.833a1.965%2C1.965%2C0%2C0%2C1-1.839-2.068V58.066A1.963%2C1.963%2C0%2C0%2C1%2C127.833%2C56h4.8a.83.83%2C0%2C1%2C1%2C0%2C1.659h-4.505a.516.516%2C0%2C0%2C0-.472.553V70.378a.521.521%2C0%2C0%2C0%2C.472.553h12.33a.516.516%2C0%2C0%2C0%2C.472-.553V65.954a.83.83%2C0%2C1%2C1%2C1.659%2C0Z%22 transform%3D%22translate(5411.209 -11505.287)%22 fill-rule%3D%22evenodd%22%2F%3E%0D %3C%2Fg%3E%0D %3Cpath id%3D%22Path_11367%22 data-name%3D%22Path 11367%22 d%3D%22M26.413%2C4.5H21.5a.607.607%2C0%2C0%2C0-.608.608v.009a.607.607%2C0%2C0%2C0%2C.608.608h3.4l-5.091%2C5.126a.608.608%2C0%2C0%2C0%2C.858.862l5.126-5.1v3.4a.607.607%2C0%2C0%2C0%2C.608.608h.009a.607.607%2C0%2C0%2C0%2C.608-.608V5.108A.607.607%2C0%2C0%2C0%2C26.413%2C4.5Z%22 transform%3D%22translate(5526.775 -11453.789)%22%2F%3E%0D %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}#imageModal.show{display:flex!important;vertical-align:middle!important;align-items:center!important}#imageModal.show .modal-header{justify-content:right;border:none}#imageModal.show .modal-body{vertical-align:middle;margin:0 1rem;overflow:auto;max-height:80vh}#imageModal.show .modal-body img{max-width:100%;max-height:80vh}.flashing-block{background-color:#e8e8e8;padding:12px;border-bottom:1px solid #C6C6C6}.flashing-block .flash-title{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}.flashing-block .skuId{color:#707070;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.flashing-block .gst-text{display:block;font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif}\n"], components: [{ type: i3.MediaComponent, selector: "cx-media", inputs: ["container", "format", "alt", "role", "loading"], outputs: ["loaded"] }, { type: i4.CustomFlashingImageDetailsComponent, selector: "app-custom-flashing-image-details", inputs: ["cartDetails", "forPdf", "appendixNo"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "slice": i5.SlicePipe, "number": i5.DecimalPipe } });
215
+ OrderDetailListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OrderDetailListComponent, selector: "app-order-detail-list", inputs: { cartDetails: "cartDetails", sortByVal: "sortByVal", orderDate: "orderDate", isCardData: "isCardData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading\" *ngIf=\"showWaitCursor | async\">Loading&#8230;</div>\r\n<div class=\"revieworder-table-container py-3\">\r\n <table class=\"w-100 table\">\r\n <tr class=\"revieworder-header-container\">\r\n <th>#</th>\r\n <th class=\"item\">ITEM</th>\r\n <th>JOB REFERENCE</th>\r\n <th>DELIVERY DATE</th>\r\n <th>DELIVERY #</th>\r\n <th>QUANTITY ORDERED</th>\r\n <th>QUANTITY SHIPPED</th>\r\n <th class=\"colHD\">\r\n <div class=\"text-right\">TOTAL PRICE</div>\r\n <span class=\"text-right\">excl GST</span>\r\n </th>\r\n <th>STATUS</th>\r\n </tr>\r\n <ng-container *ngIf=\"cartDetails?.length; else nodata\">\r\n <ng-container *ngFor=\"let cart of cartDetails; let i = index\">\r\n <tr\r\n class=\"revieworder-body-container\"\r\n [ngClass]=\"\r\n !hasColour(cart) && cart?.product?.finishedProduct\r\n ? 'borderNew'\r\n : ''\r\n \"\r\n >\r\n <td>\r\n <ng-container *ngIf=\"cart?.entryNumber?.length > 9; else entryId\">{{\r\n cart?.entryNumber\r\n }}</ng-container>\r\n <ng-template #entryId>0{{ cart?.entryNumber + 1 }}</ng-template>\r\n </td>\r\n <td>\r\n <div class=\"row product-image-container\">\r\n <div class=\"col-sm-4 col-lg-2 p-2 product-img\">\r\n <ng-container\r\n *ngIf=\"\r\n cartDetails[i]?.product?.flashingProduct;\r\n else normalImage\r\n \"\r\n >\r\n <a\r\n data-toggle=\"modal\"\r\n class=\"flashing-expand\"\r\n (click)=\"viewImage($event, cartDetails[i])\"\r\n [attr.data-target]=\"'#imageModal'\"\r\n *ngIf=\"hasImage(cartDetails[i]); else hasPdf\"\r\n >\r\n <cx-media\r\n [container]=\"getImageDetails(cartDetails[i])\"\r\n format=\"cartIcon\"\r\n role=\"presentation\"\r\n ></cx-media>\r\n </a>\r\n <ng-template #hasPdf>\r\n <a\r\n class=\"flashing-expand flashing-open\"\r\n [href]=\"getPdfLink(cartDetails[i])\"\r\n target=\"_blank\"\r\n >\r\n <img\r\n class=\"pdf-icon\"\r\n src=\"../../../../../assets/images/pdf-icon.svg\"\r\n alt=\"Click to open PDF\"\r\n title=\"Click to open PDF\"\r\n />\r\n </a>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #normalImage>\r\n <cx-media\r\n [container]=\"getImageDetails(cartDetails[i])\"\r\n format=\"cartIcon\"\r\n role=\"presentation\"\r\n ></cx-media>\r\n </ng-template>\r\n </div>\r\n <div class=\"col-sm-8 col-lg-10\">\r\n <p class=\"reviewproduct-name mb-2\">{{ cart?.product?.name }}</p>\r\n <p class=\"sku-text mb-0\">SKU: {{ cart?.product?.code }}</p>\r\n </div>\r\n </div>\r\n </td>\r\n <td>{{ cart?.jobReference || \"-\" }}</td>\r\n <td>\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? (orderDate | date : \"dd/MM/yyyy\")\r\n : \"\"\r\n }}\r\n </td>\r\n <td>\r\n <a *ngIf=\"cart?.consignments && cart?.consignments?.length == 1\"\r\n [href]=\"'/delivery-details/' + cart?.consignments[0].code\"\r\n class=\"consignment-number\"\r\n title=\"Consignment Number\"\r\n >\r\n {{\r\n cart?.consignments && cart?.consignments?.length == 1\r\n ? cart?.consignments[0].code\r\n : \"\"\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{ cart?.quantityDouble }} {{ cart?.unit?.code }}<br />\r\n <span *ngIf=\"isOrderPermissions\" class=\"subPrice\"\r\n >@ {{ cart.discountedBasePrice?.formattedValue? cart.discountedBasePrice?.formattedValue : cart.basePrice?.formattedValue }}/{{\r\n cart.discountedBasePrice?.unitType ? cart.discountedBasePrice?.unitType : cart.basePrice?.unitType\r\n }}</span\r\n >\r\n </td>\r\n <td>\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? cart?.quantityDouble\r\n : \"\"\r\n }}\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? cart?.unit?.code\r\n : \"\"\r\n }}\r\n </td>\r\n <td>\r\n {{ cart?.totalPrice?.formattedValue || \"-\" }}\r\n <span *ngIf=\"isOrderPermissions\" class=\"d-block\">excl GST</span>\r\n </td>\r\n <td class=\"statusColm\">\r\n <small\r\n *ngIf=\"\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n \"\r\n class=\"statusColor\"\r\n [ngStyle]=\"{\r\n 'background-color': getStatusColor(cart)\r\n }\"\r\n ></small>\r\n {{\r\n !cart?.consignments ||\r\n (cart?.consignments && cart?.consignments?.length < 2)\r\n ? cart?.consignments && cart?.consignments?.length == 1\r\n ? cart?.consignments[0]?.entries[0]?.statusDisplay\r\n : cart?.statusDisplay\r\n : \"\"\r\n }}\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"cart?.product?.classifications\">\r\n <tr class=\"revieworder-body-container\">\r\n <td colspan=\"9\">\r\n <span *ngIf=\"cart?.product?.classifications[0]?.features\">\r\n {{\r\n getClassifications(cartDetails[i]?.product?.classifications)\r\n }}\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr\r\n class=\"revieworder-body-container\"\r\n *ngIf=\"!cart?.configurationInfos?.length && hasColour(cart)\"\r\n >\r\n <td colspan=\"9\">\r\n <p class=\"colors-paragraph mb-0\">\r\n <span\r\n class=\"revieworder-color mr-3\"\r\n [ngStyle]=\"{ background: cart?.colour?.hexadecimalCode }\"\r\n ></span>\r\n {{ cart?.colour?.name }}\r\n </p>\r\n </td>\r\n </tr>\r\n <tr\r\n class=\"revieworder-body-container\"\r\n *ngIf=\"\r\n cart?.configurationInfos?.length || cart?.subLineConfigInfos?.length\r\n \"\r\n [ngClass]=\"\r\n (cart?.configurationInfos?.length > 0 ||\r\n cart?.subLineConfigInfos?.length > 0) &&\r\n (!cart?.consignments || cart?.consignments?.length < 2)\r\n ? 'borderNew'\r\n : ''\r\n \"\r\n >\r\n <td colspan=\"9\">\r\n <ng-container\r\n *ngIf=\"cart?.configurationInfos?.length; else accessoriesColor\"\r\n >\r\n <p\r\n class=\"colors-paragraph mb-0\"\r\n *ngIf=\"!cart?.product?.flashingProduct; else flashingColour\"\r\n >\r\n <span\r\n class=\"revieworder-color mr-3\"\r\n [ngStyle]=\"{\r\n background:\r\n cart?.configurationInfos[0]?.configurationValue?.split(\r\n '|'\r\n ) | slice : 2\r\n }\"\r\n ></span>\r\n {{\r\n cart?.configurationInfos[0]?.configurationValue?.split(\"|\")\r\n | slice : 1 : 2\r\n }}\r\n </p>\r\n <ng-template #flashingColour>\r\n <p class=\"colors-paragraph mb-0\">\r\n <span\r\n class=\"revieworder-color mr-3\"\r\n [ngStyle]=\"{\r\n background: getColourDetails(\r\n cartDetails[i]?.configurationInfos,\r\n 'background'\r\n )\r\n }\"\r\n ></span>\r\n {{\r\n getColourDetails(cartDetails[i]?.configurationInfos, \"name\")\r\n }}\r\n </p>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #accessoriesColor>\r\n <p class=\"colors-paragraph my-2\" *ngIf=\"hasColour(cart)\">\r\n <span\r\n class=\"revieworder-color mr-2\"\r\n [ngStyle]=\"{\r\n background: cart?.colour?.hexadecimalCode\r\n }\"\r\n ></span>\r\n {{ cart?.colour?.name }}\r\n </p>\r\n </ng-template>\r\n <ng-container *ngIf=\"cart?.subLineConfigInfos?.length > 0\">\r\n <p class=\"m-0\">\r\n <a\r\n href=\"javascript:void(0)\"\r\n (click)=\"showHide(i)\"\r\n class=\"see-more-link\"\r\n >\r\n {{ showDetails[i] == true ? \"Hide\" : \"See\" }} more details\r\n </a>\r\n </p>\r\n <div class=\"revieworder-collapse\" *ngIf=\"showDetails[i]\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-6 bundle-details\">\r\n <div class=\"row bundle-details-header\">\r\n <div class=\"col-3\">Quantity</div>\r\n <div class=\"col-3\">Length (LM)</div>\r\n <ng-container\r\n *ngIf=\"cart?.subLineConfigInfos[0]?.bundleName\"\r\n >\r\n <div class=\"col-3\">Bundle</div>\r\n <div class=\"col-3\">Reference</div>\r\n </ng-container>\r\n </div>\r\n <div\r\n class=\"row\"\r\n *ngFor=\"let subLine of cart?.subLineConfigInfos\"\r\n >\r\n <div class=\"col-3\">{{ subLine?.quantity }}</div>\r\n <div class=\"col-3\">\r\n {{ subLine?.length | number : \"0.3-3\" }}\r\n </div>\r\n <ng-container *ngIf=\"subLine?.bundleName\">\r\n <div class=\"col-3\">{{ subLine?.bundleName }}</div>\r\n <div class=\"col-3\">{{ subLine?.reference }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td colspan=\"9\" class=\"p-0\">\r\n <div\r\n *ngIf=\"\r\n cartDetails[i]?.product?.flashingProduct &&\r\n cartDetails[i]?.productConfiguredInfos\r\n \"\r\n >\r\n <ng-container\r\n *ngFor=\"let data of cartDetails[i]?.productConfiguredInfos\"\r\n >\r\n <div\r\n class=\"flashing-block\"\r\n *ngIf=\"data?.product?.name?.toLowerCase() == 'flashguard'\"\r\n >\r\n <div class=\"row\">\r\n <div class=\"col-sm-3\">\r\n <h3 class=\"flash-title\">{{ data?.product?.name }}</h3>\r\n <h6 class=\"skuId\">SKU: {{ data?.product?.code }}</h6>\r\n <span *ngIf=\"data?.girth\"\r\n >Girth: +{{ data.girth }}mm\r\n </span>\r\n </div>\r\n <div class=\"offset-sm-3 col-sm-2\">\r\n {{ data?.quantityDouble }} {{ data?.unitType }}\r\n </div>\r\n <div class=\"col-sm-2\">\r\n {{ data?.basePrice?.formattedValue || \"-\"\r\n }}<span *ngIf=\"isOrderPermissions\"\r\n >/{{ data?.unitType }}</span\r\n >\r\n </div>\r\n <div class=\"col-sm-2\">\r\n {{ data?.totalPrice?.formattedValue || \"-\" }}\r\n <span *ngIf=\"isOrderPermissions\" class=\"gst-text\"\r\n >excl GST</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <ng-container\r\n *ngIf=\"cart?.consignments && cart?.consignments.length > 1\"\r\n >\r\n <tr\r\n *ngFor=\"let consignment of cart?.consignments; let last = last\"\r\n [ngClass]=\"last ? 'borderNew' : ''\"\r\n >\r\n <td>&nbsp;</td>\r\n <td>&nbsp;</td>\r\n <td>&nbsp;</td>\r\n <td>{{ consignment?.statusDate | date : \"dd/MM/yyyy\" }}</td>\r\n <td>\r\n <a\r\n [href]=\"'/delivery-details/' + consignment?.code\"\r\n class=\"consignment-number\"\r\n title=\"Consignment Number\"\r\n >\r\n {{ consignment?.code }}\r\n </a>\r\n </td>\r\n <td>&nbsp;</td>\r\n <td>\r\n {{ consignment?.entries[0]?.shippedQuantity }}\r\n {{ cart?.unit?.code }}\r\n </td>\r\n <td>&nbsp;</td>\r\n <td class=\"statusColm\">\r\n <small\r\n class=\"statusColor\"\r\n [ngStyle]=\"{\r\n 'background-color':\r\n consignment?.entries[0]?.status == 'CREATED'\r\n ? '#F3A931'\r\n : consignment?.entries[0]?.status == 'APPROVED'\r\n ? '#f26522'\r\n : consignment?.entries[0]?.status == 'PROCESSING'\r\n ? '#75578A'\r\n : consignment?.entries[0]?.status == 'READY'\r\n ? '#496471'\r\n : consignment?.entries[0]?.status == 'DELIVERING'\r\n ? '#00ACBD'\r\n : consignment?.entries[0]?.status == 'COMPLETED'\r\n ? '#8DC440'\r\n : consignment?.entries[0]?.status == 'RETURNED'\r\n ? '#8DC440'\r\n : consignment?.entries[0]?.status == 'CANCELLED'\r\n ? '#000000'\r\n : consignment?.entries[0]?.status == 'DESPATCHED'\r\n ? '#4081c4'\r\n : ''\r\n }\"\r\n ></small>\r\n {{ consignment?.entries[0]?.statusDisplay || \"-\" }}\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #nodata>\r\n <tr class=\"revieworder-body-container\">\r\n <td colspan=\"7\" class=\"text-center\">{{ noRecord }}</td>\r\n </tr>\r\n </ng-template>\r\n </table>\r\n</div>\r\n<div\r\n class=\"modal fade\"\r\n id=\"imageModal\"\r\n role=\"dialog\"\r\n aria-labelledby=\"imageModal\"\r\n aria-hidden=\"true\"\r\n #imageModal\r\n>\r\n <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <i\r\n class=\"icon-close invite-pop-close\"\r\n #closeInviteModal\r\n data-dismiss=\"modal\"\r\n aria-label=\"Close\"\r\n ></i>\r\n </div>\r\n <div class=\"modal-body\">\r\n <img [src]=\"imageModalSrc\" alt=\"alert\" />\r\n <div *ngIf=\"isFlashingModal\" class=\"flashing-details\">\r\n <app-custom-flashing-image-details\r\n [cartDetails]=\"flashingImageDetails\"\r\n ></app-custom-flashing-image-details>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}.table{color:#1d1d1b;background:#ffffff}.table td{border:0;vertical-align:top!important}.revieworder-table-container{padding-bottom:15rem}.revieworder-table-container .revieworder-header-container{background:#646363;color:#fff;font-family:\"Arial Bold\",sans-serif}.revieworder-table-container .revieworder-header-container th{vertical-align:middle!important;font-size:var(--fontsize14)}.revieworder-table-container .revieworder-header-container .colHD{width:120px;font-size:var(--fontsize14);display:flex;flex-direction:column;align-self:center;line-height:18px}.revieworder-table-container .revieworder-header-container .colHD span{text-align:right;display:block;font-size:var(--fontsize12)}.revieworder-table-container .revieworder-header-container .item{width:350px}.revieworder-table-container .product-img{width:50px;height:50px;border:1px solid #E0E0E0;min-width:50px}.revieworder-table-container .product-img cx-media{top:-1px}.revieworder-table-container .borderNew{border-bottom:1px solid #E0E0E0}.revieworder-table-container .statusColm{width:140px}.revieworder-table-container .statusColor{display:inline-block;width:12px;height:12px;border-radius:50%}.revieworder-table-container .subPrice{color:#707070}.revieworder-table-container .revieworder-body-container{padding-bottom:1rem}.revieworder-table-container .revieworder-body-container .product-image-container{display:flex}.revieworder-table-container .revieworder-body-container .product-image-container .reviewproduct-image{width:71px;height:71px}.revieworder-table-container .revieworder-body-container .product-image-container .reviewproduct-name{font-family:\"Arial Bold\",sans-serif}.revieworder-table-container .revieworder-body-container .product-image-container .sku-text{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;color:#6f6f6f}.revieworder-table-container .revieworder-body-container .see-more-link{text-decoration:underline}.revieworder-table-container .revieworder-body-container .see-more-link:hover{color:#d51317}.revieworder-table-container .revieworder-body-container .seemoredetails-link{font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif;text-decoration:underline;cursor:pointer}.revieworder-table-container .revieworder-body-container .seemoredetails-link:hover{color:#b61828}.revieworder-table-container .revieworder-body-container .revieworder-collapse .bundle-details{background:#F6F6F6;border:1px solid #E0E0E0;margin-left:15px;padding:1rem;line-height:2.5rem}.revieworder-table-container .revieworder-body-container .revieworder-collapse .bundle-details .bundle-details-header{font-family:\"Arial Bold\",sans-serif}.revieworder-table-container .colors-paragraph{display:flex;align-items:center}.revieworder-table-container .colors-paragraph .revieworder-color{width:20px;height:20px;border:1px solid #000000;display:inline-flex}.revieworder-table-container .consignment-number{text-decoration:underline;color:#b61828}.revieworder-table-container .consignment-number:hover,.revieworder-table-container .consignment-number:visited{color:#b61828}::ng-deep .flashing-expand{cursor:pointer}::ng-deep .flashing-expand:after{background:url(../../../../assets/images/expand-icon.svg) no-repeat center;z-index:2;width:24px;content:\"\";height:24px;position:absolute;top:0;right:0}::ng-deep .flashing-expand img{max-height:40px;max-width:40px}::ng-deep .flashing-expand.flashing-open:after{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%0D %3Cg id%3D%22Group_14477%22 data-name%3D%22Group 14477%22 transform%3D%22translate(-5533.5 11452.992)%22%3E%0D %3Cg id%3D%22Group_14476%22 data-name%3D%22Group 14476%22%3E%0D %3Cg id%3D%22Group_14475%22 data-name%3D%22Group 14475%22 transform%3D%22translate(5164.5 -12321.992)%22%3E%0D %3Crect id%3D%22Rectangle_1116%22 data-name%3D%22Rectangle 1116%22 width%3D%2224%22 height%3D%2224%22 transform%3D%22translate(369 869)%22 fill%3D%22%23fff%22%2F%3E%0D %3C%2Fg%3E%0D %3Cpath id%3D%22Path_11366%22 data-name%3D%22Path 11366%22 d%3D%22M142.587%2C65.954v4.569a1.963%2C1.963%2C0%2C0%2C1-1.839%2C2.068H127.833a1.965%2C1.965%2C0%2C0%2C1-1.839-2.068V58.066A1.963%2C1.963%2C0%2C0%2C1%2C127.833%2C56h4.8a.83.83%2C0%2C1%2C1%2C0%2C1.659h-4.505a.516.516%2C0%2C0%2C0-.472.553V70.378a.521.521%2C0%2C0%2C0%2C.472.553h12.33a.516.516%2C0%2C0%2C0%2C.472-.553V65.954a.83.83%2C0%2C1%2C1%2C1.659%2C0Z%22 transform%3D%22translate(5411.209 -11505.287)%22 fill-rule%3D%22evenodd%22%2F%3E%0D %3C%2Fg%3E%0D %3Cpath id%3D%22Path_11367%22 data-name%3D%22Path 11367%22 d%3D%22M26.413%2C4.5H21.5a.607.607%2C0%2C0%2C0-.608.608v.009a.607.607%2C0%2C0%2C0%2C.608.608h3.4l-5.091%2C5.126a.608.608%2C0%2C0%2C0%2C.858.862l5.126-5.1v3.4a.607.607%2C0%2C0%2C0%2C.608.608h.009a.607.607%2C0%2C0%2C0%2C.608-.608V5.108A.607.607%2C0%2C0%2C0%2C26.413%2C4.5Z%22 transform%3D%22translate(5526.775 -11453.789)%22%2F%3E%0D %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}#imageModal.show{display:flex!important;vertical-align:middle!important;align-items:center!important}#imageModal.show .modal-header{justify-content:right;border:none}#imageModal.show .modal-body{vertical-align:middle;margin:0 1rem;overflow:auto;max-height:80vh}#imageModal.show .modal-body img{max-width:100%;max-height:80vh}.flashing-block{background-color:#e8e8e8;padding:12px;border-bottom:1px solid #C6C6C6}.flashing-block .flash-title{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}.flashing-block .skuId{color:#707070;font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif}.flashing-block .gst-text{display:block;font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif}\n"], components: [{ type: i3.MediaComponent, selector: "cx-media", inputs: ["container", "format", "alt", "role", "loading"], outputs: ["loaded"] }, { type: i4.CustomFlashingImageDetailsComponent, selector: "app-custom-flashing-image-details", inputs: ["cartDetails", "forPdf", "appendixNo"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "slice": i5.SlicePipe, "number": i5.DecimalPipe } });
216
216
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderDetailListComponent, decorators: [{
217
217
  type: Component,
218
218
  args: [{
package/esm2015/lib/custom-order-history/custom-order-history.component.js CHANGED
@@ -672,7 +672,7 @@ export class CustomOrderHistoryComponent {
672
672
  }
673
673
  }
674
674
  CustomOrderHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomOrderHistoryComponent, deps: [{ token: i1.CmsService }, { token: i2.OrderHistoryService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
675
- CustomOrderHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomOrderHistoryComponent, selector: "app-custom-order-history", viewQueries: [{ propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true, static: true }, { propertyName: "masonry", first: true, predicate: NgxMasonryComponent, descendants: 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\r\n<div\r\n class=\"container\"\r\n infiniteScroll\r\n [infiniteScrollDistance]=\"0\"\r\n [infiniteScrollThrottle]=\"1000\"\r\n (scrolled)=\"onScroll()\"\r\n (window:resize)=\"onResize($event)\"\r\n>\r\n <ng-container *ngIf=\"dataAvailale == 'hasData'\">\r\n <h1 class=\"pageTitle\">{{ pageTitle }}</h1> \r\n <div \r\n *ngIf=\"orderHistoryHeading\"\r\n class=\"text-left pageParaText mb-5 col-sm-9 pl-0\"\r\n [innerHTML]=\"orderHistoryHeading\"\r\n ></div> \r\n <span 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=\"order-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\r\n value=\"orderNumber\"\r\n [selected]=\"selectedOrderType == 'orderNumber'\"\r\n >\r\n Order #\r\n </option>\r\n <option\r\n value=\"poNumber\"\r\n [selected]=\"selectedOrderType == 'poNumber'\"\r\n >\r\n PO #\r\n </option>\r\n <option\r\n value=\"jobReference\"\r\n [selected]=\"selectedOrderType == 'jobReference'\"\r\n >\r\n Job Ref\r\n </option>\r\n <option\r\n value=\"productCode\"\r\n [selected]=\"selectedOrderType == 'productCode'\"\r\n >\r\n SKU / Item #\r\n </option>\r\n </select>\r\n </div>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchText\"\r\n (input)=\"onSearchChange($event)\"\r\n class=\"form-control\"\r\n (keyup.enter)=\"search()\"\r\n aria-label=\"Text input with dropdown button\"\r\n />\r\n <div class=\"input-group-append\">\r\n <button\r\n type=\"button\"\r\n class=\"btn search-btn\"\r\n [disabled]=\"!isInputValue\"\r\n (click)=\"search()\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-ionic-ios-search.svg\"\r\n alt=\"\"\r\n />\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\r\n class=\"d-flex-mobile\"\r\n [selectedDateRange]=\"selectedDateFilterValue\"\r\n (selectedDate)=\"getSelectedDate($event)\"\r\n [(ngModel)]=\"selectedDateRange\"\r\n ></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\r\n class=\"btn custom-dropdown-btn position-relative\"\r\n type=\"button\"\r\n id=\"orderState\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n >\r\n Order 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 orderStates\">\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStateLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus($event, {\r\n key: 'orderState',\r\n value: data.key,\r\n name: data.value\r\n })\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button\r\n class=\"btn custom-dropdown-btn position-relative\"\r\n type=\"button\"\r\n id=\"deliveryType\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n >\r\n Delivery 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 deliveryTypes\">\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"deliveryTypeLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus($event, {\r\n key: 'deliveryType',\r\n value: data.key,\r\n name: data.value\r\n })\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button\r\n class=\"btn custom-dropdown-btn position-relative\"\r\n type=\"button\"\r\n id=\"orderStatus\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n >\r\n Order 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 orderStatuses\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStatusLabel\"\r\n [value]=\"data.value\"\r\n (change)=\"\r\n checkOrderStatus($event, {\r\n key: 'orderStatuses',\r\n value: data.key,\r\n name: data.value\r\n })\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"chips-block\" *ngIf=\"selectedOrderState.length > 0\">\r\n <ng-container\r\n *ngIf=\"selectedOrderState && selectedOrderState.length > 0\"\r\n >\r\n <div class=\"chips\" *ngFor=\"let data of selectedOrderState\">\r\n <p class=\"chip-title\">\r\n {{\r\n data.key == \"orderStatuses\"\r\n ? \"Order Status\"\r\n : data.key == \"orderState\"\r\n ? \"Order State\"\r\n : data.key == \"orderDate\"\r\n ? \"Order\"\r\n : data.key == \"deliveryDate\"\r\n ? \"Delivery\"\r\n : \"Delivery Type\"\r\n }}\r\n :\r\n </p>\r\n <span class=\"chip-content ml-1\">{{ data.name }}</span>\r\n <i\r\n class=\"fas fa-times-circle ml-3 close-icon\"\r\n (click)=\"removeChips(data)\"\r\n ></i>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-template #filterMobile>\r\n <button\r\n type=\"button\"\r\n class=\"btn dimond-secondary-btn filter-btn\"\r\n data-toggle=\"modal\"\r\n data-target=\"#filterModal\"\r\n >\r\n More Filters\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <hr />\r\n <!-- Filter Modal-->\r\n <div\r\n class=\"modal fade modal-right\"\r\n id=\"filterModal\"\r\n role=\"dialog\"\r\n aria-labelledby=\"inviteMemberLabel\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\"></h5>\r\n <i\r\n class=\"icon-close invite-pop-close\"\r\n (click)=\"clearAll()\"\r\n #closeInviteModal\r\n data-dismiss=\"modal\"\r\n aria-label=\"Close\"\r\n ></i>\r\n </div>\r\n <div class=\"modal-body\">\r\n <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\r\n href=\"javascript:void(0)\"\r\n (click)=\"clearAll()\"\r\n class=\"clearAll\"\r\n >\r\n <u>Clear all</u></a\r\n >\r\n </div>\r\n <div id=\"main\">\r\n <div class=\"container\">\r\n <div class=\"accordion\" id=\"faq\">\r\n <div class=\"card\">\r\n <div class=\"card-header\" id=\"faqhead1\">\r\n <a\r\n href=\"#\"\r\n class=\"btn btn-header-link\"\r\n data-toggle=\"collapse\"\r\n data-target=\"#faq1\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faq1\"\r\n >Order State</a\r\n >\r\n </div>\r\n\r\n <div\r\n id=\"faq1\"\r\n class=\"collapse show\"\r\n aria-labelledby=\"faqhead1\"\r\n data-parent=\"#faq\"\r\n >\r\n <div class=\"card-body\">\r\n <label\r\n class=\"dropdownItem\"\r\n *ngFor=\"let data of orderStates\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStateLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus(\r\n $event,\r\n {\r\n key: 'orderState',\r\n value: data.key,\r\n name: data.value\r\n },\r\n 'mobile'\r\n )\r\n \"\r\n />\r\n {{ data.name }}\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\r\n href=\"#\"\r\n class=\"btn btn-header-link collapsed\"\r\n data-toggle=\"collapse\"\r\n data-target=\"#faq2\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faq2\"\r\n >Delivery Type</a\r\n >\r\n </div>\r\n\r\n <div\r\n id=\"faq2\"\r\n class=\"collapse\"\r\n aria-labelledby=\"faqhead2\"\r\n data-parent=\"#faq\"\r\n >\r\n <div class=\"card-body\">\r\n <label\r\n class=\"dropdownItem\"\r\n *ngFor=\"let data of deliveryTypes\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"deliveryTypeLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus(\r\n $event,\r\n {\r\n key: 'deliveryType',\r\n value: data.key,\r\n name: data.value\r\n },\r\n 'mobile'\r\n )\r\n \"\r\n />\r\n {{ data.name }}\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\r\n href=\"#\"\r\n class=\"btn btn-header-link collapsed\"\r\n data-toggle=\"collapse\"\r\n data-target=\"#faq3\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faq3\"\r\n >Order Status</a\r\n >\r\n </div>\r\n\r\n <div\r\n id=\"faq3\"\r\n class=\"collapse\"\r\n aria-labelledby=\"faqhead3\"\r\n data-parent=\"#faq\"\r\n >\r\n <div class=\"card-body\">\r\n <label\r\n class=\"dropdownItem\"\r\n *ngFor=\"let data of orderStatuses\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStatusLabel\"\r\n [value]=\"data.value\"\r\n (change)=\"\r\n checkOrderStatus(\r\n $event,\r\n {\r\n key: 'orderStatuses',\r\n value: data.key,\r\n name: data.value\r\n },\r\n 'mobile'\r\n )\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"d-lg-flex d-sm-block justify-content-end d-block fixed-bottom\"\r\n >\r\n <button\r\n type=\"button\"\r\n data-dismiss=\"modal\"\r\n (click)=\"clearAll()\"\r\n class=\"btn mobile-cancel-btn dimond-secondary-btn mr-lg-5\"\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n type=\"submit\"\r\n data-dismiss=\"modal\"\r\n class=\"btn mobile-save-btn dimond-primary-btn float-right\"\r\n (click)=\"onSubmit()\"\r\n >\r\n Apply\r\n </button>\r\n </div>\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=\"noSearchResults\">\r\n <div class=\"noResults text-center\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-12 col-md-12 col-12\">\r\n <div\r\n class=\"text-center\"\r\n [innerHTML]=\"\r\n noSearchResultContent\r\n ? noSearchResultContent\r\n : 'No Results Found !'\r\n \"\r\n ></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"order-history-table\" *ngIf=\"orderHistoryLists.length > 0\">\r\n <span class=\"total-order\">{{ totalResults }} {{totalResults == 1 ? 'Order': 'Orders'}} 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\r\n value=\"{{ option.code }}\"\r\n *ngFor=\"let option of orderSortLists\"\r\n >\r\n {{ option.value }}\r\n </option>\r\n </select>\r\n </div>\r\n <!-- future requirement-->\r\n <!-- <div class=\"btn-group\">\r\n <button class=\"btn history-table-dropdown position-relative\" type=\"button\" id=\"orderStatus\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n Optional column\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 optionalColumns\">\r\n <input type=\"checkbox\"\r\n name=\"dropdown-group\" class=\"rounded-0\"\r\n [value]=\"data.value\" />\r\n {{data.name}}\r\n </label>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div>\r\n <div class=\"main-view\" *ngIf=\"isDesktop\">\r\n <button\r\n [ngClass]=\"{ active: listview === false }\"\r\n class=\"btn btn-sm\"\r\n (click)=\"toggleGridOrListView($event)\"\r\n >\r\n <img\r\n *ngIf=\"listview === false\"\r\n src=\"../../../assets/images/Grid-light.svg\"\r\n alt=\"gridviewlight\"\r\n />\r\n <img\r\n *ngIf=\"listview === true\"\r\n src=\"../../../assets/images/Grid-dark.svg\"\r\n alt=\"gridviewdark\"\r\n />\r\n Grid\r\n </button>\r\n <button\r\n [ngClass]=\"{ active: listview === true }\"\r\n class=\"btn btn-sm active\"\r\n (click)=\"toggleGridOrListView($event)\"\r\n >\r\n <img\r\n *ngIf=\"listview === true\"\r\n class=\"list-img\"\r\n src=\"../../../assets/images/List-light.svg\"\r\n alt=\"listview\"\r\n />\r\n <img\r\n *ngIf=\"listview === false\"\r\n class=\"list-img\"\r\n src=\"../../../assets/images/List-dark.svg\"\r\n alt=\"listview\"\r\n />\r\n List\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ORDER HISTORY LIST -->\r\n <div\r\n class=\"list-view table-responsive\"\r\n *ngIf=\"listview && isDesktop && orderHistoryLists.length > 0\"\r\n >\r\n <table class=\"table order-list-table\">\r\n <thead>\r\n <tr>\r\n <th scope=\"col\">\r\n Order #\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ orderTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Po #\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ poTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Order Date\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ orderDateTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Delivery Type\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ deliveryTypeTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <!-- future requirement-->\r\n <!-- <th scope=\"col\">\r\n Delivery Dates\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ deliveryDateTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th> -->\r\n <th scope=\"col\">\r\n Delivery Address\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ deliveryAddressTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Total Price \r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ totalPriceTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n <br />\r\n <span class=\"gst-text\">excl GST</span>\r\n \r\n </th>\r\n <th scope=\"col\">\r\n Status\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ statusTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let orders of orderHistoryLists\">\r\n <td\r\n (contextmenu)=\"onRightClick($event, orders.code)\"\r\n style=\"padding-bottom: 20px\"\r\n [id]=\"'id-' + orders.code\"\r\n >\r\n <a\r\n href=\"javascript:void(0)\"\r\n (click)=\"orderNumberClicked(orders.code, false)\"\r\n >{{ orders?.code }}</a\r\n >\r\n </td>\r\n <td>{{ orders?.purchaseOrderNumber }}</td>\r\n <td>{{ orders?.placed | date : \"dd/MM/yyyy\" }}</td>\r\n <td>{{ orders?.deliveryMode?.name }}</td>\r\n <!-- future requirement-->\r\n <!-- <td>\r\n <ng-container *ngIf=\"orders?.isSameDate; else notMatch\">\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-container>\r\n <ng-template #notMatch>\r\n {{ orders?.minDeliveryDate | date : \"dd/MM/yyyy\" }} -\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-template>\r\n </td> -->\r\n <td class=\"ellipsis\">\r\n {{ orders?.deliveryAddress?.formattedAddress }}\r\n </td>\r\n <td class=\"price-bold\">{{ orders?.subTotal?.formattedValue }} </td>\r\n <td>\r\n <app-slider-progress [sliderData]=\"orders\"></app-slider-progress>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!-- ORDER HISTORY GRID -->\r\n <ngx-masonry \r\n class=\"row grid-view \"\r\n *ngIf=\"(!listview || !isDesktop) && orderHistoryLists.length > 0\"\r\n >\r\n <div\r\n ngxMasonryItem\r\n class=\"col-lg-3 col-md-6 col-sm-12 col-12\"\r\n *ngFor=\"let orders of orderHistoryLists\"\r\n >\r\n <div class=\"grid-tile\">\r\n <div class=\"grid-top\">\r\n <table>\r\n <tr>\r\n <th>Order #:</th>\r\n <td\r\n (contextmenu)=\"onRightClick($event, orders.code)\"\r\n [id]=\"'id-' + orders.code\"\r\n >\r\n <a href=\"javascript:void(0)\" (click)=\"orderNumberClicked(orders.code, false)\">{{\r\n orders?.code\r\n }}</a>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>PO #:</th>\r\n <td>{{ orders?.purchaseOrderNumber }}</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>Delivery Type:</th>\r\n <td>{{ orders?.deliveryMode?.name }}</td>\r\n </tr>\r\n <!-- future requirement-->\r\n <!-- <tr>\r\n <th>Delivery Dates:</th>\r\n <td>\r\n <ng-container *ngIf=\"orders?.isSameDate; else notMatch\">\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-container>\r\n <ng-template #notMatch>\r\n {{ orders?.minDeliveryDate | date : \"dd/MM/yyyy\" }} -\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-template>\r\n <span\r\n *ngIf=\"!isMobile\"\r\n class=\"info-icon d-inline-block ml-2\"\r\n ngbTooltip=\"Status Information\"\r\n placement=\"bottom\"\r\n ></span>\r\n </td>\r\n </tr> -->\r\n <tr>\r\n <th>Order Date:</th>\r\n <td>{{ orders?.placed | customDatePipe : \"dd/MM/yy\" }}</td>\r\n </tr>\r\n <tr>\r\n <th>Address:</th>\r\n <td>{{ orders?.deliveryAddress?.formattedAddress }}</td>\r\n </tr>\r\n <tr>\r\n <th>Total Price:</th>\r\n <td class=\"price-bold\">\r\n {{ orders?.total?.formattedValue }}\r\n <span class=\"gst-text\">excl GST</span>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n <div class=\"grid-bottom\">\r\n <p>\r\n Status:\r\n <span\r\n *ngIf=\"!isMobile\"\r\n class=\"info-icon d-inline-block ml-2\"\r\n ngbTooltip=\"Status Information\"\r\n placement=\"bottom\"\r\n ></span>\r\n </p>\r\n <div\r\n class=\"pb-3 mb-3\"\r\n [ngClass]=\"{ 'pt-4 mt-4': orders?.maxLineStatus }\"\r\n >\r\n <app-slider-progress [sliderData]=\"orders\"></app-slider-progress>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ngx-masonry>\r\n </ng-container>\r\n <div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left.px]=\"menuTopLeftPosition.x\"\r\n [style.top.px]=\"menuTopLeftPosition.y\"\r\n [matMenuTriggerFor]=\"rightMenu\"\r\n ></div>\r\n\r\n <mat-menu #rightMenu=\"matMenu\">\r\n <div matMenuContent *ngFor=\"let item of items\">\r\n <button (click)=\"orderNumberClicked(item, true)\" mat-menu-item>\r\n Open Order in new tab\r\n </button>\r\n </div>\r\n </mat-menu>\r\n <ng-container *ngIf=\"loaderImage | async\">\r\n <div class=\"col-sm-12 mx-auto text-center mb-4\">\r\n <span class=\"product-loader\">\r\n <i class=\"loader-icon fas fa-spinner fa-pulse\"></i>\r\n <span class=\"loader-text\">loading\u2026.</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- NO ORDER HISTORY -->\r\n <ng-container *ngIf=\"dataAvailale == 'noData'\">\r\n <div class=\"row empty-orderpage-container\">\r\n <div class=\"col-sm-12 col-md-10 col-lg-10 m-auto\">\r\n <div class=\"text-center\" [innerHTML]=\"noOrderHistoryData\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}#visualization-container{text-align:center;margin:0 auto}#cds-viewer-container-3d{width:320px;height:200px}#cds-viewer-container-2d{width:320px;height:200px}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}*{scroll-margin-top:144px}::ng-deep cx-page-layout.AccountPageTemplate cx-page-slot{max-width:100%!important;padding:0}::ng-deep cx-page-layout.AccountPageTemplate .order-search-block{background-color:#fff;border:1px solid #E0E0E0;padding:35px 30px}::ng-deep cx-page-layout.AccountPageTemplate .order-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 .order-search-block .search-btn{background-color:#000;color:#fff;border-radius:0}::ng-deep cx-page-layout.AccountPageTemplate .order-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-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;margin-right:30px;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:200px;top:42px;height:auto;cursor:pointer;border:none}::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 .filter-block .chips-block{margin-top:40px}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .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 .filter-block .chips-block .chips .chip-title{display:inline;font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .chips-block .chips .chip-content{font-family:\"Arial Regular\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .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 .order-history-table{margin-top:1.25rem}::ng-deep cx-page-layout.AccountPageTemplate .order-history-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 .order-history-table .dropdown-menu{margin-top:0!important;width:calc(100% - 30px)}::ng-deep cx-page-layout.AccountPageTemplate .order-history-table .total-order{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .order-history-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 .order-history-table .history-table-dropdown .custom-arrow-down{float:right}::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-bottom{background-color:#fff;padding:15px}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile .grid-bottom p{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif;margin-bottom:20px}::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 .list-view{overflow-x:hidden}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table thead{background-color:#646363;height:60px}::ng-deep cx-page-layout.AccountPageTemplate .order-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;position:relative;padding-bottom:1.5rem}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table thead th span{position:absolute}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody tr{background-color:#fff}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody tr.selectedOrder{background-color:#f6f6f6}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody tr:hover{background-color:#f6f6f6}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody td a{color:#b61828;text-decoration:underline}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody td:last-child{min-width:220px;padding:40px 20px}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;width:200px}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody .price-bold{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table .gst-text{font-size:var(--fontsize12);text-transform:none}.status-text{font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.noResults{margin:5rem auto}.noResults h3{margin-top:1.5rem;font-size:var(--fontsize28);font-family:\"Arial Regular\",sans-serif}.empty-orderpage-container{margin:10rem auto}::ng-deep .ngx-slider{margin:0!important;pointer-events:none;height:30px!important}::ng-deep .ngx-slider .ngx-slider-bar{height:7px;background:#A6A6A5!important}::ng-deep .ngx-slider .ngx-slider-tick{width:5px;height:5px;top:3px}::ng-deep .ngx-slider .ngx-slider-selected{background-color:#646363!important}::ng-deep .ngx-slider .ngx-slider-pointer{position:relative;width:30px;height:30px}::ng-deep .ngx-slider .ngx-slider-pointer:after{display:none}::ng-deep .ngx-slider .ngx-slider-inner-tooltip{display:none}::ng-deep .ngx-slider .ngx-slider-tick-legend{display:none!important;white-space:nowrap!important}#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:absolute;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}#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;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){.order-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:175px!important}}@media screen and (min-width: 767px){#filterModal .modal-dialog{position:fixed;width:100%;max-width:500px!important;min-width:500px!important;margin-top:0;right:0px;padding-bottom:2rem}}@media screen and (max-width: 768px){.order-search-block{background-color:transparent!important;border:none!important;padding:10px 0!important}.order-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 .d-flex-mobile{display:flex;align-items:center}::ng-deep .filter-block .ngx-daterangepicker-action{margin-right:0!important}::ng-deep .filter-block .custom-date-input .date-icon{position:absolute!important;left:175px!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}.input-group-prepend select{height:48px}.order-history-table .history-table-dropdown{width:160px}::ng-deep .fx-date-range-container .md-drppicker.shown{width:100%!important;left:0px!important}::ng-deep .fx-date-range-container .md-drppicker.shown .calendar{max-width:100%}::ng-deep .fx-date-range-container .md-drppicker.shown .btn{width:calc(100% - 15px)!important}::ng-deep .fx-date-range-container .md-drppicker.shown .btn-default{width:calc(100% - 15px)!important;border:1px solid #1D1D1B;margin-right:0!important}#main{margin:.75rem 0}#main .container{padding:0}#main #faq .card{margin-bottom:0}#main #faq .card .btn-header-link{padding-left:0}.grid-bottom p{text-align:center}}@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: i3.CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { type: i4.DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["selectedDateRange"], outputs: ["selectedDate"] }, { type: i5.SliderProgressComponent, selector: "app-slider-progress", inputs: ["sliderData"] }, { type: i6.NgxMasonryComponent, selector: "[ngx-masonry], ngx-masonry", inputs: ["updateLayout", "ordered", "options"], outputs: ["layoutComplete", "removeComplete", "itemsLoaded"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i10.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i10.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgxMasonryDirective, selector: "[ngxMasonryItem], ngxMasonryItem", inputs: ["prepend"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "async": i8.AsyncPipe, "date": i8.DatePipe, "customDatePipe": i12.CustomDatePipe } });
675
+ CustomOrderHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomOrderHistoryComponent, selector: "app-custom-order-history", viewQueries: [{ propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true, static: true }, { propertyName: "masonry", first: true, predicate: NgxMasonryComponent, descendants: 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\r\n<div\r\n class=\"container\"\r\n infiniteScroll\r\n [infiniteScrollDistance]=\"0\"\r\n [infiniteScrollThrottle]=\"1000\"\r\n (scrolled)=\"onScroll()\"\r\n (window:resize)=\"onResize($event)\"\r\n>\r\n <ng-container *ngIf=\"dataAvailale == 'hasData'\">\r\n <h1 class=\"pageTitle\">{{ pageTitle }}</h1> \r\n <div \r\n *ngIf=\"orderHistoryHeading\"\r\n class=\"text-left pageParaText mb-5 col-sm-9 pl-0\"\r\n [innerHTML]=\"orderHistoryHeading\"\r\n ></div> \r\n <span 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=\"order-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\r\n value=\"orderNumber\"\r\n [selected]=\"selectedOrderType == 'orderNumber'\"\r\n >\r\n Order #\r\n </option>\r\n <option\r\n value=\"poNumber\"\r\n [selected]=\"selectedOrderType == 'poNumber'\"\r\n >\r\n PO #\r\n </option>\r\n <option\r\n value=\"jobReference\"\r\n [selected]=\"selectedOrderType == 'jobReference'\"\r\n >\r\n Job Ref\r\n </option>\r\n <option\r\n value=\"productCode\"\r\n [selected]=\"selectedOrderType == 'productCode'\"\r\n >\r\n SKU / Item #\r\n </option>\r\n </select>\r\n </div>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchText\"\r\n (input)=\"onSearchChange($event)\"\r\n class=\"form-control\"\r\n (keyup.enter)=\"search()\"\r\n aria-label=\"Text input with dropdown button\"\r\n />\r\n <div class=\"input-group-append\">\r\n <button\r\n type=\"button\"\r\n class=\"btn search-btn\"\r\n [disabled]=\"!isInputValue\"\r\n (click)=\"search()\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-ionic-ios-search.svg\"\r\n alt=\"\"\r\n />\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\r\n class=\"d-flex-mobile\"\r\n [selectedDateRange]=\"selectedDateFilterValue\"\r\n (selectedDate)=\"getSelectedDate($event)\"\r\n [(ngModel)]=\"selectedDateRange\"\r\n ></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\r\n class=\"btn custom-dropdown-btn position-relative\"\r\n type=\"button\"\r\n id=\"orderState\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n >\r\n Order 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 orderStates\">\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStateLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus($event, {\r\n key: 'orderState',\r\n value: data.key,\r\n name: data.value\r\n })\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button\r\n class=\"btn custom-dropdown-btn position-relative\"\r\n type=\"button\"\r\n id=\"deliveryType\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n >\r\n Delivery 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 deliveryTypes\">\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"deliveryTypeLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus($event, {\r\n key: 'deliveryType',\r\n value: data.key,\r\n name: data.value\r\n })\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button\r\n class=\"btn custom-dropdown-btn position-relative\"\r\n type=\"button\"\r\n id=\"orderStatus\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n >\r\n Order 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 orderStatuses\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStatusLabel\"\r\n [value]=\"data.value\"\r\n (change)=\"\r\n checkOrderStatus($event, {\r\n key: 'orderStatuses',\r\n value: data.key,\r\n name: data.value\r\n })\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"chips-block\" *ngIf=\"selectedOrderState.length > 0\">\r\n <ng-container\r\n *ngIf=\"selectedOrderState && selectedOrderState.length > 0\"\r\n >\r\n <div class=\"chips\" *ngFor=\"let data of selectedOrderState\">\r\n <p class=\"chip-title\">\r\n {{\r\n data.key == \"orderStatuses\"\r\n ? \"Order Status\"\r\n : data.key == \"orderState\"\r\n ? \"Order State\"\r\n : data.key == \"orderDate\"\r\n ? \"Order\"\r\n : data.key == \"deliveryDate\"\r\n ? \"Delivery\"\r\n : \"Delivery Type\"\r\n }}\r\n :\r\n </p>\r\n <span class=\"chip-content ml-1\">{{ data.name }}</span>\r\n <i\r\n class=\"fas fa-times-circle ml-3 close-icon\"\r\n (click)=\"removeChips(data)\"\r\n ></i>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-template #filterMobile>\r\n <button\r\n type=\"button\"\r\n class=\"btn dimond-secondary-btn filter-btn\"\r\n data-toggle=\"modal\"\r\n data-target=\"#filterModal\"\r\n >\r\n More Filters\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <hr />\r\n <!-- Filter Modal-->\r\n <div\r\n class=\"modal fade modal-right\"\r\n id=\"filterModal\"\r\n role=\"dialog\"\r\n aria-labelledby=\"inviteMemberLabel\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\"></h5>\r\n <i\r\n class=\"icon-close invite-pop-close\"\r\n (click)=\"clearAll()\"\r\n #closeInviteModal\r\n data-dismiss=\"modal\"\r\n aria-label=\"Close\"\r\n ></i>\r\n </div>\r\n <div class=\"modal-body\">\r\n <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\r\n href=\"javascript:void(0)\"\r\n (click)=\"clearAll()\"\r\n class=\"clearAll\"\r\n >\r\n <u>Clear all</u></a\r\n >\r\n </div>\r\n <div id=\"main\">\r\n <div class=\"container\">\r\n <div class=\"accordion\" id=\"faq\">\r\n <div class=\"card\">\r\n <div class=\"card-header\" id=\"faqhead1\">\r\n <a\r\n href=\"#\"\r\n class=\"btn btn-header-link\"\r\n data-toggle=\"collapse\"\r\n data-target=\"#faq1\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faq1\"\r\n >Order State</a\r\n >\r\n </div>\r\n\r\n <div\r\n id=\"faq1\"\r\n class=\"collapse show\"\r\n aria-labelledby=\"faqhead1\"\r\n data-parent=\"#faq\"\r\n >\r\n <div class=\"card-body\">\r\n <label\r\n class=\"dropdownItem\"\r\n *ngFor=\"let data of orderStates\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStateLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus(\r\n $event,\r\n {\r\n key: 'orderState',\r\n value: data.key,\r\n name: data.value\r\n },\r\n 'mobile'\r\n )\r\n \"\r\n />\r\n {{ data.name }}\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\r\n href=\"#\"\r\n class=\"btn btn-header-link collapsed\"\r\n data-toggle=\"collapse\"\r\n data-target=\"#faq2\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faq2\"\r\n >Delivery Type</a\r\n >\r\n </div>\r\n\r\n <div\r\n id=\"faq2\"\r\n class=\"collapse\"\r\n aria-labelledby=\"faqhead2\"\r\n data-parent=\"#faq\"\r\n >\r\n <div class=\"card-body\">\r\n <label\r\n class=\"dropdownItem\"\r\n *ngFor=\"let data of deliveryTypes\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"deliveryTypeLabel\"\r\n [value]=\"data.value\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n (change)=\"\r\n checkOrderStatus(\r\n $event,\r\n {\r\n key: 'deliveryType',\r\n value: data.key,\r\n name: data.value\r\n },\r\n 'mobile'\r\n )\r\n \"\r\n />\r\n {{ data.name }}\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\r\n href=\"#\"\r\n class=\"btn btn-header-link collapsed\"\r\n data-toggle=\"collapse\"\r\n data-target=\"#faq3\"\r\n aria-expanded=\"true\"\r\n aria-controls=\"faq3\"\r\n >Order Status</a\r\n >\r\n </div>\r\n\r\n <div\r\n id=\"faq3\"\r\n class=\"collapse\"\r\n aria-labelledby=\"faqhead3\"\r\n data-parent=\"#faq\"\r\n >\r\n <div class=\"card-body\">\r\n <label\r\n class=\"dropdownItem\"\r\n *ngFor=\"let data of orderStatuses\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckedOrderStatuses(data)\"\r\n name=\"dropdown-group\"\r\n class=\"rounded-0\"\r\n id=\"orderStatusLabel\"\r\n [value]=\"data.value\"\r\n (change)=\"\r\n checkOrderStatus(\r\n $event,\r\n {\r\n key: 'orderStatuses',\r\n value: data.key,\r\n name: data.value\r\n },\r\n 'mobile'\r\n )\r\n \"\r\n />\r\n {{ data.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"d-lg-flex d-sm-block justify-content-end d-block fixed-bottom\"\r\n >\r\n <button\r\n type=\"button\"\r\n data-dismiss=\"modal\"\r\n (click)=\"clearAll()\"\r\n class=\"btn mobile-cancel-btn dimond-secondary-btn mr-lg-5\"\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n type=\"submit\"\r\n data-dismiss=\"modal\"\r\n class=\"btn mobile-save-btn dimond-primary-btn float-right\"\r\n (click)=\"onSubmit()\"\r\n >\r\n Apply\r\n </button>\r\n </div>\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=\"noSearchResults\">\r\n <div class=\"noResults text-center\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-12 col-md-12 col-12\">\r\n <div\r\n class=\"text-center\"\r\n [innerHTML]=\"\r\n noSearchResultContent\r\n ? noSearchResultContent\r\n : 'No Results Found !'\r\n \"\r\n ></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"order-history-table\" *ngIf=\"orderHistoryLists.length > 0\">\r\n <span class=\"total-order\">{{ totalResults }} {{totalResults == 1 ? 'Order': 'Orders'}} 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\r\n value=\"{{ option.code }}\"\r\n *ngFor=\"let option of orderSortLists\"\r\n >\r\n {{ option.value }}\r\n </option>\r\n </select>\r\n </div>\r\n <!-- future requirement-->\r\n <!-- <div class=\"btn-group\">\r\n <button class=\"btn history-table-dropdown position-relative\" type=\"button\" id=\"orderStatus\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n Optional column\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 optionalColumns\">\r\n <input type=\"checkbox\"\r\n name=\"dropdown-group\" class=\"rounded-0\"\r\n [value]=\"data.value\" />\r\n {{data.name}}\r\n </label>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div>\r\n <div class=\"main-view\" *ngIf=\"isDesktop\">\r\n <button\r\n [ngClass]=\"{ active: listview === false }\"\r\n class=\"btn btn-sm\"\r\n (click)=\"toggleGridOrListView($event)\"\r\n >\r\n <img\r\n *ngIf=\"listview === false\"\r\n src=\"../../../assets/images/Grid-light.svg\"\r\n alt=\"gridviewlight\"\r\n />\r\n <img\r\n *ngIf=\"listview === true\"\r\n src=\"../../../assets/images/Grid-dark.svg\"\r\n alt=\"gridviewdark\"\r\n />\r\n Grid\r\n </button>\r\n <button\r\n [ngClass]=\"{ active: listview === true }\"\r\n class=\"btn btn-sm active\"\r\n (click)=\"toggleGridOrListView($event)\"\r\n >\r\n <img\r\n *ngIf=\"listview === true\"\r\n class=\"list-img\"\r\n src=\"../../../assets/images/List-light.svg\"\r\n alt=\"listview\"\r\n />\r\n <img\r\n *ngIf=\"listview === false\"\r\n class=\"list-img\"\r\n src=\"../../../assets/images/List-dark.svg\"\r\n alt=\"listview\"\r\n />\r\n List\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ORDER HISTORY LIST -->\r\n <div\r\n class=\"list-view table-responsive\"\r\n *ngIf=\"listview && isDesktop && orderHistoryLists.length > 0\"\r\n >\r\n <table class=\"table order-list-table\">\r\n <thead>\r\n <tr>\r\n <th scope=\"col\">\r\n Order #\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ orderTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Po #\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ poTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Order Date\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ orderDateTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Delivery Type\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ deliveryTypeTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <!-- future requirement-->\r\n <!-- <th scope=\"col\">\r\n Delivery Dates\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ deliveryDateTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th> -->\r\n <th scope=\"col\">\r\n Delivery Address\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ deliveryAddressTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n <th scope=\"col\">\r\n Total Price \r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ totalPriceTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n <br />\r\n <span class=\"gst-text\">excl GST</span>\r\n \r\n </th>\r\n <th scope=\"col\">\r\n Status\r\n <span\r\n class=\"d-inline-block ml-2\"\r\n ngbTooltip=\"{{ statusTooltipContent }}\"\r\n placement=\"bottom\"\r\n >\r\n <img\r\n src=\"../../../assets/images/icon-metro-info.svg\"\r\n alt=\"info-icon\"\r\n />\r\n </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let orders of orderHistoryLists\">\r\n <td\r\n (contextmenu)=\"onRightClick($event, orders.code)\"\r\n style=\"padding-bottom: 20px\"\r\n [id]=\"'id-' + orders.code\"\r\n >\r\n <a\r\n href=\"javascript:void(0)\"\r\n (click)=\"orderNumberClicked(orders.code, false)\"\r\n >{{ orders?.code }}</a\r\n >\r\n </td>\r\n <td>{{ orders?.purchaseOrderNumber }}</td>\r\n <td>{{ orders?.placed | date : \"dd/MM/yyyy\" }}</td>\r\n <td>{{ orders?.deliveryMode?.name }}</td>\r\n <!-- future requirement-->\r\n <!-- <td>\r\n <ng-container *ngIf=\"orders?.isSameDate; else notMatch\">\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-container>\r\n <ng-template #notMatch>\r\n {{ orders?.minDeliveryDate | date : \"dd/MM/yyyy\" }} -\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-template>\r\n </td> -->\r\n <td class=\"ellipsis\">\r\n {{ orders?.deliveryAddress?.formattedAddress }}\r\n </td>\r\n <td class=\"price-bold\">{{ orders?.subTotal?.formattedValue }} </td>\r\n <td>\r\n <app-slider-progress [sliderData]=\"orders\"></app-slider-progress>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!-- ORDER HISTORY GRID -->\r\n <ngx-masonry \r\n class=\"row grid-view \"\r\n *ngIf=\"(!listview || !isDesktop) && orderHistoryLists.length > 0\"\r\n >\r\n <div\r\n ngxMasonryItem\r\n class=\"col-lg-3 col-md-6 col-sm-12 col-12\"\r\n *ngFor=\"let orders of orderHistoryLists\"\r\n >\r\n <div class=\"grid-tile\">\r\n <div class=\"grid-top\">\r\n <table>\r\n <tr>\r\n <th>Order #:</th>\r\n <td\r\n (contextmenu)=\"onRightClick($event, orders.code)\"\r\n [id]=\"'id-' + orders.code\"\r\n >\r\n <a href=\"javascript:void(0)\" (click)=\"orderNumberClicked(orders.code, false)\">{{\r\n orders?.code\r\n }}</a>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>PO #:</th>\r\n <td>{{ orders?.purchaseOrderNumber }}</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>Delivery Type:</th>\r\n <td>{{ orders?.deliveryMode?.name }}</td>\r\n </tr>\r\n <!-- future requirement-->\r\n <!-- <tr>\r\n <th>Delivery Dates:</th>\r\n <td>\r\n <ng-container *ngIf=\"orders?.isSameDate; else notMatch\">\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-container>\r\n <ng-template #notMatch>\r\n {{ orders?.minDeliveryDate | date : \"dd/MM/yyyy\" }} -\r\n {{ orders?.maxDeliveryDate | date : \"dd/MM/yyyy\" }}\r\n </ng-template>\r\n <span\r\n *ngIf=\"!isMobile\"\r\n class=\"info-icon d-inline-block ml-2\"\r\n ngbTooltip=\"Status Information\"\r\n placement=\"bottom\"\r\n ></span>\r\n </td>\r\n </tr> -->\r\n <tr>\r\n <th>Order Date:</th>\r\n <td>{{ orders?.placed | customDatePipe : \"dd/MM/yy\" }}</td>\r\n </tr>\r\n <tr>\r\n <th>Address:</th>\r\n <td>{{ orders?.deliveryAddress?.formattedAddress }}</td>\r\n </tr>\r\n <tr>\r\n <th>Total Price:</th>\r\n <td class=\"price-bold\">\r\n {{ orders?.total?.formattedValue }}\r\n <span class=\"gst-text\">excl GST</span>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n <div class=\"grid-bottom\">\r\n <p>\r\n Status:\r\n <span\r\n *ngIf=\"!isMobile\"\r\n class=\"info-icon d-inline-block ml-2\"\r\n ngbTooltip=\"Status Information\"\r\n placement=\"bottom\"\r\n ></span>\r\n </p>\r\n <div\r\n class=\"pb-3 mb-3\"\r\n [ngClass]=\"{ 'pt-4 mt-4': orders?.maxLineStatus }\"\r\n >\r\n <app-slider-progress [sliderData]=\"orders\"></app-slider-progress>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ngx-masonry>\r\n </ng-container>\r\n <div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left.px]=\"menuTopLeftPosition.x\"\r\n [style.top.px]=\"menuTopLeftPosition.y\"\r\n [matMenuTriggerFor]=\"rightMenu\"\r\n ></div>\r\n\r\n <mat-menu #rightMenu=\"matMenu\">\r\n <div matMenuContent *ngFor=\"let item of items\">\r\n <button (click)=\"orderNumberClicked(item, true)\" mat-menu-item>\r\n Open Order in new tab\r\n </button>\r\n </div>\r\n </mat-menu>\r\n <ng-container *ngIf=\"loaderImage | async\">\r\n <div class=\"col-sm-12 mx-auto text-center mb-4\">\r\n <span class=\"product-loader\">\r\n <i class=\"loader-icon fas fa-spinner fa-pulse\"></i>\r\n <span class=\"loader-text\">loading\u2026.</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- NO ORDER HISTORY -->\r\n <ng-container *ngIf=\"dataAvailale == 'noData'\">\r\n <div class=\"row empty-orderpage-container\">\r\n <div class=\"col-sm-12 col-md-10 col-lg-10 m-auto\">\r\n <div class=\"text-center\" [innerHTML]=\"noOrderHistoryData\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}.helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}.helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}.helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}.helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}.helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}.helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}.helpSupport .contact-us-info a{color:#fff;text-decoration:none}.helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}cx-global-message{position:fixed;top:9rem;width:100%;z-index:13}@media screen and (max-width: 991px){cx-global-message{top:3.75rem}cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0;position:relative}cx-storefront header.is-expanded .PreHeader{position:absolute;right:-5px;top:5px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;bottom:110px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{bottom:160px;max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}.pageTitle{font-size:28px}}*{scroll-margin-top:144px}::ng-deep cx-page-layout.AccountPageTemplate cx-page-slot{max-width:100%!important;padding:0}::ng-deep cx-page-layout.AccountPageTemplate .order-search-block{background-color:#fff;border:1px solid #E0E0E0;padding:35px 30px}::ng-deep cx-page-layout.AccountPageTemplate .order-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 .order-search-block .search-btn{background-color:#000;color:#fff;border-radius:0}::ng-deep cx-page-layout.AccountPageTemplate .order-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-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;margin-right:30px;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:200px;top:42px;height:auto;cursor:pointer;border:none}::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 .filter-block .chips-block{margin-top:40px}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .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 .filter-block .chips-block .chips .chip-title{display:inline;font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .chips-block .chips .chip-content{font-family:\"Arial Regular\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .filter-block .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 .order-history-table{margin-top:1.25rem}::ng-deep cx-page-layout.AccountPageTemplate .order-history-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 .order-history-table .dropdown-menu{margin-top:0!important;width:calc(100% - 30px)}::ng-deep cx-page-layout.AccountPageTemplate .order-history-table .total-order{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .order-history-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 .order-history-table .history-table-dropdown .custom-arrow-down{float:right}::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-bottom{background-color:#fff;padding:15px}::ng-deep cx-page-layout.AccountPageTemplate .grid-view .grid-tile .grid-bottom p{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif;margin-bottom:20px}::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 .list-view{overflow-x:hidden}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table thead{background-color:#646363;height:60px}::ng-deep cx-page-layout.AccountPageTemplate .order-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;position:relative;padding-bottom:1.5rem}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table thead th span{position:absolute}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody tr{background-color:#fff}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody tr.selectedOrder{background-color:#f6f6f6}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody tr:hover{background-color:#f6f6f6}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody td a{color:#b61828;text-decoration:underline}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody td:last-child{min-width:220px;padding:40px 20px}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;width:200px}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table tbody .price-bold{font-size:var(--fontsize16);font-family:\"Arial Bold\",sans-serif}::ng-deep cx-page-layout.AccountPageTemplate .order-list-table .gst-text{font-size:var(--fontsize12);text-transform:none}.status-text{font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.noResults{margin:5rem auto}.noResults h3{margin-top:1.5rem;font-size:var(--fontsize28);font-family:\"Arial Regular\",sans-serif}.empty-orderpage-container{margin:10rem auto}::ng-deep .ngx-slider{margin:0!important;pointer-events:none;height:30px!important}::ng-deep .ngx-slider .ngx-slider-bar{height:7px;background:#A6A6A5!important}::ng-deep .ngx-slider .ngx-slider-tick{width:5px;height:5px;top:3px}::ng-deep .ngx-slider .ngx-slider-selected{background-color:#646363!important}::ng-deep .ngx-slider .ngx-slider-pointer{position:relative;width:30px;height:30px}::ng-deep .ngx-slider .ngx-slider-pointer:after{display:none}::ng-deep .ngx-slider .ngx-slider-inner-tooltip{display:none}::ng-deep .ngx-slider .ngx-slider-tick-legend{display:none!important;white-space:nowrap!important}#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:absolute;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}#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;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){.order-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:175px!important}}@media screen and (min-width: 767px){#filterModal .modal-dialog{position:fixed;width:100%;max-width:500px!important;min-width:500px!important;margin-top:0;right:0px;padding-bottom:2rem}}@media screen and (max-width: 768px){.order-search-block{background-color:transparent!important;border:none!important;padding:10px 0!important}.order-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 .d-flex-mobile{display:flex;align-items:center}::ng-deep .filter-block .ngx-daterangepicker-action{margin-right:0!important}::ng-deep .filter-block .custom-date-input .date-icon{position:absolute!important;left:175px!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}.input-group-prepend select{height:48px}.order-history-table .history-table-dropdown{width:160px}::ng-deep .fx-date-range-container .md-drppicker.shown{width:100%!important;left:0px!important}::ng-deep .fx-date-range-container .md-drppicker.shown .calendar{max-width:100%}::ng-deep .fx-date-range-container .md-drppicker.shown .btn{width:calc(100% - 15px)!important}::ng-deep .fx-date-range-container .md-drppicker.shown .btn-default{width:calc(100% - 15px)!important;border:1px solid #1D1D1B;margin-right:0!important}#main{margin:.75rem 0}#main .container{padding:0}#main #faq .card{margin-bottom:0}#main #faq .card .btn-header-link{padding-left:0}.grid-bottom p{text-align:center}}@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: i3.CustomBreadcrumComponent, selector: "app-custom-breadcrum", inputs: ["customCrumbData"] }, { type: i4.DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["selectedDateRange"], outputs: ["selectedDate"] }, { type: i5.SliderProgressComponent, selector: "app-slider-progress", inputs: ["sliderData"] }, { type: i6.NgxMasonryComponent, selector: "[ngx-masonry], ngx-masonry", inputs: ["updateLayout", "ordered", "options"], outputs: ["layoutComplete", "removeComplete", "itemsLoaded"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i10.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i10.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgxMasonryDirective, selector: "[ngxMasonryItem], ngxMasonryItem", inputs: ["prepend"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "async": i8.AsyncPipe, "date": i8.DatePipe, "customDatePipe": i12.CustomDatePipe } });
676
676
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomOrderHistoryComponent, decorators: [{
677
677
  type: Component,
678
678
  args: [{