import { __rest } from "tslib";
import { Component, ViewChild, Input, Output, EventEmitter, } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { FormGroup } from '@angular/forms';
import { AccessoriesQuantity, ProductQuantity } from '../../CustomProduct';
import { RegexValidator, RegexConstants } from '../../regEx.validator';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../../../services/cart.service";
import * as i3 from "@spartacus/core";
import * as i4 from "@spartacus/storefront";
import * as i5 from "@angular/common";
import * as i6 from "@ng-bootstrap/ng-bootstrap";
export class CustomProductQuantityFormComponent {
    constructor(formBuilder, cdr, cartService, activeCartService, currentProductService) {
        this.formBuilder = formBuilder;
        this.cdr = cdr;
        this.cartService = cartService;
        this.activeCartService = activeCartService;
        this.currentProductService = currentProductService;
        this.env = sessionStorage.getItem('env');
        this.environment = JSON.parse(this.env);
        this.isDesktop = true;
        this.isMobile = false;
        this.isTablet = false;
        this.totalPrice = '0.0';
        this.hasBundle = false;
        this.unitType = 'per LM';
        this.accessoriesPrice = 0;
        this.selectedColour = null;
        this.isFinishedProduct = false;
        this.isFlashingProduct = false;
        this.listView = true;
        this.productForm = new FormGroup({});
        this.disableAddMore = false;
        this.bundleList = [];
        this.errorIndex = [];
        this.hasProdRefIndex = [];
        this.hasProdRef = false;
        this.hasMinlengthError = [];
        this.rowIndex = 0;
        this.showWaitCursor = new BehaviorSubject(true);
        this.addToCartError = null;
        this.modalBundleForm = new FormGroup({});
        this.editProdBundle = '';
        this.editProdRef = '';
        this.selectedIndex = null;
        this.hasData = false;
        this.product$ = this.currentProductService.getProduct();
        this.updateCartEntires = new EventEmitter();
    }
    ngOnInit() {
        var _a;
        const cartObj = localStorage.getItem('spartacus⚿dimond-spa⚿cart');
        this.cartId = (_a = JSON.parse(cartObj)) === null || _a === void 0 ? void 0 : _a.active;
        this.screenWidth = window.innerWidth + 'px';
        if (this.productDetails) {
            this.createProductForm();
        }
    }
    ngOnChanges(changes) {
        var _a;
        if (!((_a = changes === null || changes === void 0 ? void 0 : changes.productDetails) === null || _a === void 0 ? void 0 : _a.firstChange)) {
            this.cdr.detectChanges();
        }
    }
    // Create a Product Quantity Form
    createProductForm() {
        var _a, _b, _c, _d, _e;
        this.accessoriesPrice = 0;
        this.totalLength = null;
        this.totalPrice = '0.0';
        this.hasBundle = false;
        this.disableAddMore = false;
        this.bundleList = [];
        this.errorIndex = [];
        this.hasProdRefIndex = [];
        this.rowIndex = 0;
        this.productForm = new FormGroup({});
        this.addToCartError = null;
        this.productForm = this.formBuilder.group({
            bundling: [''],
            productQuantity: this.formBuilder.array([]),
            jobReference: ['', [RegexValidator(RegexConstants.JOB_REFERENCE)]],
        });
        this.editProdBundle = '';
        this.editProdRef = '';
        this.selectedIndex = null;
        this.hasProdRef = false;
        this.hasMinlengthError = [];
        if (this.isFinishedProduct) {
            this.addProductQuantityFormGroup();
            (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[0]) === null || _b === void 0 ? void 0 : _b.patchValue({
                prodQty: (_c = this.productDetails) === null || _c === void 0 ? void 0 : _c.quantity,
            });
        }
        else {
            this.modalBundleForm = this.formBuilder.group({
                modBundle: ['', [RegexValidator(RegexConstants.BUNDLE_NAME)]],
                modRef: ['', [RegexValidator(RegexConstants.JOB_REFERENCE)]],
            });
            (_e = (_d = this.productDetails) === null || _d === void 0 ? void 0 : _d.subLineConfigInfos) === null || _e === void 0 ? void 0 : _e.forEach((val, index) => {
                var _a, _b;
                this.addProductQuantityFormGroup();
                if (!this.isNullOrEmpty(val === null || val === void 0 ? void 0 : val.bundleName)) {
                    this.hasBundle = true;
                    (_b = (_a = this.productForm) === null || _a === void 0 ? void 0 : _a.get('bundling')) === null || _b === void 0 ? void 0 : _b.setValue(true);
                }
                this.productQuantityForm.controls[index].patchValue({
                    prodBundle: val === null || val === void 0 ? void 0 : val.bundleName,
                    prodLen: this.pad3Digits(val === null || val === void 0 ? void 0 : val.length),
                    prodQty: val === null || val === void 0 ? void 0 : val.quantity,
                    prodRef: val === null || val === void 0 ? void 0 : val.reference,
                });
            });
        }
        this.cdr.detectChanges();
    }
    // Updating the Bundle
    updateBundling(event) {
        var _a, _b, _c;
        this.hasBundle = ((_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.checked) === true;
        if (this.hasBundle) {
            (_c = (_b = this.productQuantityForm) === null || _b === void 0 ? void 0 : _b.controls) === null || _c === void 0 ? void 0 : _c.forEach((element, index) => {
                this.updateSameBundleReference(null, index);
            });
        }
        this.updateTotal();
    }
    // Check if any value is empty or undefined
    isNullOrEmpty(value) {
        return value == null || value == undefined || value == '';
    }
    // Check for any errors while updating the quantity
    hasErrorIndex(index) {
        return this.errorIndex[index] == true;
    }
    // Check if any Same Reference Error
    hasProdRefErrorIndex(index) {
        return this.hasProdRefIndex[index] == true;
    }
    // Group the Quantity values based on bundle
    groupByBundle(items, key) {
        return items.reduce((result, item) => (Object.assign(Object.assign({}, result), { [item[key]]: [...(result[item[key]] || []), item] })), {});
    }
    // Check the total bundle weight and update the error if it reaches to maximum bundle size for each bundle
    checkTotalBundleWeight(formValues) {
        var _a, _b;
        let groupTotal = 0;
        formValues === null || formValues === void 0 ? void 0 : formValues.forEach((currentValue) => {
            const qty = parseFloat(currentValue === null || currentValue === void 0 ? void 0 : currentValue.prodQty);
            const len = parseFloat(currentValue === null || currentValue === void 0 ? void 0 : currentValue.prodLen);
            if (!this.isNullOrEmpty(qty) && !this.isNullOrEmpty(len)) {
                groupTotal += qty * len;
            }
        });
        groupTotal = groupTotal * (((_a = this.cuttingValidation) === null || _a === void 0 ? void 0 : _a.weightPerLM) || 1);
        return groupTotal > (((_b = this.cuttingValidation) === null || _b === void 0 ? void 0 : _b.maxBundleLoad) || 1000);
    }
    // Get the last row of a bundle based on bundle name
    getLastBundleIndex(bundleName) {
        var _a, _b;
        let indexValue = null;
        (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.getRawValue()) === null || _b === void 0 ? void 0 : _b.forEach((element, index) => {
            var _a;
            if (((_a = element === null || element === void 0 ? void 0 : element.prodBundle) === null || _a === void 0 ? void 0 : _a.toUpperCase()) == (bundleName === null || bundleName === void 0 ? void 0 : bundleName.toUpperCase())) {
                indexValue = index;
            }
        });
        return indexValue;
    }
    // Get the Reference value of the same bundle and update
    getPrevBundleReferenceValue(index) {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        const bundleName = this.selectedIndex == null
            ? (_d = (_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodBundle')) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.toUpperCase()
            : (_g = (_f = (_e = this.modalBundleForm) === null || _e === void 0 ? void 0 : _e.get('modBundle')) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.toUpperCase();
        let refValue = '';
        (_h = this.productQuantityForm) === null || _h === void 0 ? void 0 : _h.controls.forEach((element, ind) => {
            var _a, _b, _c, _d, _e;
            const otherRefValue = (_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[ind]) === null || _b === void 0 ? void 0 : _b.get('prodRef')) === null || _c === void 0 ? void 0 : _c.value;
            if (((_e = (_d = element === null || element === void 0 ? void 0 : element.value) === null || _d === void 0 ? void 0 : _d.prodBundle) === null || _e === void 0 ? void 0 : _e.toUpperCase()) ==
                (bundleName === null || bundleName === void 0 ? void 0 : bundleName.toUpperCase()) &&
                (ind != index || this.selectedIndex != null) &&
                !this.isNullOrEmpty(otherRefValue)) {
                refValue = otherRefValue;
            }
        });
        return refValue || '';
    }
    // Check if Same Refrence is already used
    checkHasSameReference(index, currentReference, bundleName) {
        var _a, _b;
        let hasRef = false;
        const prodRefValues = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls) === null || _b === void 0 ? void 0 : _b.filter((element) => {
            var _a, _b, _c;
            return (((_a = element === null || element === void 0 ? void 0 : element.value) === null || _a === void 0 ? void 0 : _a.prodRef) == currentReference &&
                ((_c = (_b = element === null || element === void 0 ? void 0 : element.value) === null || _b === void 0 ? void 0 : _b.prodBundle) === null || _c === void 0 ? void 0 : _c.toUpperCase()) !=
                    (bundleName === null || bundleName === void 0 ? void 0 : bundleName.toUpperCase()) &&
                !this.isNullOrEmpty(currentReference));
        });
        if ((prodRefValues === null || prodRefValues === void 0 ? void 0 : prodRefValues.length) > 0) {
            this.hasProdRefIndex[index] = true;
            hasRef = true;
        }
        else {
            this.hasProdRefIndex[index] = false;
        }
        this.cdr.detectChanges();
        return hasRef;
    }
    // Update the Reference Value if already the same bundle is present
    updateSameBundleReference(event, index, isReference = false) {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        const bundleName = ((_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodBundle')) === null || _c === void 0 ? void 0 : _c.value) ||
            ((_d = this.modalBundleForm.get('modBundle')) === null || _d === void 0 ? void 0 : _d.value);
        const newRefValue = event != null
            ? event.currentTarget.value
            : ((_g = (_f = (_e = this.productQuantityForm) === null || _e === void 0 ? void 0 : _e.controls[index]) === null || _f === void 0 ? void 0 : _f.get('prodRef')) === null || _g === void 0 ? void 0 : _g.value) ||
                ((_h = this.modalBundleForm) === null || _h === void 0 ? void 0 : _h.get('modRef').value);
        isReference = isReference
            ? this.checkHasSameReference(index, newRefValue, bundleName)
            : false;
        if (!isReference) {
            this.productQuantityForm.controls.forEach((element, ind) => {
                var _a, _b, _c, _d, _e;
                if (((_b = (_a = element === null || element === void 0 ? void 0 : element.value) === null || _a === void 0 ? void 0 : _a.prodBundle) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ==
                    (bundleName === null || bundleName === void 0 ? void 0 : bundleName.toUpperCase()) &&
                    ind != index &&
                    !this.isNullOrEmpty(newRefValue) &&
                    !this.isNullOrEmpty(bundleName)) {
                    (_e = (_d = (_c = this.productQuantityForm) === null || _c === void 0 ? void 0 : _c.controls[ind]) === null || _d === void 0 ? void 0 : _d.get('prodRef')) === null || _e === void 0 ? void 0 : _e.setValue(newRefValue);
                }
            });
        }
        this.cdr.detectChanges();
    }
    // Update the same Bundle Refrence Value to all other Bundles if any changes in Reference Value
    populateSameBundleReference(event, index) {
        var _a, _b, _c, _d, _e;
        if (event) {
            const prevRefValue = this.getPrevBundleReferenceValue(index);
            if (!this.isNullOrEmpty(prevRefValue)) {
                (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index].get('prodRef')) === null || _b === void 0 ? void 0 : _b.setValue(prevRefValue);
                this.modalBundleForm.get('modRef').setValue(prevRefValue);
            }
        }
        else {
            if (!this.isNullOrEmpty(this.getPrevBundleReferenceValue(index))) {
                (_e = (_d = (_c = this.productQuantityForm) === null || _c === void 0 ? void 0 : _c.controls[index]) === null || _d === void 0 ? void 0 : _d.get('prodRef')) === null || _e === void 0 ? void 0 : _e.setValue(this.getPrevBundleReferenceValue(index) || '');
            }
        }
        this.cdr.detectChanges();
    }
    // Update the Bundle List if more than one bundle/rows
    updateBundleList() {
        var _a, _b;
        const formValues = this.groupByBundle((_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.getRawValue(), 'prodBundle');
        if (((_b = Object.keys(formValues)) === null || _b === void 0 ? void 0 : _b.length) > 1) {
            this.bundleList = Object.keys(formValues);
        }
        this.cdr.detectChanges();
    }
    // Get Bundle values only for mobile view
    getBundleValues(index) {
        var _a, _b, _c, _d, _e, _f;
        const bundleValues = [];
        bundleValues.push((_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodBundle')) === null || _c === void 0 ? void 0 : _c.value);
        bundleValues.push((_f = (_e = (_d = this.productQuantityForm) === null || _d === void 0 ? void 0 : _d.controls[index]) === null || _e === void 0 ? void 0 : _e.get('prodRef')) === null || _f === void 0 ? void 0 : _f.value);
        return bundleValues;
    }
    // Edit Bundle Values
    editBundleValue(index) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
        this.selectedIndex = index;
        (_a = this.modalBundleForm) === null || _a === void 0 ? void 0 : _a.get('modBundle').setValue((_d = (_c = (_b = this.productQuantityForm) === null || _b === void 0 ? void 0 : _b.controls[index]) === null || _c === void 0 ? void 0 : _c.get('prodBundle')) === null || _d === void 0 ? void 0 : _d.value.toUpperCase());
        (_f = (_e = this.modalBundleForm) === null || _e === void 0 ? void 0 : _e.get('modRef')) === null || _f === void 0 ? void 0 : _f.setValue((_j = (_h = (_g = this.productQuantityForm) === null || _g === void 0 ? void 0 : _g.controls[index]) === null || _h === void 0 ? void 0 : _h.get('prodRef')) === null || _j === void 0 ? void 0 : _j.value);
        this.cdr.detectChanges();
    }
    // Update/Save Bundle values
    saveBundleDetails(event) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        (_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[this.selectedIndex]) === null || _b === void 0 ? void 0 : _b.get('prodBundle')) === null || _c === void 0 ? void 0 : _c.setValue((_e = (_d = this.modalBundleForm) === null || _d === void 0 ? void 0 : _d.get('modBundle')) === null || _e === void 0 ? void 0 : _e.value.toUpperCase());
        (_h = (_g = (_f = this.productQuantityForm) === null || _f === void 0 ? void 0 : _f.controls[this.selectedIndex]) === null || _g === void 0 ? void 0 : _g.get('prodRef')) === null || _h === void 0 ? void 0 : _h.setValue((_k = (_j = this.modalBundleForm) === null || _j === void 0 ? void 0 : _j.get('modRef')) === null || _k === void 0 ? void 0 : _k.value);
        this.updateSameBundleReference(null, this.selectedIndex, true);
        this.updateTotal();
        this.selectedIndex = null;
        this.closebutton.nativeElement.click();
    }
    // Update Cart Deatils
    updateCartDetails() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
        if (this.isValidForm()) {
            let payLoad = {};
            if (this.isFinishedProduct) {
                payLoad = {
                    quantity: (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[0].get('prodQty')) === null || _b === void 0 ? void 0 : _b.value,
                    product: {
                        code: (_d = (_c = this.productDetails) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.code,
                    },
                    jobReference: (_f = (_e = this.productDetails) === null || _e === void 0 ? void 0 : _e.product) === null || _f === void 0 ? void 0 : _f.jobReference,
                };
            }
            else {
                payLoad = {
                    quantity: 1,
                    configurationInfos: [(_g = this.productDetails) === null || _g === void 0 ? void 0 : _g.configValues],
                    subLineConfigInfos: [],
                    jobReference: (_j = (_h = this.productDetails) === null || _h === void 0 ? void 0 : _h.product) === null || _j === void 0 ? void 0 : _j.jobReference,
                };
                (_l = (_k = this.productQuantityForm) === null || _k === void 0 ? void 0 : _k.controls) === null || _l === void 0 ? void 0 : _l.forEach((element, index) => {
                    var _a, _b, _c, _d, _e;
                    const configInfos = {
                        configuratorType: 'CUTTING',
                        quantity: (_a = element === null || element === void 0 ? void 0 : element.value) === null || _a === void 0 ? void 0 : _a.prodQty,
                        length: (_b = element === null || element === void 0 ? void 0 : element.value) === null || _b === void 0 ? void 0 : _b.prodLen,
                    };
                    if (this.hasBundle && ((_c = element === null || element === void 0 ? void 0 : element.value) === null || _c === void 0 ? void 0 : _c.prodBundle)) {
                        configInfos.bundleName = (_d = element === null || element === void 0 ? void 0 : element.value) === null || _d === void 0 ? void 0 : _d.prodBundle;
                        configInfos.reference = (_e = element === null || element === void 0 ? void 0 : element.value) === null || _e === void 0 ? void 0 : _e.prodRef;
                    }
                    payLoad.subLineConfigInfos.push(configInfos);
                });
                if ((payLoad === null || payLoad === void 0 ? void 0 : payLoad.configurationInfos) &&
                    ((_m = payLoad === null || payLoad === void 0 ? void 0 : payLoad.configurationInfos) === null || _m === void 0 ? void 0 : _m.length) > 0 &&
                    this.isNullOrEmpty(payLoad === null || payLoad === void 0 ? void 0 : payLoad.configurationInfos[0])) {
                    payLoad === null || payLoad === void 0 ? true : delete payLoad.configurationInfos;
                }
            }
            this.cartService
                .updateCartEntry(this.cartId, (_o = this.productDetails) === null || _o === void 0 ? void 0 : _o.entryNumber, payLoad)
                .subscribe((response) => {
                if (response) {
                    this.activeCartService.reloadActiveCart();
                    this.updateCartEntires.emit(true);
                }
            }, (error) => {
                var _a, _b, _c, _d;
                this.addToCartError =
                    ((_b = (_a = error === null || error === void 0 ? void 0 : error.error) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
                        ((_d = (_c = error === null || error === void 0 ? void 0 : error.error) === null || _c === void 0 ? void 0 : _c.errors[0]) === null || _d === void 0 ? void 0 : _d.errorMessage);
            });
        }
    }
    // Update Total Price and Total length based on user inputs on each row
    updateTotal() {
        var _a, _b, _c, _d;
        this.totalLength = 0;
        this.totalPrice = 0;
        if (!this.isFinishedProduct) {
            const formValues = this.groupByBundle((_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.getRawValue(), 'prodBundle');
            this.productQuantityForm.controls.forEach((element, index) => {
                var _a, _b, _c, _d, _e, _f, _g, _h;
                const qty = parseFloat((_a = element === null || element === void 0 ? void 0 : element.value) === null || _a === void 0 ? void 0 : _a.prodQty);
                const len = parseFloat((_b = element === null || element === void 0 ? void 0 : element.value) === null || _b === void 0 ? void 0 : _b.prodLen);
                const currentBundleName = (_d = (_c = element === null || element === void 0 ? void 0 : element.value) === null || _c === void 0 ? void 0 : _c.prodBundle) === null || _d === void 0 ? void 0 : _d.toUpperCase();
                let total = 0;
                if (!this.isNullOrEmpty(qty) &&
                    !this.isNullOrEmpty(len) &&
                    !isNaN(qty) &&
                    !isNaN(len)) {
                    total = qty * len;
                    if (!this.hasBundle) {
                        this.errorIndex[index] =
                            total * (((_e = this.cuttingValidation) === null || _e === void 0 ? void 0 : _e.weightPerLM) || 1) >
                                (((_f = this.cuttingValidation) === null || _f === void 0 ? void 0 : _f.maxBundleLoad) || 1000)
                                ? true
                                : false;
                    }
                    else if (this.checkTotalBundleWeight(formValues[currentBundleName])) {
                        const errorIndexNo = this.getLastBundleIndex(currentBundleName);
                        if (!this.isNullOrEmpty(errorIndexNo)) {
                            this.errorIndex[errorIndexNo] = true;
                        }
                    }
                    else {
                        this.errorIndex[index] = false;
                    }
                }
                if (!isNaN(qty) && !isNaN(len)) {
                    this.totalLength = this.totalLength + total;
                    this.totalPrice =
                        this.totalLength * ((_h = (_g = this.productDetails) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.value);
                }
            });
        }
        else {
            this.totalLength = null;
            const qty = (_d = (_c = (_b = this.productQuantityForm) === null || _b === void 0 ? void 0 : _b.controls[0]) === null || _c === void 0 ? void 0 : _c.get('prodQty')) === null || _d === void 0 ? void 0 : _d.value;
            if (!isNaN(qty)) {
                this.totalPrice = qty * this.accessoriesPrice;
            }
        }
        this.updateCartDetails();
    }
    // Utility Function to get Key Values
    getKeyValues(source, search) {
        if (typeof source !== 'object') {
            return [];
        }
        const [key, next] = Object.keys(source);
        const _a = source, _b = key, value = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
        return [
            ...(key === search ? [value] : this.getKeyValues(value, search)),
            ...(next ? this.getKeyValues(rest, search) : []),
        ];
    }
    // Get the values of Quantity Form
    getProductQuantityFormGroup() {
        return this.formBuilder.group(this.isFinishedProduct ? new AccessoriesQuantity() : new ProductQuantity());
    }
    get productQuantityForm() {
        return this.productForm.get('productQuantity');
    }
    // Add the Quanity Form when user clicks on Add More button
    addProductQuantityFormGroup(event) {
        var _a, _b, _c;
        event === null || event === void 0 ? void 0 : event.preventDefault();
        (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.push(this.getProductQuantityFormGroup());
        const bundles = this.groupByBundle((_b = this.productQuantityForm) === null || _b === void 0 ? void 0 : _b.getRawValue(), 'prodBundle');
        this.disableAddMore = ((_c = this.productQuantityForm) === null || _c === void 0 ? void 0 : _c.length) > 99;
        this.errorIndex[this.rowIndex] = false;
        this.hasProdRefIndex[this.rowIndex++] = false;
        this.cdr.detectChanges();
    }
    // Update the Quantity form if user clicks on remove button
    removeProductQuantityForm(index, event) {
        var _a;
        event.preventDefault();
        this.productQuantityForm.removeAt(index);
        this.rowIndex--;
        this.disableAddMore = ((_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.length) > 99;
        this.cdr.detectChanges();
        this.updateTotal();
    }
    // Get Job Reference Errors
    jobReferenceErrors() {
        var _a, _b;
        return (_b = (_a = this.productForm) === null || _a === void 0 ? void 0 : _a.get('jobReference')) === null || _b === void 0 ? void 0 : _b.errors;
    }
    // Get Product Quantity Errors
    prodQtyErrors(index) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
        return ((((_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodQty')) === null || _c === void 0 ? void 0 : _c.errors) ||
            ((_f = (_e = (_d = this.productQuantityForm) === null || _d === void 0 ? void 0 : _d.controls[index]) === null || _e === void 0 ? void 0 : _e.get('prodQty')) === null || _f === void 0 ? void 0 : _f.invalid)) &&
            (((_j = (_h = (_g = this.productQuantityForm) === null || _g === void 0 ? void 0 : _g.controls[index]) === null || _h === void 0 ? void 0 : _h.get('prodQty')) === null || _j === void 0 ? void 0 : _j.dirty) ||
                ((_m = (_l = (_k = this.productQuantityForm) === null || _k === void 0 ? void 0 : _k.controls[index]) === null || _l === void 0 ? void 0 : _l.get('prodQty')) === null || _m === void 0 ? void 0 : _m.touched)));
    }
    // Get Product Length Errors
    prodLenErrors(index) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
        return ((((_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodLen')) === null || _c === void 0 ? void 0 : _c.errors) ||
            ((_f = (_e = (_d = this.productQuantityForm) === null || _d === void 0 ? void 0 : _d.controls[index]) === null || _e === void 0 ? void 0 : _e.get('prodLen')) === null || _f === void 0 ? void 0 : _f.invalid)) &&
            (((_j = (_h = (_g = this.productQuantityForm) === null || _g === void 0 ? void 0 : _g.controls[index]) === null || _h === void 0 ? void 0 : _h.get('prodLen')) === null || _j === void 0 ? void 0 : _j.dirty) ||
                ((_m = (_l = (_k = this.productQuantityForm) === null || _k === void 0 ? void 0 : _k.controls[index]) === null || _l === void 0 ? void 0 : _l.get('prodLen')) === null || _m === void 0 ? void 0 : _m.touched)));
    }
    // Get Product Length Errors
    minLenErrors(index) {
        var _a;
        return ((_a = this.hasMinlengthError) === null || _a === void 0 ? void 0 : _a.indexOf(index)) !== -1;
    }
    // Get Product Bundle Errors
    prodBundleErrors(index) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
        return ((((_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodBundle')) === null || _c === void 0 ? void 0 : _c.errors) ||
            ((_f = (_e = (_d = this.productQuantityForm) === null || _d === void 0 ? void 0 : _d.controls[index]) === null || _e === void 0 ? void 0 : _e.get('prodBundle')) === null || _f === void 0 ? void 0 : _f.invalid)) &&
            (((_j = (_h = (_g = this.productQuantityForm) === null || _g === void 0 ? void 0 : _g.controls[index]) === null || _h === void 0 ? void 0 : _h.get('prodBundle')) === null || _j === void 0 ? void 0 : _j.dirty) ||
                ((_m = (_l = (_k = this.productQuantityForm) === null || _k === void 0 ? void 0 : _k.controls[index]) === null || _l === void 0 ? void 0 : _l.get('prodBundle')) === null || _m === void 0 ? void 0 : _m.touched)));
    }
    // Get Product Bunlde Reference Errors
    prodRefErrors(index) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
        return ((((_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodRef')) === null || _c === void 0 ? void 0 : _c.errors) ||
            ((_f = (_e = (_d = this.productQuantityForm) === null || _d === void 0 ? void 0 : _d.controls[index]) === null || _e === void 0 ? void 0 : _e.get('prodRef')) === null || _f === void 0 ? void 0 : _f.invalid)) &&
            (((_j = (_h = (_g = this.productQuantityForm) === null || _g === void 0 ? void 0 : _g.controls[index]) === null || _h === void 0 ? void 0 : _h.get('prodRef')) === null || _j === void 0 ? void 0 : _j.dirty) ||
                ((_m = (_l = (_k = this.productQuantityForm) === null || _k === void 0 ? void 0 : _k.controls[index]) === null || _l === void 0 ? void 0 : _l.get('prodRef')) === null || _m === void 0 ? void 0 : _m.touched)));
    }
    // Check if form is Valid or not
    isValidForm() {
        var _a, _b, _c;
        let valid = true;
        if (this.hasBundle) {
            return (_a = this.productForm) === null || _a === void 0 ? void 0 : _a.valid;
        }
        else {
            (_c = (_b = this.productQuantityForm) === null || _b === void 0 ? void 0 : _b.controls) === null || _c === void 0 ? void 0 : _c.forEach((element) => {
                var _a, _b, _c;
                valid = this.isFinishedProduct
                    ? (_a = element === null || element === void 0 ? void 0 : element.get('prodQty')) === null || _a === void 0 ? void 0 : _a.valid
                    : ((_b = element === null || element === void 0 ? void 0 : element.get('prodLen')) === null || _b === void 0 ? void 0 : _b.valid) && ((_c = element === null || element === void 0 ? void 0 : element.get('prodQty')) === null || _c === void 0 ? void 0 : _c.valid);
            });
        }
        return valid;
    }
    // Check if any errors present on any row and diplay it on UI
    hasErrors(index) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
        return ((_c = (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls[index]) === null || _b === void 0 ? void 0 : _b.get('prodQty')) === null || _c === void 0 ? void 0 : _c.errors) ||
            ((_f = (_e = (_d = this.productQuantityForm) === null || _d === void 0 ? void 0 : _d.controls[index]) === null || _e === void 0 ? void 0 : _e.get('prodLen')) === null || _f === void 0 ? void 0 : _f.errors) ||
            ((_j = (_h = (_g = this.productQuantityForm) === null || _g === void 0 ? void 0 : _g.controls[index]) === null || _h === void 0 ? void 0 : _h.get('prodBundle')) === null || _j === void 0 ? void 0 : _j.errors) ||
            ((_m = (_l = (_k = this.productQuantityForm) === null || _k === void 0 ? void 0 : _k.controls[index]) === null || _l === void 0 ? void 0 : _l.get('prodRef')) === null || _m === void 0 ? void 0 : _m.errors)
            ? true
            : false;
    }
    // Check if Any Entry has less than Minimum length
    checkHasMinLengthQty() {
        var _a, _b;
        this.hasMinlengthError = [];
        (_b = (_a = this.productQuantityForm) === null || _a === void 0 ? void 0 : _a.controls) === null || _b === void 0 ? void 0 : _b.forEach((element, ind) => {
            var _a, _b, _c;
            if (((_a = element === null || element === void 0 ? void 0 : element.value) === null || _a === void 0 ? void 0 : _a.prodLen) < ((_b = this.cuttingValidation) === null || _b === void 0 ? void 0 : _b.minLength) &&
                !this.isNullOrEmpty((_c = element === null || element === void 0 ? void 0 : element.value) === null || _c === void 0 ? void 0 : _c.prodLen)) {
                this.hasMinlengthError.push(ind);
            }
        });
        this.cdr.detectChanges();
    }
    pad3Digits(value) {
        var _a, _b;
        const qty = value;
        if (!this.isNullOrEmpty(qty) && !isNaN(qty)) {
            return (_b = (_a = parseFloat(qty)) === null || _a === void 0 ? void 0 : _a.toFixed(3)) === null || _b === void 0 ? void 0 : _b.replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
        }
    }
    // Convert Length to demial format after blur
    updateLenthValue(element) {
        if (!this.isNullOrEmpty(element === null || element === void 0 ? void 0 : element.value)) {
            element.value = this.pad3Digits(element.value);
        }
        this.checkHasMinLengthQty();
    }
}
CustomProductQuantityFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomProductQuantityFormComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.CartService }, { token: i3.ActiveCartService }, { token: i4.CurrentProductService }], target: i0.ɵɵFactoryTarget.Component });
CustomProductQuantityFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomProductQuantityFormComponent, selector: "app-custom-product-quantity-form", inputs: { hasBundle: "hasBundle", productCode: "productCode", productDetails: "productDetails", unitType: "unitType", accessoriesPrice: "accessoriesPrice", selectedColour: "selectedColour", cuttingValidation: "cuttingValidation", finishedVariantDetails: "finishedVariantDetails", finishedAvailableColours: "finishedAvailableColours", isFinishedProduct: "isFinishedProduct", isFlashingProduct: "isFlashingProduct", listView: "listView" }, outputs: { updateCartEntires: "updateCartEntires" }, viewQueries: [{ propertyName: "closeInviteModal", first: true, predicate: ["closeInviteModal"], descendants: true }, { propertyName: "closebutton", first: true, predicate: ["closebutton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"productDetails\" [formGroup]=\"productForm\">\r\n  <div class=\"row\">\r\n    <ng-container>\r\n      <div\r\n        class=\"col p-0 bundling\"\r\n        *ngIf=\"!isFinishedProduct && !isFlashingProduct\"\r\n      >\r\n        <span class=\"pr-2 font-weight-bold text\">Bundling </span>\r\n        <span>\r\n          <label class=\"switch\">\r\n            <input\r\n              type=\"checkbox\"\r\n              formControlName=\"bundling\"\r\n              (change)=\"updateBundling($event)\"\r\n            />\r\n            <span class=\"slider round\"></span>\r\n          </label>\r\n        </span>\r\n      </div>\r\n    </ng-container>\r\n    <div class=\"quantity border p-3 mt-4\">\r\n      <ng-container formArrayName=\"productQuantity\">\r\n        <datalist id=\"bundleList\">\r\n          <option *ngFor=\"let bundle of bundleList\">\r\n            {{ bundle }}\r\n          </option>\r\n        </datalist>\r\n        <table\r\n          class=\"no-border\"\r\n          [ngClass]=\"{\r\n            'has-bundle': hasBundle,\r\n            accessories: isFinishedProduct\r\n          }\"\r\n        >\r\n          <thead>\r\n            <th>Quantity</th>\r\n            <th *ngIf=\"!isFinishedProduct\">Length (LM)</th>\r\n            <th *ngIf=\"hasBundle\">\r\n              Bundle\r\n              <span\r\n                class=\"info-icon\"\r\n                ngbTooltip=\"Bundle Information goes here....\"\r\n                placement=\"bottom\"\r\n              >\r\n              </span>\r\n            </th>\r\n            <th\r\n              *ngIf=\"hasBundle\"\r\n              class=\"d-none\"\r\n              [ngClass]=\"{ 'd-lg-block': listView }\"\r\n            >\r\n              Reference\r\n              <span\r\n                class=\"info-icon\"\r\n                ngbTooltip=\"Reference Information goes here....\"\r\n                placement=\"bottom\"\r\n              >\r\n              </span>\r\n            </th>\r\n            <th></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container\r\n              *ngFor=\"\r\n                let val of productForm.get('productQuantity')['controls'];\r\n                let i = index\r\n              \"\r\n              [formGroupName]=\"i\"\r\n            >\r\n              <tr>\r\n                <td>\r\n                  <input\r\n                    class=\"form-control prod-qty\"\r\n                    formControlName=\"prodQty\"\r\n                    minlength=\"1\"\r\n                    maxlength=\"2\"\r\n                    OnlyNumber=\"true\"\r\n                    (blur)=\"updateTotal()\"\r\n                  />\r\n                </td>\r\n                <td *ngIf=\"!isFinishedProduct\">\r\n                  <input\r\n                    class=\"form-control prod-len\"\r\n                    formControlName=\"prodLen\"\r\n                    #prodLen\r\n                    minlength=\"1\"\r\n                    maxlength=\"7\"\r\n                    OnlyNumber=\"true\"\r\n                    (blur)=\"updateTotal(); updateLenthValue(prodLen)\"\r\n                  />\r\n                </td>\r\n                <td *ngIf=\"hasBundle && !isFinishedProduct\">\r\n                  <div class=\"d-none\" [ngClass]=\"{ 'd-lg-block': listView }\">\r\n                    <input\r\n                      class=\"form-control prod-bundle\"\r\n                      formControlName=\"prodBundle\"\r\n                      #prodBundle\r\n                      (input)=\"\r\n                        prodBundle.value = prodBundle.value.toUpperCase()\r\n                      \"\r\n                      minlength=\"1\"\r\n                      maxlength=\"2\"\r\n                      (blur)=\"\r\n                        updateTotal(); populateSameBundleReference(null, i)\r\n                      \"\r\n                      (focus)=\"updateBundleList()\"\r\n                      list=\"bundleList\"\r\n                    />\r\n                  </div>\r\n                  <div [ngClass]=\"{ 'd-lg-none d-xl-none': listView }\">\r\n                    <p class=\"p-0 m-0\" *ngFor=\"let value of getBundleValues(i)\">\r\n                      {{ value }}\r\n                    </p>\r\n                  </div>\r\n                  <div class=\"side-menu-button\" *ngIf=\"!listView\">\r\n                    <div class=\"btn-group dropleft\" *ngIf=\"hasBundle\">\r\n                      <a\r\n                        type=\"button\"\r\n                        class=\"dropdown-toggle\"\r\n                        href=\"#\"\r\n                        role=\"button\"\r\n                        data-toggle=\"dropdown\"\r\n                        aria-haspopup=\"true\"\r\n                        aria-expanded=\"false\"\r\n                      >\r\n                        <i class=\"fa fa-ellipsis-v\"></i>\r\n                      </a>\r\n                      <div class=\"dropdown-menu\">\r\n                        <a\r\n                          class=\"dropdown-item m-0\"\r\n                          data-toggle=\"modal\"\r\n                          data-target=\"#bundleModal\"\r\n                          (click)=\"editBundleValue(i)\"\r\n                        >\r\n                          Edit Bundle Value\r\n                        </a>\r\n                        <a\r\n                          class=\"dropdown-item m-0\"\r\n                          *ngIf=\"i > 0 || productQuantityForm.length > 1\"\r\n                          (click)=\"removeProductQuantityForm(i, $event)\"\r\n                        >\r\n                          Remove\r\n                        </a>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n                <td *ngIf=\"hasBundle && !isFinishedProduct && listView\">\r\n                  <div class=\"d-none\" [ngClass]=\"{ 'd-lg-block': listView }\">\r\n                    <input\r\n                      class=\"form-control prod-reference\"\r\n                      minlength=\"1\"\r\n                      maxlength=\"15\"\r\n                      (focus)=\"populateSameBundleReference($event, i)\"\r\n                      formControlName=\"prodRef\"\r\n                      (blur)=\"\r\n                        updateTotal();\r\n                        updateSameBundleReference($event, i, true)\r\n                      \"\r\n                    />\r\n                  </div>\r\n                </td>\r\n                <td *ngIf=\"listView\">\r\n                  <button\r\n                    *ngIf=\"\r\n                      i > 0 || (productQuantityForm.length > 1 && listView)\r\n                    \"\r\n                    class=\"simple close d-sm-none d-md-none d-lg-block d-xl-block\"\r\n                    (click)=\"removeProductQuantityForm(i, $event)\"\r\n                  >\r\n                    <i class=\"fas fa-times-circle custom-arrow remove-icon\"></i>\r\n                  </button>\r\n\r\n                  <div [ngClass]=\"{ 'd-lg-none d-xl-none': listView }\">\r\n                    <div class=\"btn-group dropleft\" *ngIf=\"hasBundle\">\r\n                      <a\r\n                        type=\"button\"\r\n                        class=\"dropdown-toggle\"\r\n                        href=\"#\"\r\n                        role=\"button\"\r\n                        data-toggle=\"dropdown\"\r\n                        aria-haspopup=\"true\"\r\n                        aria-expanded=\"false\"\r\n                      >\r\n                        <i class=\"fa fa-ellipsis-v\"></i>\r\n                      </a>\r\n                      <div class=\"dropdown-menu\">\r\n                        <a\r\n                          class=\"dropdown-item m-0\"\r\n                          data-toggle=\"modal\"\r\n                          data-target=\"#bundleModal\"\r\n                          (click)=\"editBundleValue(i)\"\r\n                        >\r\n                          Edit Bundle Value\r\n                        </a>\r\n                        <a\r\n                          class=\"dropdown-item m-0\"\r\n                          *ngIf=\"i > 0 || productQuantityForm.length > 1\"\r\n                          (click)=\"removeProductQuantityForm(i, $event)\"\r\n                        >\r\n                          Remove\r\n                        </a>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n              <tr *ngIf=\"hasErrors(i)\">\r\n                <td colspan=\"4\" class=\"text-danger\">\r\n                  <div class=\"mt-0\" *ngIf=\"prodQtyErrors(i)\">\r\n                    Please enter valid Quantity\r\n                  </div>\r\n                  <div class=\"mt-2\" *ngIf=\"prodLenErrors(i)\">\r\n                    Please enter valid Length\r\n                  </div>\r\n                  <div class=\"mt-2\" *ngIf=\"minLenErrors(i)\">\r\n                    Minimum length should be at least\r\n                    {{ cuttingValidation?.minLength }}\r\n                  </div>\r\n                  <div class=\"mt-2\" *ngIf=\"prodBundleErrors(i)\">\r\n                    Please enter valid Bundle Name\r\n                  </div>\r\n                  <div class=\"mt-2\" *ngIf=\"prodRefErrors(i)\">\r\n                    Please enter valid Reference\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n              <tr *ngIf=\"hasErrorIndex(i)\">\r\n                <td colspan=\"4\" class=\"text-danger\">\r\n                  Should not exceed maximum bundle size\r\n                </td>\r\n              </tr>\r\n              <tr *ngIf=\"hasProdRefErrorIndex(i)\">\r\n                <td colspan=\"4\" class=\"text-danger\">\r\n                  This Reference value is already used. Please use other value\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n        <button\r\n          class=\"simple pl-2\"\r\n          *ngIf=\"!isFinishedProduct && !disableAddMore\"\r\n          (click)=\"addProductQuantityFormGroup($event)\"\r\n        >\r\n          <span class=\"mr-1 add-more\"> </span>\r\n          Add more\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div\r\n  class=\"row mt-4 col-sm-12 alert alert-danger justify-content-start\"\r\n  role=\"alert\"\r\n  *ngIf=\"addToCartError | async\"\r\n>\r\n  <img\r\n    class=\"mr-3\"\r\n    src=\"../../../../../assets/images/erroricon.svg\"\r\n    alt=\"alert\"\r\n  />\r\n  {{ addToCartError }}\r\n</div>\r\n\r\n<div\r\n  class=\"modal fade edit-bundle-form\"\r\n  id=\"bundleModal\"\r\n  role=\"dialog\"\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        <h4 class=\"modal-title\">Bundle Value</h4>\r\n        <i\r\n          class=\"icon-close invite-pop-close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n        ></i>\r\n      </div>\r\n      <div class=\"modal-body m-0 pl-2 pr-2\">\r\n        <table class=\"table no-border\" *ngIf=\"!isFinishedProduct\">\r\n          <thead>\r\n            <th>\r\n              Bundle\r\n              <span\r\n                class=\"info-icon\"\r\n                ngbTooltip=\"Bundle Information goes here....\"\r\n                placement=\"bottom\"\r\n              >\r\n              </span>\r\n            </th>\r\n            <th>\r\n              Reference\r\n              <span\r\n                class=\"info-icon\"\r\n                ngbTooltip=\"Reference Information goes here....\"\r\n                placement=\"bottom\"\r\n              >\r\n              </span>\r\n            </th>\r\n          </thead>\r\n          <tbody [formGroup]=\"modalBundleForm\">\r\n            <tr>\r\n              <td>\r\n                <datalist id=\"modBundleList\">\r\n                  <option *ngFor=\"let bundle of bundleList\">\r\n                    {{ bundle }}\r\n                  </option>\r\n                </datalist>\r\n                <input\r\n                  class=\"form-control\"\r\n                  maxlength=\"2\"\r\n                  formControlName=\"modBundle\"\r\n                  #modBundle\r\n                  (focus)=\"updateBundleList()\"\r\n                  (input)=\"modBundle.value = modBundle.value.toUpperCase()\"\r\n                  list=\"modBundleList\"\r\n                  (blur)=\"populateSameBundleReference(null, selectedIndex)\"\r\n                />\r\n              </td>\r\n              <td>\r\n                <input\r\n                  class=\"form-control\"\r\n                  maxlength=\"15\"\r\n                  (focus)=\"populateSameBundleReference($event, selectedIndex)\"\r\n                  formControlName=\"modRef\"\r\n                />\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <div class=\"modal-footer\">\r\n        <button\r\n          type=\"submit\"\r\n          data-dismiss=\"modal\"\r\n          #closebutton\r\n          class=\"btn btn-light\"\r\n        >\r\n          Cancel\r\n        </button>\r\n        <button type=\"submit\" (click)=\"saveBundleDetails($event)\" class=\"btn\">\r\n          Save\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@media screen and (min-width: 1366px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: 1.063rem;--fontsize17-5: 1.1rem;--fontsize18: 1.125rem;--fontsize18-4: 1.5rem;--fontsize20: 1.25rem;--fontsize21: 1.313rem;--fontsize22: 1.375rem;--fontsize23: 1.438rem;--fontsize24: 1.5rem;--fontsize26: 1.625rem;--fontsize28: 1.75rem;--fontsize30: 1.625rem;--fontsize32: 2rem;--fontsize34: 2.125rem;--fontsize36: 2rem;--fontsize40: 2.25rem;--fontsize46: 2.875rem;--fontsize80: 5rem}}@media screen and (max-width: 1365px) and (min-width: 768px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2.875rem;--fontsize80: 3.5rem}}@media screen and (max-width: 767px){:root{--fontsize12: .75rem;--fontsize14: .875rem;--fontsize16: 1rem;--fontsize16-5: .77rem;--fontsize17: .9rem;--fontsize17-5: 1rem;--fontsize18: .875rem;--fontsize19: .938rem;--fontsize20: 1rem;--fontsize21: 1.063rem;--fontsize22: 1.125rem;--fontsize23: 1.188rem;--fontsize24: 1rem;--fontsize26: 1.25rem;--fontsize28: 1.5rem;--fontsize30: 1.25rem;--fontsize32: 1.75rem;--fontsize34: 1.875rem;--fontsize36: 1.625rem;--fontsize40: 2.5rem;--fontsize46: 2rem;--fontsize80: 2.5rem}}@font-face{font-family:icomoon;font-weight:400;src:url(../assets/fonts/icomoon.ttf) format(\"ttf\"),url(../assets/fonts/icomoon.woff) format(\"woff\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:\"Arial Regular\";src:url(../assets/fonts/arial-webfont.woff) format(\"woff\"),url(../assets/fonts/arial-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Bold\";src:url(../assets/fonts/arialbold-webfont.woff) format(\"woff\"),url(../assets/fonts/arialbold-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Arial Black\";src:url(../assets/fonts/arialblack-webfont.woff) format(\"woff\"),url(../assets/fonts/arialblack-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Reqular\";src:url(../assets/fonts/helveticaneue.woff) format(\"woff\"),url(../assets/fonts/helveticaneue.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Thin\";src:url(../assets/fonts/helveticaneuethin-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuethin-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}@font-face{font-family:\"Helvetica Neue Medium\";src:url(../assets/fonts/helveticaneuemedium-webfont.woff) format(\"woff\"),url(../assets/fonts/helveticaneuemedium-webfont.woff2) format(\"woff2\");font-weight:normal;font-style:normal}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;font-feature-settings:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;text-transform:none;font-display:swap}.icon-right:before{content:\"\\e902\"}.icon-materials:before{content:\"\\e900\"}.icon-natural-lighting:before{content:\"\\e90a\"}.icon-rainwater:before{content:\"\\e901\"}.icon-roofing:before{content:\"\\e90b\"}.icon-flashing{position:relative;display:inline-block;height:32px;text-align:center;width:32px}.icon-flashing:before,.mainnav-link-level-2.show .navTagChild .icon-flashing:before{content:url(../assets/images/icon-flashing-white.svg);height:20px;width:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:15px}li.megamenuSubChild:hover .icon-flashing:before{content:url(../assets/images/icon-flashing-black.svg)}.icon-structural:before{content:\"\\e90c\"}.icon-accessories-old .path1:before{content:\"\\e903\"}.icon-accessories-old .path2:before{margin-left:-1em;content:\"\\e904\"}.icon-accessories-old .path3:before{margin-left:-1em;content:\"\\e905\"}.icon-cladding-old .path1:before{content:\"\\e90d\"}.icon-cladding-old .path2:before{margin-left:-1em;content:\"\\e90e\"}.icon-close:before{content:\"\\e90f\"}.icon-message:before{content:\"\\e910\"}.icon-search .path1:before{content:\"\\e906\"}.icon-search .path2:before{content:\"\\e907\"}.icon-search .path3:before{margin-left:-1.0156em;content:\"\\e908\"}.icon-summary:before{content:\"\\e911\"}.icon-branch:before{content:\"\\e912\"}.icon-delivery:before{content:\"\\e913\"}.icon-downloads:before{content:\"\\e909\"}.icon-drawings:before{content:\"\\e914\"}.icon-full:before{content:\"\\e915\"}.icon-manual:before{content:\"\\e916\"}.icon-payment:before{content:\"\\e917\"}.icon-empty .path1:before{content:\"\\e918\"}.icon-empty .path2:before{margin-left:-1em;content:\"\\e919\"}.icon-empty .path3:before{margin-left:-1em;content:\"\\e91a\"}.icon-product-overview:before{content:\"\\e91b\"}.icon-arrows:before{content:\"\\e91c\"}.icon-selected:before{content:\"\\e91d\"}.icon-accessories:before{content:\"\\e91b\"}.icon-cladding:before{content:\"\\e91e\"}.icon-Triangle:before{content:\"\\e91f\"}.icon-home:before{content:\"\\e920\"}.icon-faq:before{content:\"\\e921\"}.icon-temperature:before{content:\"\\e922\"}body header{font-family:\"Arial Regular\",sans-serif}header{background-color:#1d1d1b;position:sticky;top:0;background-size:100% 25%!important;background-repeat:no-repeat;z-index:10}header .header{max-width:100%;padding:0}header cx-banner cx-media img{margin-top:.7rem;margin-bottom:0}header label{display:inline-flex}header .SiteLinks{height:52px;display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:5px}header .SiteLinks cx-paragraph p{color:#fff;font-size:var(--fontsize16);line-height:var(--fontsize16);margin-bottom:0}header .SiteLinks cx-paragraph{font-size:var(--fontsize16)}header .SiteLinks app-account-dropdown,header .SiteLinks app-find-store{width:calc(25% - 25px);max-width:328px;margin-right:25px}header .SiteLinks app-contact-us{width:calc(20% - 25px);max-width:100px;margin-left:auto}header .SiteLinks app-custom-mini-cart{width:10%}header .SiteLinks .preferenceLink{margin-left:auto}header .SiteLinks .preferenceLink cx-generic-link{margin:0}header .SiteLinks .preferenceLink cx-generic-link cx-media img{height:22px;margin:0}header .SiteLogo .storeLogo{position:absolute;z-index:99;left:40px;bottom:10px}header .SiteLogo .homeLogo{max-width:28px;height:28px;position:absolute;z-index:99;bottom:47px}header .NavigationBar{flex:70%;background-color:#b61828;min-height:40px;display:flex;align-items:center;position:relative;z-index:10}header .logoutMenu{margin-top:0!important}header .logoutMenu li{cursor:pointer;background-color:#4c4c4c;color:#fff}header .logoutMenu li:hover{text-decoration:underline;background-color:#4c4c4c}header .MarketingContext{width:100%;margin:auto}.customer-service-icon{cursor:pointer}d .helpSupport{width:20rem;border:0;margin-top:.5rem!important;transform:translate(-42%,36px)!important;padding:1rem 1rem 0;background-color:#393939;color:#fff;top:0}d .helpSupport .arrow-up{position:absolute;top:-8px;right:44%;width:0;height:0;border-left:15px solid rgba(0,0,0,0);border-right:15px solid rgba(0,0,0,0);border-bottom:15px solid #393939}d .helpSupport .contact-us-info .heading{font-family:\"Arial Bold\",sans-serif}d .helpSupport .contact-us-info .detail{font-size:var(--fontsize14);line-height:2rem}d .helpSupport .contact-us-info .detail .service-icon{height:20px;width:20px;margin-right:10px}d .helpSupport .contact-us-info .contactLink a{font-size:var(--fontsize14);text-decoration:underline;text-transform:uppercase}d .helpSupport .contact-us-info a{color:#fff;text-decoration:none}d .helpSupport .contact-us-info a:hover{text-decoration:underline}.pageTitle{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}@media screen and (max-width: 991px){cx-storefront header{background-color:#b61828}cx-storefront header cx-banner cx-media img{margin:auto}cx-storefront header .SiteLogo{width:100%;max-width:211px;margin:auto;padding-left:30px;box-sizing:border-box}cx-storefront header .SiteLogo .storeLogo{position:unset}cx-storefront header .SearchBox{margin:14px 0 10px;width:30px}cx-storefront header .SiteLinks{background-color:transparent;width:110px;margin:auto 25px auto 0}cx-storefront header .SiteLinks app-account-dropdown,cx-storefront header .SiteLinks app-find-store,cx-storefront header .SiteLinks app-contact-us,cx-storefront header .SiteLinks cx-paragraph,cx-storefront header .SiteLinks .preferenceLink{display:none}cx-storefront header .SiteLinks app-custom-mini-cart,cx-storefront header .SiteLinks app-custom-user-account{width:35px}cx-storefront header.is-expanded{overflow-y:auto;position:fixed;bottom:0;top:0;width:calc(100% - 99px)}cx-storefront header.is-expanded .header{background-color:#b61828;margin-left:0}cx-storefront header.is-expanded .PreHeader{position:absolute;right:15px;top:15px}cx-storefront header.is-expanded .SearchBox{display:none}cx-storefront header.is-expanded .SiteLogo{position:absolute;top:25px;z-index:9}cx-storefront header.is-expanded .SiteLinks{background-color:#1d1d1b;width:100%;margin:15px auto 15px 0;height:unset;padding:15px;max-width:100%;position:relative;z-index:9;top:60px}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-account-dropdown{width:100%;max-width:100%}cx-storefront header.is-expanded .SiteLinks app-find-store{width:50%;max-width:328px;min-width:328px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-right:15px;margin-left:auto;width:115px;max-width:unset}cx-storefront header.is-expanded .navigation{position:relative;top:45px}cx-storefront header.is-expanded:before{background-color:#0000004d;right:0;content:\"\";position:fixed;z-index:2;top:0;bottom:0;height:100vh;width:99px}cx-storefront header.is-expanded:after{background-color:transparent}}@media screen and (max-width: 576px){cx-storefront header .SiteLogo{max-width:80px}cx-storefront header .SiteLogo .storeLogo{display:none}cx-storefront header .searchBox{height:45px}cx-storefront header.is-expanded{width:100%}cx-storefront header.is-expanded .header,cx-storefront header.is-expanded .navigation{width:100%}cx-storefront header.is-expanded .SiteLogo{max-width:211px!important}cx-storefront header.is-expanded .SiteLogo .storeLogo{display:block}cx-storefront header.is-expanded .SiteLinks{max-width:100%;width:100%}cx-storefront header.is-expanded .SiteLinks app-account-dropdown,cx-storefront header.is-expanded .SiteLinks app-find-store,cx-storefront header.is-expanded .SiteLinks app-contact-us,cx-storefront header.is-expanded .SiteLinks cx-paragraph,cx-storefront header.is-expanded .SiteLinks .preferenceLink{display:block}cx-storefront header.is-expanded .SiteLinks app-custom-mini-cart,cx-storefront header.is-expanded .SiteLinks app-custom-user-account{display:none}cx-storefront header.is-expanded .SiteLinks app-find-store{width:100%;max-width:100%;margin-bottom:10px}cx-storefront header.is-expanded .SiteLinks app-contact-us{margin-left:0}cx-storefront header.is-expanded .SiteLinks cx-paragraph{margin-left:auto}cx-storefront header.is-expanded:before{display:none}}#visualization-container{text-align:center;margin:0 auto}#cds-viewer-container-3d{width:320px;height:200px}#cds-viewer-container-2d{width:320px;height:200px}[aria-label=Close]{cursor:pointer}cx-media.is-missing{background:url(./assets/images/search-noimage.svg);background-size:cover;background-position:center;background-repeat:no-repeat}.product-code{color:#6f6f6f}.category-image{width:250px;height:180px}.display_color{text-align:center;position:relative;top:4px;font-family:\"Arial Bold\",sans-serif}.colours .colour{padding:0 15px;position:relative}.colours .colour .checkbox{display:none}.colours .colour .colour-title{position:absolute;bottom:-48px;width:40px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:var(--fontsize14);text-align:center;cursor:grabbing}.colours .colour.selected{border:1px solid #000000}.colours .colour.selected .checkbox{position:absolute;background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2217.186%22 height%3D%2217.186%22 viewBox%3D%220 0 17.186 17.186%22%3E%0D  %3Cg id%3D%22Group_12857%22 data-name%3D%22Group 12857%22 transform%3D%22translate(0.25 0.25)%22%3E%0D    %3Ccircle id%3D%22Ellipse_14%22 data-name%3D%22Ellipse 14%22 cx%3D%228.316%22 cy%3D%228.316%22 r%3D%228.316%22 transform%3D%22translate(0 0.039)%22%2F%3E%0D    %3Cpath id%3D%22Icon_ionic-md-checkmark-circle%22 data-name%3D%22Icon ionic-md-checkmark-circle%22 d%3D%22M11.718%2C3.375a8.343%2C8.343%2C0%2C1%2C0%2C8.343%2C8.343A8.367%2C8.367%2C0%2C0%2C0%2C11.718%2C3.375ZM10.005%2C16.166%2C5.729%2C11.89l1.2-1.2%2C3.08%2C3.08%2C6.5-6.5%2C1.2%2C1.2Z%22 transform%3D%22translate(-3.375 -3.375)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Icon_ionic-md-checkmark-circle_-_Outline%22 data-name%3D%22Icon ionic-md-checkmark-circle - Outline%22 d%3D%22M11.718%2C3.125a8.583%2C8.583%2C0%2C0%2C1%2C6.069%2C14.662A8.583%2C8.583%2C0%2C1%2C1%2C5.649%2C5.649%2C8.532%2C8.532%2C0%2C0%2C1%2C11.718%2C3.125Zm0%2C16.686A8.117%2C8.117%2C0%2C1%2C0%2C6%2C17.433%2C8.035%2C8.035%2C0%2C0%2C0%2C11.718%2C19.811ZM16.511%2C6.916l1.553%2C1.553-8.059%2C8.05L5.376%2C11.89l1.553-1.553%2C3.08%2C3.08Zm.846%2C1.553-.846-.846-6.5%2C6.5-3.08-3.08-.846.846%2C3.922%2C3.922Z%22 transform%3D%22translate(-3.375 -3.375)%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center;width:20px;height:20px;display:inline-block;top:10px;left:10px}.colours .colour.main{box-sizing:border-box;width:40px;height:40px;display:inline-block;padding:0;border:1px solid #C6C6C6}.bundling{text-align:right;top:30px}.bundling span.text{display:inline-block;position:relative;top:-18px}.switch{position:relative;display:inline-block;width:60px;margin-top:-4px;height:30px}.switch input{opacity:0;width:0;height:0}.switch input:not(:checked)+.slider:after{content:\"NO\";right:10px;position:absolute;color:#fff;top:5px;font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.switch input:checked+.slider{background-color:#b61828}.switch input:checked+.slider:before{transform:translate(26px);left:8px}.switch input:checked+.slider:after{content:\"YES\";left:8px;position:absolute;color:#fff;top:6px;font-size:var(--fontsize12);font-family:\"Arial Bold\",sans-serif}.switch input:focus+.slider{box-shadow:0 0 1px #2196f3}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#a6a6a5;transition:.4s}.slider:before{position:absolute;content:\"\";height:21px;width:22px;top:4px;left:5px;bottom:4px;background-color:#fff;transition:.4s}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}::ng-deep .info-icon{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%0D  %3Cpath id%3D%22Icon_metro-info%22 data-name%3D%22Icon metro-info%22 d%3D%22M9.571%2C6.678a.752.752%2C0%2C0%2C1%2C.75-.75h.5a.752.752%2C0%2C0%2C1%2C.75.75v.5a.752.752%2C0%2C0%2C1-.75.75h-.5a.752.752%2C0%2C0%2C1-.75-.75Zm3%2C7.25h-4v-1h1v-3h-1v-1h3v4h1Zm-2-12a8%2C8%2C0%2C1%2C0%2C8%2C8%2C8%2C8%2C0%2C0%2C0-8-8Zm0%2C14.5a6.5%2C6.5%2C0%2C1%2C1%2C6.5-6.5A6.5%2C6.5%2C0%2C0%2C1%2C10.571%2C16.428Z%22 transform%3D%22translate(-2.571 -1.928)%22 fill%3D%22%23c6c6c6%22%2F%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center;width:16px;height:16px;display:inline-block;top:3px}::ng-deep .edit-bundle-form .modal-dialog{padding:10px;transform:translateY(-50%);top:30%;margin:0 auto}::ng-deep .edit-bundle-form .modal-header{border-bottom:0}::ng-deep .edit-bundle-form .modal-body{padding-top:0;padding-bottom:0}::ng-deep .edit-bundle-form .modal-footer{border-top:none}::ng-deep .edit-bundle-form .modal-footer button{background-color:#1d1d1b;text-transform:uppercase;text-decoration:none;height:44px;font-family:\"Arial Bold\",sans-serif;min-width:86px;color:#fff;font-size:var(--fontsize14)}::ng-deep .edit-bundle-form .modal-footer button.btn-light{border:none;background-color:#fff;color:#1d1d1b;text-decoration:underline;text-transform:capitalize;font-size:var(--fontsize16);font-family:\"Arial Regular\",sans-serif}::ng-deep .edit-bundle-form .table th{text-transform:capitalize}::ng-deep .edit-bundle-form .table tr,::ng-deep .edit-bundle-form .table td,::ng-deep .edit-bundle-form .table th{border:none;text-align:left;padding-bottom:0;padding-top:10px}::ng-deep .edit-bundle-form .table td:nth-child(1){width:100px;max-width:100px;min-width:100px;padding-right:15px}::ng-deep .edit-bundle-form .table td:nth-child(2){width:150px}::ng-deep main{overflow-x:hidden}::ng-deep main .no-border{border:none!important}::ng-deep main .full-width{max-width:100%!important}::ng-deep main .add-more{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2219%22 height%3D%2219%22 viewBox%3D%220 0 19 19%22%3E%0D  %3Cpath id%3D%22Icon_awesome-plus-circle%22 data-name%3D%22Icon awesome-plus-circle%22 d%3D%22M10.063.563a9.5%2C9.5%2C0%2C1%2C0%2C9.5%2C9.5A9.5%2C9.5%2C0%2C0%2C0%2C10.063.563Zm5.516%2C10.573a.461.461%2C0%2C0%2C1-.46.46H11.595v3.524a.461.461%2C0%2C0%2C1-.46.46H8.99a.461.461%2C0%2C0%2C1-.46-.46V11.595H5.006a.461.461%2C0%2C0%2C1-.46-.46V8.99a.461.461%2C0%2C0%2C1%2C.46-.46H8.53V5.006a.461.461%2C0%2C0%2C1%2C.46-.46h2.145a.461.461%2C0%2C0%2C1%2C.46.46V8.53h3.524a.461.461%2C0%2C0%2C1%2C.46.46Z%22 transform%3D%22translate(-0.563 -0.563)%22%2F%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center;width:20px;height:20px;display:inline-block;top:4px}::ng-deep main .remove-icon{position:relative;top:-4px}::ng-deep main .bg-white{background:#ffffff;border-radius:5px}::ng-deep main sub{bottom:0em;font-size:var(--fontsize12)}::ng-deep main hr{border-top:2px solid #C6C6C6}::ng-deep main .product-name{font-family:\"Helvetica Neue Regular\",sans-serif;font-size:var(--fontsize54)}::ng-deep main .colours-link{color:#000;text-decoration:underline;font-size:var(--fontsize14);cursor:pointer}::ng-deep main .colours-link:hover{color:#fa4d56}::ng-deep main .quantity{width:100%}::ng-deep main .quantity .simple{background:none;border:none}::ng-deep main .quantity table{min-width:80%}::ng-deep main .quantity table th{padding:0 10px}::ng-deep main .quantity table th:nth-child(3){min-width:92px}::ng-deep main .quantity table td{padding:10px;box-sizing:border-box}::ng-deep main .quantity table td:nth-child(1){width:80px;min-width:80px}::ng-deep main .quantity table td:nth-child(2){width:110px;min-width:110px}::ng-deep main .quantity table td:nth-child(3){width:100%;text-align:left;position:relative}::ng-deep main .quantity table td:nth-child(3) button{position:absolute;top:23%}::ng-deep main .quantity table td input{width:100%}::ng-deep main .quantity table td .dropleft .dropdown-menu{top:35px!important}::ng-deep main .quantity table td .dropleft .dropdown-menu .dropdown-item{cursor:pointer}::ng-deep main .quantity table td .dropleft .dropdown-toggle:before{display:none}::ng-deep main .quantity table td .side-menu-button{position:absolute;right:10px;top:16px}::ng-deep main .quantity table.accessories .prod-qty{max-width:65px}::ng-deep main .quantity table.has-bundle td:nth-child(3){width:95px}::ng-deep main .quantity table.has-bundle td:nth-child(4){width:170px}@media screen and (max-width: 767px){::ng-deep main .quantity table.has-bundle td:nth-child(4){display:none}}::ng-deep main .table.attributes-table{border:none}::ng-deep main .table.attributes-table th{background-color:#646363;font-family:\"Arial Bold\",sans-serif;color:#fff;height:35px;vertical-align:middle}::ng-deep main .table.attributes-table td{vertical-align:top}::ng-deep main .add-to-cart{background:#1D1D1B;width:100%;height:44px;font-family:\"Arial Bold\",sans-serif;text-align:center;color:#fff;font-size:var(--fontsize14)}::ng-deep main .add-to-cart:disabled{cursor:not-allowed;border:1px solid #A6A6A5;background:#A6A6A5}::ng-deep main .disable{cursor:not-allowed!important}::ng-deep main .tabs{display:flex;align-items:center;padding:15px;width:100%}::ng-deep main .tabs .tab-link{display:flex;width:31.7%;box-sizing:border-box;margin-right:2%;border:1px solid #1D1D1B;padding:0;background-color:#fff;align-items:center;cursor:pointer}::ng-deep main .tabs .tab-link:last-child{margin-right:0}::ng-deep main .tabs .tab-link .icon{width:44px;min-width:44px;height:44px;border-right:1px solid #1D1D1B}::ng-deep main .tabs .tab-link .icon.product-overiew{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2226%22 height%3D%2222%22 viewBox%3D%220 0 26 22%22%3E%0D  %3Cg id%3D%22Group_14012%22 data-name%3D%22Group 14012%22 transform%3D%22translate(-316 -1291)%22%3E%0D    %3Cpath id%3D%22Rectangle_1493%22 data-name%3D%22Rectangle 1493%22 d%3D%22M1%2C1V5H5V1H1M0%2C0H6V6H0Z%22 transform%3D%22translate(316 1291)%22 fill%3D%22%231d1d1b%22%2F%3E%0D    %3Cpath id%3D%22Rectangle_1494%22 data-name%3D%22Rectangle 1494%22 d%3D%22M1%2C1V5H5V1H1M0%2C0H6V6H0Z%22 transform%3D%22translate(316 1299)%22 fill%3D%22%231d1d1b%22%2F%3E%0D    %3Cpath id%3D%22Rectangle_1495%22 data-name%3D%22Rectangle 1495%22 d%3D%22M1%2C1V5H5V1H1M0%2C0H6V6H0Z%22 transform%3D%22translate(316 1307)%22 fill%3D%22%231d1d1b%22%2F%3E%0D    %3Cpath id%3D%22Line_464%22 data-name%3D%22Line 464%22 d%3D%22M18%2C.5H0v-1H18Z%22 transform%3D%22translate(324 1294)%22 fill%3D%22%231d1d1b%22%2F%3E%0D    %3Cpath id%3D%22Line_465%22 data-name%3D%22Line 465%22 d%3D%22M18%2C.5H0v-1H18Z%22 transform%3D%22translate(324 1302)%22 fill%3D%22%231d1d1b%22%2F%3E%0D    %3Cpath id%3D%22Line_466%22 data-name%3D%22Line 466%22 d%3D%22M18%2C.5H0v-1H18Z%22 transform%3D%22translate(324 1310)%22 fill%3D%22%231d1d1b%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}::ng-deep main .tabs .tab-link .icon.downloads{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2221%22 height%3D%2221%22 viewBox%3D%220 0 21 21%22%3E%0D  %3Cg id%3D%22Group_14014%22 data-name%3D%22Group 14014%22 transform%3D%22translate(0.5 0.5)%22%3E%0D    %3Cpath id%3D%22Path_11231%22 data-name%3D%22Path 11231%22 d%3D%22M23.848%2C18.9%2C15.99%2C11.175h4.558V1.282h6.6v9.893h4.558Zm-5.414-6.724L23.848%2C17.5l5.414-5.322H26.147V2.282h-4.6v9.893Z%22 transform%3D%22translate(-13.85 -1.782)%22%2F%3E%0D    %3Cpath id%3D%22Path_11232%22 data-name%3D%22Path 11232%22 d%3D%22M22.282%2C69.593h-21V62.275h1v6.318h19V62.275h1Z%22 transform%3D%22translate(-1.781 -49.093)%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}::ng-deep main .tabs .tab-link .icon.related-products{position:relative;background:url(\"data:image/svg+xml,%3Csvg id%3D%22Group_14016%22 data-name%3D%22Group 14016%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22%3E%0D  %3Cpath id%3D%22Rectangle_1364%22 data-name%3D%22Rectangle 1364%22 d%3D%22M1%2C1V8H8V1H1M0%2C0H9V9H0Z%22 transform%3D%22translate(0 11)%22 fill%3D%22%231d1d1b%22%2F%3E%0D  %3Cpath id%3D%22Rectangle_1366%22 data-name%3D%22Rectangle 1366%22 d%3D%22M1%2C1V8H8V1H1M0%2C0H9V9H0Z%22 transform%3D%22translate(11 11)%22 fill%3D%22%231d1d1b%22%2F%3E%0D  %3Cpath id%3D%22Rectangle_1365%22 data-name%3D%22Rectangle 1365%22 d%3D%22M1%2C1V8H8V1H1M0%2C0H9V9H0Z%22 fill%3D%22%231d1d1b%22%2F%3E%0D  %3Cg id%3D%22Group_13038%22 data-name%3D%22Group 13038%22 transform%3D%22translate(11)%22%3E%0D    %3Cpath id%3D%22Line_321%22 data-name%3D%22Line 321%22 d%3D%22M.5%2C9h-1V0h1Z%22 transform%3D%22translate(4.5)%22 fill%3D%22%231d1d1b%22%2F%3E%0D    %3Cpath id%3D%22Line_322%22 data-name%3D%22Line 322%22 d%3D%22M9%2C.5H0v-1H9Z%22 transform%3D%22translate(0 4.5)%22 fill%3D%22%231d1d1b%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}::ng-deep main .tabs .tab-link .label{font-size:var(--fontsize14);font-family:\"Arial Bold\",sans-serif;text-transform:uppercase;text-align:center;width:100%;padding:8px}::ng-deep main .tabs .tab-link:hover,::ng-deep main .tabs .tab-link.active{color:#fff;background:#1D1D1B}::ng-deep main .tabs .tab-link:hover .icon,::ng-deep main .tabs .tab-link.active .icon{border-right:1px solid #ffffff}::ng-deep main .tabs .tab-link:hover .icon.product-overiew,::ng-deep main .tabs .tab-link.active .icon.product-overiew{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2226%22 height%3D%2222%22 viewBox%3D%220 0 26 22%22%3E%0D  %3Cg id%3D%22Group_14011%22 data-name%3D%22Group 14011%22 transform%3D%22translate(-316 -1291)%22%3E%0D    %3Cpath id%3D%22Rectangle_1493%22 data-name%3D%22Rectangle 1493%22 d%3D%22M1%2C1V5H5V1H1M0%2C0H6V6H0Z%22 transform%3D%22translate(316 1291)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Rectangle_1494%22 data-name%3D%22Rectangle 1494%22 d%3D%22M1%2C1V5H5V1H1M0%2C0H6V6H0Z%22 transform%3D%22translate(316 1299)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Rectangle_1495%22 data-name%3D%22Rectangle 1495%22 d%3D%22M1%2C1V5H5V1H1M0%2C0H6V6H0Z%22 transform%3D%22translate(316 1307)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Line_464%22 data-name%3D%22Line 464%22 d%3D%22M18%2C.5H0v-1H18Z%22 transform%3D%22translate(324 1294)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Line_465%22 data-name%3D%22Line 465%22 d%3D%22M18%2C.5H0v-1H18Z%22 transform%3D%22translate(324 1302)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Line_466%22 data-name%3D%22Line 466%22 d%3D%22M18%2C.5H0v-1H18Z%22 transform%3D%22translate(324 1310)%22 fill%3D%22%23fff%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}::ng-deep main .tabs .tab-link:hover .icon.downloads,::ng-deep main .tabs .tab-link.active .icon.downloads{background:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2221%22 height%3D%2221%22 viewBox%3D%220 0 21 21%22%3E%0D  %3Cg id%3D%22Group_14017%22 data-name%3D%22Group 14017%22 transform%3D%22translate(0.5 0.5)%22%3E%0D    %3Cpath id%3D%22Path_11231%22 data-name%3D%22Path 11231%22 d%3D%22M23.848%2C18.9%2C15.99%2C11.175h4.558V1.282h6.6v9.893h4.558Zm-5.414-6.724L23.848%2C17.5l5.414-5.322H26.147V2.282h-4.6v9.893Z%22 transform%3D%22translate(-13.85 -1.782)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Path_11232%22 data-name%3D%22Path 11232%22 d%3D%22M22.282%2C69.593h-21V62.275h1v6.318h19V62.275h1Z%22 transform%3D%22translate(-1.781 -49.093)%22 fill%3D%22%23fff%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}::ng-deep main .tabs .tab-link:hover .icon.related-products,::ng-deep main .tabs .tab-link.active .icon.related-products{background:url(\"data:image/svg+xml,%3Csvg id%3D%22Group_14015%22 data-name%3D%22Group 14015%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22%3E%0D  %3Cpath id%3D%22Rectangle_1364%22 data-name%3D%22Rectangle 1364%22 d%3D%22M1%2C1V8H8V1H1M0%2C0H9V9H0Z%22 transform%3D%22translate(0 11)%22 fill%3D%22%23fff%22%2F%3E%0D  %3Cpath id%3D%22Rectangle_1366%22 data-name%3D%22Rectangle 1366%22 d%3D%22M1%2C1V8H8V1H1M0%2C0H9V9H0Z%22 transform%3D%22translate(11 11)%22 fill%3D%22%23fff%22%2F%3E%0D  %3Cpath id%3D%22Rectangle_1365%22 data-name%3D%22Rectangle 1365%22 d%3D%22M1%2C1V8H8V1H1M0%2C0H9V9H0Z%22 fill%3D%22%23fff%22%2F%3E%0D  %3Cg id%3D%22Group_13038%22 data-name%3D%22Group 13038%22 transform%3D%22translate(11)%22%3E%0D    %3Cpath id%3D%22Line_321%22 data-name%3D%22Line 321%22 d%3D%22M.5%2C9h-1V0h1Z%22 transform%3D%22translate(4.5)%22 fill%3D%22%23fff%22%2F%3E%0D    %3Cpath id%3D%22Line_322%22 data-name%3D%22Line 322%22 d%3D%22M9%2C.5H0v-1H9Z%22 transform%3D%22translate(0 4.5)%22 fill%3D%22%23fff%22%2F%3E%0D  %3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\") no-repeat center}.modal-title{font-family:\"Arial Bold\",sans-serif}.invite-pop-close{cursor:pointer}.more-content{display:flex;border:1px solid #548AF7;padding:8px;background-color:#edf5ff}.more-content img{position:relative;top:-12px}@media screen and (max-width: 767px){::ng-deep main .category-image{max-width:320px;width:100%!important}::ng-deep main .tabs{flex-direction:row;align-items:stretch}::ng-deep main .tabs .tab-link{align-items:center;flex-direction:column}::ng-deep main .tabs .tab-link .icon{border-right:none}}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1.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: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "async": i5.AsyncPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomProductQuantityFormComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'app-custom-product-quantity-form',
                    templateUrl: './custom-product-quantity-form.component.html',
                    styleUrls: ['./custom-product-quantity-form.component.scss'],
                }]
        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i2.CartService }, { type: i3.ActiveCartService }, { type: i4.CurrentProductService }]; }, propDecorators: { hasBundle: [{
                type: Input
            }], productCode: [{
                type: Input
            }], productDetails: [{
                type: Input
            }], unitType: [{
                type: Input
            }], accessoriesPrice: [{
                type: Input
            }], selectedColour: [{
                type: Input
            }], cuttingValidation: [{
                type: Input
            }], finishedVariantDetails: [{
                type: Input
            }], finishedAvailableColours: [{
                type: Input
            }], isFinishedProduct: [{
                type: Input
            }], isFlashingProduct: [{
                type: Input
            }], listView: [{
                type: Input
            }], closeInviteModal: [{
                type: ViewChild,
                args: ['closeInviteModal']
            }], closebutton: [{
                type: ViewChild,
                args: ['closebutton']
            }], updateCartEntires: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 