@vendasta/store/fesm2015/vendasta-store.js

import { CommonModule } from '@angular/common';
import { Component, Input, NgModule, EventEmitter, Output, Injectable, ChangeDetectionStrategy, Pipe, ChangeDetectorRef, InjectionToken, Inject } from '@angular/core';
import { MatCardModule, MatButtonModule, MatIconModule, MatMenuModule, MatChipsModule, MatTooltipModule, MatCheckboxModule, MatExpansionModule, MatInputModule, MatOptionModule, MatProgressSpinnerModule, MatSelectModule, MatListModule as MatListModule$1, MatDividerModule } from '@angular/material';
import { ImageTransformationService, ImageTransformationModule } from '@vendasta/core/image-transformation';
import { VaIconModule, VaBadgeModule, VaSafeHtmlModule, VaListModule, VaImageGalleryModule, VaBreadcrumbsModule, CheckboxFilterField, FilterSection, Filters, TabbedFilterField, FilterService, UIKitModule } from '@vendasta/uikit';
import { DisplayPriceService, CoreSharedModule, formatDisplayPrice, formatBillingFrequency, Addon } from '@vendasta/core/shared';
import { BehaviorSubject, combineLatest, of, ReplaySubject, merge, zip } from 'rxjs';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { map, switchMap, debounceTime, distinctUntilChanged, startWith, filter, take, skipWhile, shareReplay, tap } from 'rxjs/operators';
import { Validators, FormControl, FormGroup, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatListModule } from '@angular/material/list';
import { VaFormsModule } from '@vendasta/forms';
import { BillingModel, buildBilledProductFromProductPricingAndAddon, BillingService, BillingModule } from '@vendasta/core/billing';
import { FieldType, Field, CustomField, AddonKey, CommonField } from '@vendasta/sales-orders';
import uuid from 'uuid/v4';
import { MatProgressSpinnerModule as MatProgressSpinnerModule$1 } from '@angular/material/progress-spinner';
import { isNullOrUndefined } from 'util';
import { Categories, Pricing as Pricing$1, Currency } from '@vendasta/core/marketplace-packages';
import { trigger, state, style, transition, animate } from '@angular/animations';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/*tslint:disable*/
class En {
}
En.en = {
    "FRONTEND.STORE": {
        "TOTAL": "Total",
        "CONTACT_SALES": "Contact Sales",
        "FREE": "Free",
        "STARTING_AT": "Starting at",
        "ENABLED_UPPER": "ENABLED",
        "ENABLE_UPPER": "ENABLE",
        "MIN_TO_MAX": "{{minRange}} to {{maxRange}}",
        "PRODUCT_PRICING_WITH_FREQUENCY": "{{pricingTier}} accounts {{frequency}}",
        "COMMITMENT_WITH_RENEWAL": "*{{initial}} {{frequencyString}} minimum, renews for {{recurring}} {{frequencyString}} periods",
        "COMMITMENT": "${{initial}} ${{frequencyString}} commitment",
        "PRICING_FREQUENCIES": {
            "MONTH": "month",
            "YEAR": "year"
        },
        "REQUIRES_DESCRIPTOR": "(Requires {{requirementName}})",
        "ADMINISTRATIVE_QUESTIONS": "Administrative Questions",
        "AUTO_TITLE_TEXT": {
            "SOME_FIELDS_INVALID": "* Some fields are invalid and/or required but empty",
            "OPTIONAL_FIELDS_UNANSWERED": "Optional fields unanswered",
            "COMPLETE": "Complete"
        },
        "REQUIRES": "Requires",
        "ENABLED_WITH_PREREQUISITE": "Enabled with {{prerequisite}}",
        "PRICE_APPLIES_PER_UNIT": "Price applies per unit within a range",
        "PRICE_APPLIES_TO_ALL_UNITS": "Price applies to all units once range is met",
        "PRICING": "Pricing",
        "FAQS": "FAQs",
        "GALLERY": "Gallery",
        "FILES": "Files",
        "GET_IT_NOW": "Get It Now",
        "CONTAINS_NUM_ITEMS": "Contains {{itemCount}} items"
    }
};
if (false) {
    /** @type {?} */
    En.en;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaPricingComponent {
    /**
     * @param {?} translateService
     * @param {?} displayPriceService
     */
    constructor(translateService, displayPriceService) {
        this.translateService = translateService;
        this.displayPriceService = displayPriceService;
        this.pricing = null;
        this.wrapFrequency = false;
        this.isAddon = false;
        this.hasVerifiedContract = false;
        this.highlightPrice = true;
        this.loaded = true;
        this.pricing$$ = new BehaviorSubject(null);
        this.billedProduct$$ = new BehaviorSubject(null);
        this.hasVerifiedContract$$ = new BehaviorSubject(false);
        this.translateService.setTranslation('en', En.en, true);
        this.isFree$ = combineLatest([this.pricing$, this.billedProduct$, this.hasVerifiedContract$]).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([pricing, billedProduct, hasVerifiedContract]) => {
            /** @type {?} */
            const isFreeHelper = (/**
             * @param {?} prices
             * @return {?}
             */
            (prices) => {
                return prices ? prices.some((/**
                 * @param {?} p
                 * @return {?}
                 */
                p => p.price === 0 || p.price === undefined)) : false;
            });
            if (hasVerifiedContract && billedProduct) {
                return billedProduct.pricingTiers.length === 1 ? isFreeHelper(billedProduct.pricingTiers) : false;
            }
            return !!pricing && isFreeHelper(pricing.prices);
        })));
        this.shouldContactSales$ = combineLatest([this.pricing$, this.billedProduct$, this.hasVerifiedContract$]).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([pricing, billedProduct, hasVerifiedContract]) => {
            /** @type {?} */
            const nestedPricesIsContactSales = (/**
             * @param {?} prices
             * @return {?}
             */
            (prices) => {
                return prices && prices.length > 0 ? prices.some((/**
                 * @param {?} p
                 * @return {?}
                 */
                p => p.price === null || p.price < 0)) : true;
            });
            if (hasVerifiedContract && billedProduct) {
                return nestedPricesIsContactSales(billedProduct.pricingTiers);
            }
            if (!pricing) {
                return true;
            }
            return nestedPricesIsContactSales(pricing.prices);
        })));
        this.isFlatPrice$ = this.billedProduct$.pipe(map((/**
         * @param {?} billedProduct
         * @return {?}
         */
        billedProduct => billedProduct.pricingTiers.length === 1)));
        this.pricingTierData$ = this.billedProduct$.pipe(switchMap((/**
         * @param {?} billedProduct
         * @return {?}
         */
        billedProduct => {
            /** @type {?} */
            const pricingTierObservables = billedProduct.pricingTiers.map((/**
             * @param {?} pricingTier
             * @return {?}
             */
            pricingTier => {
                return combineLatest(of(pricingTier.isStartingPrice), this.buildPricingTierString(pricingTier), this.buildPricingTierForProduct(pricingTier, billedProduct.billingFrequency), this.buildPricingTierForAddon(pricingTier), this.buildPriceStringForTier(pricingTier, billedProduct.billingFrequency, pricingTier.isStartingPrice), this.buildPriceStringForTier(pricingTier)).pipe(map((/**
                 * @param {?} __0
                 * @return {?}
                 */
                ([isStartingPrice, pricingTierString, pricingTierForProduct, pricingTierForAddon, priceStringForTier, priceStringForTierWithoutFreq]) => {
                    return {
                        isStartingPrice: isStartingPrice,
                        pricingTierString: pricingTierString,
                        pricingTierForProduct: pricingTierForProduct,
                        pricingTierForAddon: pricingTierForAddon,
                        priceStringForTier: priceStringForTier,
                        priceStringForTierWithoutFreq: priceStringForTierWithoutFreq
                    };
                })));
            }));
            return combineLatest(...pricingTierObservables);
        })));
        this.priceData$ = this.pricing$.pipe(switchMap((/**
         * @param {?} pricing
         * @return {?}
         */
        pricing => {
            /** @type {?} */
            const priceObservables = pricing.prices.map((/**
             * @param {?} price
             * @return {?}
             */
            price => {
                return combineLatest(of(price.isStartingPrice), this.buildPriceStringForPricing(price, pricing.currency, true, false), this.buildPriceStringForPricing(price, pricing.currency, false, true), this.buildFrequencyString(price.frequency)).pipe(map((/**
                 * @param {?} __0
                 * @return {?}
                 */
                ([isStartingPrice, priceStringForPricingWithoutFrequency, priceStringForPricingWithFrequency, frequencyString]) => {
                    return {
                        isStartingPrice: isStartingPrice,
                        priceStringForPricingWithoutFrequency: priceStringForPricingWithoutFrequency,
                        priceStringForPricingWithFrequency: priceStringForPricingWithFrequency,
                        frequencyString: frequencyString
                    };
                })));
            }));
            return combineLatest(...priceObservables);
        })));
        this.commitmentMessage$ = this.buildCommitmentMessage();
    }
    /**
     * @return {?}
     */
    get pricing$() {
        return this.pricing$$.asObservable();
    }
    /**
     * @return {?}
     */
    get billedProduct$() {
        return this.billedProduct$$.asObservable();
    }
    /**
     * @return {?}
     */
    get hasVerifiedContract$() {
        return this.hasVerifiedContract$$.asObservable();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        if (changes.hasOwnProperty('pricing')) {
            this.pricing$$.next(changes.pricing.currentValue);
        }
        if (changes.hasOwnProperty('billedProduct')) {
            this.billedProduct$$.next(changes.billedProduct.currentValue);
        }
        if (changes.hasOwnProperty('hasVerifiedContract')) {
            this.hasVerifiedContract$$.next(changes.hasVerifiedContract.currentValue);
        }
    }
    /**
     * @param {?} tier
     * @return {?}
     */
    buildPricingTierString(tier) {
        /** @type {?} */
        let max = String(tier.rangeMax);
        if (tier.rangeMax === -1) {
            max = '∞';
            if (tier.rangeMin === 0 || tier.rangeMin === 1) {
                return of('');
            }
        }
        return this.translateService.stream('FRONTEND.STORE.MIN_TO_MAX', { minRange: String(tier.rangeMin), maxRange: max });
    }
    /**
     * @param {?} tier
     * @param {?=} frequency
     * @return {?}
     */
    buildPricingTierForProduct(tier, frequency) {
        return combineLatest(this.buildPricingTierString(tier), this.buildFrequencyString(frequency)).pipe(switchMap((/**
         * @param {?} __0
         * @return {?}
         */
        ([pricingTier, formattedFrequency]) => {
            if (pricingTier) {
                return this.translateService.stream('FRONTEND.STORE.PRODUCT_PRICING_WITH_FREQUENCY', {
                    pricingTier: pricingTier,
                    frequency: formattedFrequency
                });
            }
            return of(formattedFrequency);
        })));
    }
    /**
     * @param {?} tier
     * @return {?}
     */
    buildPricingTierForAddon(tier) {
        return this.buildPricingTierString(tier).pipe(map((/**
         * @param {?} pricingRange
         * @return {?}
         */
        pricingRange => pricingRange ? pricingRange : '')));
    }
    /**
     * @param {?} price
     * @param {?} currency
     * @param {?} excludeFrequency
     * @param {?} canIncludeStartingAtPrefix
     * @return {?}
     */
    buildPriceStringForPricing(price, currency, excludeFrequency, canIncludeStartingAtPrefix) {
        return this.displayPriceService.formatDisplayPrice(price.price, currency, (/** @type {?} */ ((excludeFrequency ? '' : price.frequency))), true, true, true, price.isStartingPrice && canIncludeStartingAtPrefix);
    }
    /**
     * @param {?} tier
     * @param {?=} frequency
     * @param {?=} isStartingPrice
     * @return {?}
     */
    buildPriceStringForTier(tier, frequency, isStartingPrice) {
        return this.displayPriceService.formatDisplayPrice(tier.price, this.billedProduct.currency, (/** @type {?} */ (frequency)), undefined, undefined, undefined, isStartingPrice);
    }
    /**
     * @param {?=} frequency
     * @return {?}
     */
    buildFrequencyString(frequency) {
        return this.displayPriceService.formatBillingFrequency(frequency);
    }
    /**
     * @return {?}
     */
    buildCommitmentMessage() {
        return combineLatest([
            this.translateService.stream('FRONTEND.STORE.PRICING_FREQUENCIES'),
            this.billedProduct$,
            this.pricing$,
            this.isFree$,
            this.shouldContactSales$
        ]).pipe(switchMap((/**
         * @param {?} __0
         * @return {?}
         */
        ([frequencyTranslations, billedProduct, pricing, isFree, shouldContactSales]) => {
            /** @type {?} */
            const frequency = billedProduct ? billedProduct.billingFrequency.toString().toLowerCase() :
                pricing && pricing.prices.length > 0 ? pricing.prices[0].frequency.toLowerCase() : '';
            /** @type {?} */
            let frequencyString = '';
            if (frequency === 'yearly') {
                frequencyString = frequencyTranslations.YEAR;
            }
            else if (frequency === 'monthly') {
                frequencyString = frequencyTranslations.MONTH;
            }
            if (!frequencyString || isFree || shouldContactSales) {
                return of('');
            }
            if (billedProduct && billedProduct.commitment) {
                /** @type {?} */
                const initial = billedProduct.commitment.initial;
                /** @type {?} */
                const recurring = billedProduct.commitment.recurring;
                return this.translateService.stream('FRONTEND.STORE.COMMITMENT_WITH_RENEWAL', {
                    initial: initial,
                    frequencyString: frequencyString,
                    recurring: recurring,
                });
            }
            return of('');
        })));
    }
}
VaPricingComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-pricing',
                template: "<ng-container *ngIf=\"highlightPrice\">\n  <highlight-pricing [pricing]=\"pricing\"\n                     [billedProduct]=\"billedProduct\"\n                     [highlightPrice]=\"highlightPrice\"\n                     [isAddon]=\"isAddon\"\n                     [hasVerifiedContract]=\"hasVerifiedContract\"\n                     [wrapFrequency]=\"wrapFrequency\"\n                     [loaded]=\"loaded\">\n  </highlight-pricing>\n</ng-container>\n<ng-container *ngIf=\"!highlightPrice\">\n  <table-pricing [pricing]=\"pricing\"\n                 [highlightPrice]=\"highlightPrice\"\n                 [billedProduct]=\"billedProduct\"\n                 [hasVerifiedContract]=\"hasVerifiedContract\"\n                 [loaded]=\"loaded\">\n  </table-pricing>\n</ng-container>\n",
                styles: [""]
            }] }
];
/** @nocollapse */
VaPricingComponent.ctorParameters = () => [
    { type: TranslateService },
    { type: DisplayPriceService }
];
VaPricingComponent.propDecorators = {
    pricing: [{ type: Input }],
    billedProduct: [{ type: Input }],
    wrapFrequency: [{ type: Input }],
    isAddon: [{ type: Input }],
    hasVerifiedContract: [{ type: Input }],
    highlightPrice: [{ type: Input }],
    loaded: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    VaPricingComponent.prototype.pricing;
    /** @type {?} */
    VaPricingComponent.prototype.billedProduct;
    /** @type {?} */
    VaPricingComponent.prototype.wrapFrequency;
    /** @type {?} */
    VaPricingComponent.prototype.isAddon;
    /** @type {?} */
    VaPricingComponent.prototype.hasVerifiedContract;
    /** @type {?} */
    VaPricingComponent.prototype.highlightPrice;
    /** @type {?} */
    VaPricingComponent.prototype.loaded;
    /** @type {?} */
    VaPricingComponent.prototype.pricing$$;
    /** @type {?} */
    VaPricingComponent.prototype.billedProduct$$;
    /** @type {?} */
    VaPricingComponent.prototype.hasVerifiedContract$$;
    /** @type {?} */
    VaPricingComponent.prototype.isFree$;
    /** @type {?} */
    VaPricingComponent.prototype.shouldContactSales$;
    /** @type {?} */
    VaPricingComponent.prototype.isFlatPrice$;
    /** @type {?} */
    VaPricingComponent.prototype.pricingTierData$;
    /** @type {?} */
    VaPricingComponent.prototype.priceData$;
    /** @type {?} */
    VaPricingComponent.prototype.commitmentMessage$;
    /**
     * @type {?}
     * @private
     */
    VaPricingComponent.prototype.translateService;
    /**
     * @type {?}
     * @private
     */
    VaPricingComponent.prototype.displayPriceService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class HighlightPricingComponent extends VaPricingComponent {
}
HighlightPricingComponent.decorators = [
    { type: Component, args: [{
                selector: 'highlight-pricing',
                template: "<ng-container *ngIf=\"loaded; else loading\">\n    <div class=\"no-price\" *ngIf=\"shouldContactSales$ | async; else dontContactSales\">\n        {{ 'FRONTEND.STORE.CONTACT_SALES' | translate }}\n    </div>\n    <ng-template #dontContactSales>\n        <div class=\"no-price\" *ngIf=\"isFree$ | async; else notFree\">\n            <b>{{ 'FRONTEND.STORE.FREE' | translate }}</b>\n        </div>\n        <ng-template #notFree>\n            <ng-container *ngIf=\"!isAddon\">\n                <ng-container *ngIf=\"hasVerifiedContract && billedProduct; else usePricing\">\n                    <div *ngFor=\"let tier of pricingTierData$ | async\" class=\"price-box\">\n                        <span>\n                            <span *ngIf=\"tier.isStartingPrice\" class=\"starting-at\">{{ 'FRONTEND.STORE.STARTING_AT' | translate }}</span>\n                            <b class=\"price-number\">{{ tier.priceStringForTierWithoutFreq }}</b>\n                        </span>\n                        <span class=\"tier-billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n                            {{ tier.pricingTierForProduct }}\n                        </span>\n                    </div>\n                </ng-container>\n                <ng-template #usePricing>\n                    <ng-container *ngIf=\"pricing?.prices\">\n                        <div *ngFor=\"let price of priceData$ | async; let i = index\" class=\"price-box\">\n                            <span>\n                              <span *ngIf=\"price.isStartingPrice\" class=\"starting-at\">{{ 'FRONTEND.STORE.STARTING_AT' | translate }}</span>\n                              <b class=\"price-number\">\n                                <ng-container *ngIf=\"i == 1\">+</ng-container>\n                                {{ price.priceStringForPricingWithoutFrequency }}\n                              </b>\n                            </span>\n                            <span *ngIf=\"price.frequencyString\" class=\"billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n                                {{ price.frequencyString }}\n                            </span>\n                        </div>\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n            <ng-container *ngIf=\"isAddon\">\n                <div *ngIf=\"hasVerifiedContract && billedProduct; else useAddonPricing\">\n                    <div *ngFor=\"let tier of pricingTierData$ | async\" class=\"price-box\">\n                        <span class=\"addon-billing-freq\">\n                            {{ tier.pricingTierForAddon }}\n                        </span>\n                        <span>\n                            <span *ngIf=\"tier.isStartingPrice\" class=\"starting-at\">{{ 'FRONTEND.STORE.STARTING_AT' | translate }}</span>\n                            <b class=\"price-number\">\n                                {{ tier.priceStringForTier }}\n                            </b>\n                        </span>\n                    </div>\n                </div>\n                <ng-template #useAddonPricing>\n                    <div class=\"price-box\">\n                        <span *ngIf=\"pricing?.prices[0].frequency\" class=\"addon-billing-freq\">\n                            {{ (priceData$ | async)[0]?.frequencyString }}\n                        </span>\n                        <span>\n                          <span *ngIf=\"pricing?.prices[0]?.isStartingPrice\" class=\"starting-at\">\n                            {{ 'FRONTEND.STORE.STARTING_AT' | translate }}\n                          </span>\n                          <b class=\"price-number\">\n                            {{ (priceData$ | async)[0]?.priceStringForPricingWithoutFrequency }}\n                          </b>\n                        </span>\n                    </div>\n                </ng-template>\n            </ng-container>\n          <div class=\"commitment\" *ngIf=\"billedProduct && billedProduct.commitment && billedProduct.commitment.initial > 1\">\n            {{ commitmentMessage$ | async }}\n          </div>\n        </ng-template>\n    </ng-template>\n</ng-container>\n<ng-template #loading>\n    <div class=\"stencil-pricing stencil-shimmer\"></div>\n</ng-template>\n",
                styles: [":host{color:#9e9e9e}.starting-at{margin-right:5px}.price-box{display:-webkit-box;display:flex;-webkit-box-align:baseline;align-items:baseline;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}.no-price{text-align:center}b{color:#212121;font-size:20px}@media screen and (max-width:600px){.no-price,.price-box,b{font-size:16px}}.billing-freq{text-transform:capitalize;-webkit-box-flex:1;flex:1}.tier-billing-freq{-webkit-box-flex:1;flex:1}.addon-billing-freq{padding-left:5px}.va-wrap{display:block}.stencil-pricing{height:1em}.commitment{color:#9e9e9e;font-size:12px;font-style:italic}"]
            }] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TablePricingComponent extends VaPricingComponent {
}
TablePricingComponent.decorators = [
    { type: Component, args: [{
                selector: 'table-pricing',
                template: "<ng-container *ngIf=\"loaded; else loading\">\n    <div *ngIf=\"hasVerifiedContract && billedProduct; else usePricing\">\n        <div class=\"price-container\" *ngIf=\"isFlatPrice$ | async; else notFlatPrice\">\n            <div class=\"price\">\n                {{ (pricingTierData$ | async)[0]?.priceStringForTier }}\n            </div>\n        </div>\n        <ng-template #notFlatPrice>\n            <div class=\"price-container--tiered\" *ngIf=\"!(isFlatPrice$ | async)\">\n                <div class=\"pricing-tier\" *ngFor=\"let tier of pricingTierData$ | async\">\n                    <div class=\"pricing-tier__range\">{{ tier.pricingTierString }}</div>\n                    <div class=\"pricing-tier__price\">\n                        {{ tier.priceStringForTier }}\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n        <div class=\"commitment\" *ngIf=\"billedProduct && billedProduct.commitment && billedProduct.commitment.initial > 1\">\n          {{ commitmentMessage$ | async }}\n        </div>\n    </div>\n    <ng-template #usePricing>\n        <div class=\"gray-font\">\n            <ng-container *ngIf=\"shouldContactSales$ | async; else dontContactSales\">\n                {{ 'FRONTEND.STORE.CONTACT_SALES' | translate }}\n            </ng-container>\n            <ng-template #dontContactSales>\n                <ng-container *ngIf=\"isFree$ | async; else notFree\">\n                    {{ 'FRONTEND.STORE.FREE' | translate }}\n                </ng-container>\n                <ng-template #notFree>\n                  {{ (priceData$ | async)[0].priceStringForPricingWithFrequency }}\n                  <div class=\"commitment\" *ngIf=\"billedProduct && billedProduct.commitment && billedProduct.commitment.initial > 1\">\n                    {{ commitmentMessage$ | async }}\n                  </div>\n                </ng-template>\n            </ng-template>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-template #loading>\n    <div class=\"stencil-pricing stencil-shimmer\"></div>\n</ng-template>\n",
                styles: [":host{color:#616161}.price-container--tiered{font-size:12px;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;display:-webkit-box;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.price-container--tiered .pricing-tier{border-bottom:1px solid #e0e0e0;padding:5px 0;display:-webkit-box;display:flex}.price-container--tiered .pricing-tier:first-child{padding-top:0}.price-container--tiered .pricing-tier:last-child{padding-bottom:0;border-bottom:none}.price-container--tiered .pricing-tier .pricing-tier__range{padding-right:20px;-webkit-box-flex:1;flex:1}.stencil-pricing{height:1em}.commitment{color:#9e9e9e;font-size:12px;font-style:italic}"]
            }] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaPricingModule {
}
VaPricingModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    CoreSharedModule,
                    TranslateModule
                ],
                declarations: [VaPricingComponent, HighlightPricingComponent, TablePricingComponent],
                exports: [VaPricingComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class StoreCardComponent {
    /**
     * @param {?} imageTransformationService
     * @param {?} translateService
     */
    constructor(imageTransformationService, translateService) {
        this.imageTransformationService = imageTransformationService;
        this.translateService = translateService;
        this.purchasedClicked = new EventEmitter();
        this.cardClicked = new EventEmitter();
        this.descriptionClicked = new EventEmitter();
        this.bannerClicked = new EventEmitter();
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @return {?}
     */
    getBannerColorForName() {
        // determine an icon color for a product with no icon by using the product name
        /** @type {?} */
        const COLOR_CODES = [
            '#EF5350', '#42A5F5', '#66BB6A', '#FFA726', '#AB47BC', '#FFCA28', '#EC407A', '#26C6DA',
            '#FF7B57'
        ];
        /** @type {?} */
        let nameSum = 0;
        /** @type {?} */
        const defaultColor = '#808080';
        if (!this.item.name) {
            return defaultColor;
        }
        for (let i = 0; i < this.item.name.length; i++) {
            nameSum += this.item.name[i].charCodeAt(0);
        }
        /** @type {?} */
        const index = nameSum % COLOR_CODES.length;
        return COLOR_CODES[index];
    }
    /**
     * @param {?} imageUrl
     * @return {?}
     */
    getSrcsetHeaderUrls(imageUrl) {
        return this.imageTransformationService.getSrcSetForImage(imageUrl, [680, 1360, 2720]);
    }
}
StoreCardComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-store-card',
                template: `
<mat-card class="hover-card" *ngIf="item" (click)="cardClicked.emit(item)">
<div class="hover-area">
  <div class="product-banner" (click)="bannerClicked.emit(item)"
  [style.background-color]="item.headerImageUrl ? '': getBannerColorForName()">
    <img class="img-container" *ngIf="item.headerImageUrl"
         [src]="item.headerImageUrl" [srcset]="getSrcsetHeaderUrls(item.headerImageUrl)">
  </div>

  <div class="description" (click)="descriptionClicked.emit(item)">
    <mat-card-header>
      <va-icon mat-card-avatar [diameter]="40" [name]="item.name" [iconUrl]="item.iconUrl"></va-icon>
      <mat-card-title>{{item.name}}</mat-card-title>
      <mat-card-subtitle>
        <ng-container *ngIf="item.pricing; else formatted">
          <va-pricing [pricing]="item.pricing"
                      [highlightPrice]="false"></va-pricing>
        </ng-container>
        <ng-template #formatted>{{item.formattedPrice}}</ng-template>
      </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content> {{ item.tagline }}
    </mat-card-content>
  </div>

  <button *ngIf="item.purchased !== undefined"
    mat-button color="primary" class="enabled-indicator" (click)="purchasedClicked.emit(item)" [disabled]="item.purchased">
    <i *ngIf="!item.purchased" class="material-icons">add</i>
    <i *ngIf="item.purchased" class="material-icons" style="color: #39B74A">check</i>
    <span>{{ (item.purchased ? 'FRONTEND.STORE.ENABLED_UPPER' : 'FRONTEND.STORE.ENABLE_UPPER') | translate }}</span>
  </button>
  </div>
</mat-card>
    `,
                styles: [":host{position:relative}::ng-deep .mat-card-header-text{width:100%}mat-card.hover-card{overflow:hidden;padding:0;margin-bottom:0}mat-card.hover-card mat-card-subtitle,mat-card.hover-card mat-card-title{margin:0 80px 0 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}mat-card.hover-card mat-card-subtitle{font-size:12px;margin-top:4px}.hover-area{position:relative;cursor:pointer}.product-banner{max-height:133px;overflow:hidden;display:-webkit-box;display:flex;width:100%;height:100px;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.product-banner img{max-width:100%}@media screen and (min-width:480px){.hover-area{padding-top:55%}.hover-area:hover .description{top:0}.hover-area:hover .enabled-indicator span{width:70px}.product-banner{max-height:none;position:absolute;height:60%;top:0}}.description{box-sizing:border-box;padding:10px 16px 0;overflow:hidden;background:#fff;color:#212121;-webkit-transition:.3s;transition:.3s}.description:after{content:'';display:block;width:100%;height:40%;position:absolute;bottom:0;left:0;background:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(255,255,255,0)),color-stop(70%,#fff));background:linear-gradient(rgba(255,255,255,0) 40%,#fff 70%)}mat-card-header{box-sizing:border-box;padding-bottom:16px;margin:0;height:40%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}mat-card-content{min-height:40px;max-height:80px;padding:16px;margin:0 -16px;border-top:1px solid #e0e0e0;font-size:12px}.enabled-indicator{position:absolute;right:8px;bottom:8px}.enabled-indicator span{display:inline-block;width:70px;overflow:hidden;-webkit-transition:.3s;transition:.3s}@media screen and (min-width:480px){.description{position:absolute;top:60%;width:100%;height:100%}.description:after{height:70%}mat-card-content{min-height:0;max-height:none}.enabled-indicator span{width:0}}button[mat-button]{padding:0 8px;min-width:0}mat-card-actions{position:relative;padding:8px!important;margin:0!important;text-align:right;border-top:1px solid #e0e0e0;background-color:#fff;color:#212121}.status{font-size:14px}.img-container{height:100%;width:100%}"]
            }] }
];
/** @nocollapse */
StoreCardComponent.ctorParameters = () => [
    { type: ImageTransformationService },
    { type: TranslateService }
];
StoreCardComponent.propDecorators = {
    item: [{ type: Input }],
    purchasedClicked: [{ type: Output }],
    cardClicked: [{ type: Output }],
    descriptionClicked: [{ type: Output }],
    bannerClicked: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    StoreCardComponent.prototype.item;
    /** @type {?} */
    StoreCardComponent.prototype.purchasedClicked;
    /** @type {?} */
    StoreCardComponent.prototype.cardClicked;
    /** @type {?} */
    StoreCardComponent.prototype.descriptionClicked;
    /** @type {?} */
    StoreCardComponent.prototype.bannerClicked;
    /**
     * @type {?}
     * @private
     */
    StoreCardComponent.prototype.imageTransformationService;
    /**
     * @type {?}
     * @private
     */
    StoreCardComponent.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class StoreCardModule {
}
StoreCardModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    VaIconModule,
                    MatCardModule,
                    MatButtonModule,
                    MatIconModule,
                    MatMenuModule,
                    ImageTransformationModule,
                    VaPricingModule,
                    TranslateModule
                ],
                declarations: [StoreCardComponent],
                exports: [StoreCardComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class StoreComponent {
    constructor() {
        this.items = [];
        this.searchable = true;
        this.itemClicked = new EventEmitter();
    }
    /**
     * @return {?}
     */
    get filteredItems() {
        if (this.filterTerm) {
            return this.items.filter((/**
             * @param {?} pkg
             * @return {?}
             */
            pkg => pkg.name.toLowerCase().indexOf(this.filterTerm.toLowerCase()) !== -1));
        }
        return this.items;
    }
}
StoreComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-store',
                template: `
  <div class="toolbar">
  <div *ngIf="searchable" class="table-controls-row">
      <va-search-box (update)="filterTerm = $event"></va-search-box>
  </div>
  </div>
  <div class="row row-gutters">
      <div *ngFor="let item of filteredItems" class="col-flex">
          <va-store-card [item]="item" (cardClicked)="this.itemClicked.emit(item)"></va-store-card>
      </div>
  </div>
  `,
                styles: [".flex-row{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.toolbar{padding:0;background-color:#fff;color:#616161}.toolbar .disabled{cursor:default}.toolbar .disabled mat-icon{cursor:default;color:#9e9e9e}.toolbar va-search-box{margin-right:10px;width:350px}.toolbar .table-controls-row{padding:0 10px 10px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.toolbar .table-controls-row:first-of-type{padding-top:10px}.top-border{border-top:1px solid #fff}.selected{background-color:#fff}.row{display:-webkit-box;display:flex;flex-wrap:wrap}.row+.row-gutters{margin-top:0}.row-gutters{margin-top:-20px;margin-left:-20px}.row-gutters>.col-flex{padding-top:20px;padding-left:20px}.col-flex{position:relative;max-width:100%;box-sizing:border-box;-webkit-box-flex:0;flex:0 0 auto;width:100%}@media screen and (min-width:480px){.col-flex{width:50%}}@media screen and (min-width:1200px){.col-flex{width:33.333333%}}"]
            }] }
];
StoreComponent.propDecorators = {
    items: [{ type: Input }],
    searchable: [{ type: Input }],
    itemClicked: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    StoreComponent.prototype.items;
    /** @type {?} */
    StoreComponent.prototype.searchable;
    /** @type {?} */
    StoreComponent.prototype.itemClicked;
    /** @type {?} */
    StoreComponent.prototype.filterTerm;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownFormSectionComponent {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        this.startOpen = false;
        this.displayAutoTitle = false;
        this.titleText = '';
        this.displayAutoDescription = true;
        this.descriptionText = '';
        this.editingHint = '';
        this.expandable = true;
        this.autoDescriptionText = '';
        this.iconName = 'help_outline';
        this.subscriptions = [];
        this.uniqueIndex = 1;
        this.autoTitleText = '';
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        const allFieldsHidden = this.fields.reduce((/**
         * @param {?} p
         * @param {?} c
         * @param {?} i
         * @param {?} a
         * @return {?}
         */
        (p, c, i, a) => p && c.hidden), true);
        if (allFieldsHidden) {
            this.expandable = false;
        }
        while (this.parentForm.controls.hasOwnProperty(this.titleText + this.uniqueIndex)) {
            this.uniqueIndex += 1;
        }
        this.parentForm.addControl(this.titleText + this.uniqueIndex, this.toFormGroup(this.fields));
        /** @type {?} */
        const form = (/** @type {?} */ (this.parentForm.controls[this.titleText + this.uniqueIndex]));
        for (const key in form.controls) {
            if (form.controls.hasOwnProperty(key)) {
                if (this.prepopulatedData != null && this.prepopulatedData.hasOwnProperty(key)) {
                    form.controls[key].setValue(this.prepopulatedData[key]);
                }
            }
        }
        this.subscriptions.push(combineLatest([
            form.statusChanges,
            this.translateService.stream('FRONTEND.STORE.AUTO_TITLE_TEXT')
        ]).subscribe((/**
         * @param {?} __0
         * @return {?}
         */
        ([change, autoTitleText]) => {
            /** @type {?} */
            let missingFields = false;
            for (const control in form.controls) {
                if (!form.controls[control].value || (form.controls[control].value.constructor === Array && !form.controls[control].value[0])) {
                    this.iconName = 'help_outline';
                    missingFields = true;
                    if (change === 'INVALID') {
                        this.autoTitleText = autoTitleText.SOME_FIELDS_INVALID;
                        if (form.controls[control].dirty || form.controls[control].touched) {
                            this.iconName = 'warning';
                            break;
                        }
                    }
                    else {
                        this.autoTitleText = autoTitleText.OPTIONAL_FIELDS_UNANSWERED;
                    }
                }
            }
            if (!missingFields) {
                this.iconName = 'check_circle';
                this.autoTitleText = autoTitleText.COMPLETE;
            }
        })));
        if (this.displayAutoDescription) {
            this.subscriptions.push(form.valueChanges.subscribe((/**
             * @param {?} changes
             * @return {?}
             */
            changes => {
                /** @type {?} */
                let description = '';
                for (const key in changes) {
                    if (changes.hasOwnProperty(key) && changes[key] != null && changes[key].length > 0) {
                        if (changes[key][0].name) {
                            for (const fileKey in changes[key]) {
                                if (changes[key][fileKey] != null) {
                                    description += changes[key][fileKey].name;
                                    description += ', ';
                                }
                            }
                        }
                        else {
                            description += changes[key];
                            description += ', ';
                        }
                    }
                }
                this.autoDescriptionText = description.substring(0, description.length - 2);
            })));
        }
        form.updateValueAndValidity({ onlySelf: false, emitEvent: true });
    }
    /**
     * @param {?} formFields
     * @return {?}
     */
    toFormGroup(formFields) {
        /** @type {?} */
        const group = {};
        formFields.forEach((/**
         * @param {?} field
         * @return {?}
         */
        field => {
            /** @type {?} */
            let validations;
            if (!field.required || field.hidden) {
                validations = field.validator;
            }
            else if (field.controlType === 'checkbox') {
                validations = [Validators.requiredTrue, field.validator];
            }
            else {
                validations = [Validators.required, field.validator];
            }
            /** @type {?} */
            const formControl = new FormControl({ value: field.value, disabled: field.disabled }, validations);
            group[field.id] = formControl;
            this.subscriptions.push(formControl.valueChanges.subscribe((/**
             * @param {?} value
             * @return {?}
             */
            value => (field.value = value))));
        }));
        return new FormGroup(group);
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.subscriptions.forEach((/**
         * @param {?} subscription
         * @return {?}
         */
        subscription => subscription.unsubscribe()));
    }
}
DropDownFormSectionComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-dropdown-form-section',
                template: `
    <mat-expansion-panel *ngIf="expandable || expandable == undefined" [expanded]="startOpen">
      <mat-expansion-panel-header [collapsedHeight]="'*'" [expandedHeight]="'*'">
        <div class="dropdown-form-header">
          <mat-icon
            [ngClass]="{invalid: iconName=='warning', valid: iconName=='check_circle', question: iconName=='help_outline'}">
            {{ iconName }}
          </mat-icon>
          <mat-panel-title *ngIf="!displayAutoTitle">
            {{ titleText }}
          </mat-panel-title>
          <mat-panel-title *ngIf="displayAutoTitle"
                           [ngClass]="{valid: iconName=='check_circle', invalid: iconName=='warning'}">
            <div class="title"> {{ titleText }}</div>
            <div *ngIf="titleText && autoTitleText"> &nbsp;</div>
            <div><ng-container><i> {{autoTitleText}} </i></ng-container></div>
          </mat-panel-title>
          <mat-panel-description *ngIf="displayAutoDescription" [ngClass]="{invalid: iconName=='warning'}">
            {{ autoDescriptionText }}
          </mat-panel-description>
          <mat-panel-description *ngIf="!displayAutoDescription" [ngClass]="{invalid: iconName=='warning'}">
            <i> {{descriptionText}} </i>
          </mat-panel-description>
        </div>
      </mat-expansion-panel-header>
      <div class="expansion-panel-body">
        <va-field *ngFor="let field of fields" [field]="field"
                  [form]="parentForm.controls[titleText + uniqueIndex]"
        ></va-field>
        <p *ngIf="editingHint != ''" class="editing-hint"><i>{{ editingHint }}</i></p>
      </div>
    </mat-expansion-panel>
  `,
                styles: [":host-context(va-dropdown-form-section){font-size:14px}:host-context(va-dropdown-form-section) .expansion-panel-body{margin-top:-10px;display:block}@media screen and (min-width:600px){:host-context(va-dropdown-form-section) .expansion-panel-body{width:60%}}.mat-expanded,.mat-expansion-panel{-webkit-transition:margin .4s;transition:margin .4s}mat-expansion-panel-header{min-height:48px;padding:12px 24px}.dropdown-form-header{width:90%;display:-webkit-box;display:flex}mat-panel-description{align-self:center;-webkit-box-flex:inherit;flex:inherit;display:initial;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}mat-panel-description.invalid{color:#c62828}mat-icon{margin-right:7px;-ms-grid-row-align:center;align-self:center}mat-icon.valid{color:#4caf50}mat-icon.invalid{color:#c62828}mat-icon.question{color:#9e9e9e}mat-panel-title{align-self:center;-webkit-box-flex:0;flex:none;margin-right:20px;display:-webkit-box;display:flex;max-width:100%}mat-panel-title div{display:-webkit-box;display:flex}mat-panel-title.valid{color:#4caf50}mat-panel-title.invalid{color:#c62828}.editing-hint{color:#9e9e9e}.title{color:#212121}.not-expandable-card{background:#fff;cursor:default;font-size:15px;display:-webkit-box;display:flex;height:48px;-webkit-box-align:center;align-items:center;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.not-expandable-card .not-expandable-icon{margin-left:24px}.not-expandable-card .not-expandable-header{display:-webkit-box;display:flex}.not-expandable-card .not-expandable-description{margin-left:22px}.not-expandable-card .valid{color:#4caf50}"]
            }] }
];
/** @nocollapse */
DropDownFormSectionComponent.ctorParameters = () => [
    { type: TranslateService }
];
DropDownFormSectionComponent.propDecorators = {
    prepopulatedData: [{ type: Input }],
    startOpen: [{ type: Input }],
    parentForm: [{ type: Input }],
    displayAutoTitle: [{ type: Input }],
    titleText: [{ type: Input }],
    displayAutoDescription: [{ type: Input }],
    descriptionText: [{ type: Input }],
    fields: [{ type: Input }],
    editingHint: [{ type: Input }],
    expandable: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    DropDownFormSectionComponent.prototype.prepopulatedData;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.startOpen;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.parentForm;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.displayAutoTitle;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.titleText;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.displayAutoDescription;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.descriptionText;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.fields;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.editingHint;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.expandable;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.autoDescriptionText;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.iconName;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.subscriptions;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.uniqueIndex;
    /** @type {?} */
    DropDownFormSectionComponent.prototype.autoTitleText;
    /**
     * @type {?}
     * @private
     */
    DropDownFormSectionComponent.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class FieldComponent {
    /**
     * @return {?}
     */
    get isValid() {
        return this.form.controls[this.field.id].valid || this.form.controls[this.field.id].pristine;
    }
    /**
     * @param {?} field
     * @return {?}
     */
    showCheckboxError(field) {
        return this.form.controls[field].errors && this.form.controls[field].errors.required && this.form.controls[field].touched;
    }
}
FieldComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-field',
                template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n  <div *ngIf=\"!field.hidden\" [ngClass]=\"{'for-office-use-only': field.forOfficeUseOnly}\">\n    <span *ngIf=\"field.forOfficeUseOnly\" class=\"office-text\">*For Office Use Only</span>\n\n    <ng-container *ngSwitchCase=\"'dropdown'\">\n      <ng-container *ngIf=\"!field.allowMultiples\">\n        <mat-form-field class=\"form-field-container\">\n            <mat-select matInput [formControlName]=\"field.id\" [id]=\"field.id\" [placeholder]=\"field.getLabel()\">\n                  <mat-option *ngFor=\"let option of field.options\" [value]=\"option.value\">{{ option.label }}</mat-option>\n            </mat-select>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n      </ng-container>\n      <ng-container *ngIf=\"field.allowMultiples\">\n        <va-input-tags class=\"form-field-container\" [id]=\"field.id\" [formControlName]=\"field.id\"\n          [placeholder]=\"field.getLabel()\"\n          [tooltip]=\"field.description\"\n          [required]=\"field.required\"\n          [options]=\"field.options\"\n          [allowDuplicates]=\"field.allowDuplicates\"\n          [maxFields]=\"field.maxChoices\">\n        </va-input-tags>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'textbox'\">\n        <mat-form-field class=\"form-field-container\">\n            <span matPrefix *ngIf=\"field.prefix\"> {{ field.prefix}} &nbsp;</span>\n            <input matInput [type]=\"field.textboxType\" [id]=\"field.id\" [formControlName]=\"field.id\" [placeholder]=\"field.getLabel()\" [pattern]=\"field.regexValidator || ''\"\n                   [readonly]=\"field.displayOnly\" [ngClass]=\"{'display-only': field.displayOnly}\">\n            <span matSuffix *ngIf=\"field.suffix\"> &nbsp;{{ field.suffix }} </span>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n            <mat-error *ngIf=\"form.controls[field.id].hasError('pattern')\"> {{field.regexErrorMessage}} </mat-error>\n        </mat-form-field>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'checkbox'\">\n        <div class=\"form-field-container checkbox\">\n            <mat-checkbox [formControlName]=\"field.id\" [id]=\"field.id\" ngControlDefault></mat-checkbox>\n            <div class=\"checkbox-placeholder\"> {{field.label}}</div>\n            <mat-error *ngIf=\"showCheckboxError(field.id)\" class=\"checkboxError\"> *Required </mat-error>\n        </div>\n        <div class=\"checkbox-description\" *ngIf=\"field.description\">{{ field.description }}</div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'textarea'\">\n        <mat-form-field class=\"form-field-container\">\n            <textarea matInput [formControlName]=\"field.id\" [placeholder]=\"field.getLabel()\" [id]=\"field.id\"></textarea>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n        <div class=\"form-field-container\">\n            <file-group-uploader [uploadUrl]=\"field.uploadUrl\" [label]=\"field.getLabel()\" [description]=\"field.description\" [formGroup]=\"form\" [formControlName]=\"field.id\"\n                [numFiles]=\"field.numFiles\" class=\"form-field-container\"></file-group-uploader>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'vbcuser'\">\n        <mat-form-field class=\"form-field-container\">\n            <mat-select matInput [formControlName]=\"field.id\" [id]=\"field.id\" [placeholder]=\"field.getLabel()\">\n                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</mat-option>\n            </mat-select>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n    </ng-container>\n  </div>\n</ng-container>\n",
                styles: [".form-field-container{font-size:16px;width:100%;margin:10px 0}.checkbox{display:-webkit-box;display:flex;padding:5px 0;color:rgba(0,0,0,.54);margin-top:24px}.checkbox .checkbox-placeholder{margin-left:10px}.checkbox-description{margin-top:-14px;margin-left:32px;color:rgba(0,0,0,.54);font-size:12px}.for-office-use-only{position:relative}.office-text{font-size:8px;position:absolute;right:5px}.display-only{color:rgba(0,0,0,.38)}.checkboxError{padding-left:16px}"]
            }] }
];
FieldComponent.propDecorators = {
    field: [{ type: Input }],
    form: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    FieldComponent.prototype.field;
    /** @type {?} */
    FieldComponent.prototype.form;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class FieldService {
    /**
     * @param {?} field
     * @return {?}
     */
    createFormControl(field) {
        if (field.required) {
            return new FormControl(field.value, Validators.required);
        }
        else {
            return new FormControl(field.value);
        }
    }
    /**
     * @param {?} formFields
     * @param {?} subscriptions
     * @return {?}
     */
    toFormGroup(formFields, subscriptions) {
        /** @type {?} */
        const group = {};
        formFields.forEach((/**
         * @param {?} field
         * @return {?}
         */
        field => {
            /** @type {?} */
            let formControl;
            if (field.controlType === 'checkbox') {
                formControl = new FormControl(field.value);
            }
            else {
                formControl = this.createFormControl(field);
            }
            group[field.id] = formControl;
            if (subscriptions) {
                subscriptions.push(formControl.valueChanges.subscribe((/**
                 * @param {?} value
                 * @return {?}
                 */
                value => (field.value = value))));
            }
        }));
        return new FormGroup(group);
    }
}
FieldService.decorators = [
    { type: Injectable }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaHeaderContainerComponent {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        this.loaded = true;
        this.showEnableAddon = false;
        this.prerequisiteSelected = new EventEmitter();
        this.actionSelected = new EventEmitter();
        this.primaryPricingActionSelected = new EventEmitter();
        this.pricingActionSelected = new EventEmitter();
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @return {?}
     */
    onActionSelected() {
        this.actionSelected.emit();
    }
    /**
     * @return {?}
     */
    onPrerequisiteSelected() {
        this.prerequisiteSelected.emit();
    }
    /**
     * @param {?} billedProduct
     * @return {?}
     */
    showPricingModel(billedProduct) {
        return billedProduct && [BillingModel.Tiered, BillingModel.Stairstep].includes(billedProduct.billingModel);
    }
    /**
     * @param {?} billingModel
     * @return {?}
     */
    getPricingModelTooltips(billingModel) {
        switch (billingModel) {
            case BillingModel.Stairstep:
                return this.translateService.stream('FRONTEND.STORE.PRICE_APPLIES_PER_UNIT');
            case BillingModel.Tiered:
                return this.translateService.stream('FRONTEND.STORE.PRICE_APPLIES_TO_ALL_UNITS');
            default:
                return of('');
        }
    }
}
VaHeaderContainerComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-header-container',
                template: "<div class=\"header-container\">\n    <div class=\"product-overview\">\n      <div class=\"product-id\">\n\n        <va-icon [iconUrl]=\"iconUrl\" [name]=\"title\" [diameter]=\"120\"></va-icon>\n\n        <div class=\"product-id-text\">\n\n          <h1 [ngClass]=\"{'stencil-title stencil-shimmer': !title, 'product-title': title}\">\n            {{ title }}\n          </h1>\n\n          <span [ngClass]=\"{'stencil-tagline stencil-shimmer': !title && !tagline, 'tagline': tagline}\">\n            {{ tagline }}\n          </span>\n\n          <div *ngIf=\"prerequisite\" class=\"prerequisite\">\n            <span class=\"requires-text\">{{ 'FRONTEND.STORE.REQUIRES' | translate }}</span>\n            <span>{{ prerequisite }}</span>\n          </div>\n\n          <mat-chip-list>\n            <mat-chip *ngFor=\"let chip of chipLabels\">{{ chip }}</mat-chip>\n          </mat-chip-list>\n\n        </div>\n      </div>\n\n      <div class=\"pricing\">\n\n        <button *ngIf=\"showAction && !showEnableAddon\" mat-raised-button class=\"app-enable-button\" [disabled]=\"!actionEnabled\" (click)=\"onActionSelected()\">\n          {{ actionLabel }}\n        </button>\n\n        <button *ngIf=\"showEnableAddon && !showAction\" mat-raised-button class=\"app-enable-button\" [disabled]=\"!showEnableAddon\" (click)=\"onActionSelected()\">\n          {{ actionLabel }}\n        </button>\n\n        <div *ngIf=\"prerequisiteLabel && !showEnableAddon\" class=\"addon-enable\" (click)=\"onPrerequisiteSelected()\">\n          {{ 'FRONTEND.STORE.ENABLED_WITH_PREREQUISITE' | translate: {prerequisite: prerequisiteLabel } }}\n        </div>\n\n        <div *ngIf=\"showPricing\" class=\"price-box\">\n          <div *ngIf=\"pricing?.prices?.length\" class=\"wholesale-price\">{{ pricingLabel }}\n              <div *ngIf=\"showPricingModel(billedProduct) && hasVerifiedContract\"\n                   class=\"pricing-model\"\n                   [matTooltip]=\"getPricingModelTooltips(billedProduct.billingModel) | async\">({{ billedProduct.billingModel }})\n              </div>\n          </div>\n          <va-pricing [pricing]=\"pricing\"\n                      [billedProduct]=\"billedProduct\"\n                      [hasVerifiedContract]=\"hasVerifiedContract\"\n                      [loaded]=\"loaded\"></va-pricing>\n        </div>\n\n        <p *ngIf=\"pricingActionEnabled\" class=\"pricing-action-container\">\n          <a (click)=\"primaryPricingActionSelected.emit()\">{{ primaryPricingActionLabel }}</a>\n          <a (click)=\"pricingActionSelected.emit()\">{{ pricingActionLabel }}</a>\n        </p>\n\n      </div>\n\n    </div>\n</div>\n",
                styles: [":host{font-size:16px}.product-title{font-size:24px}.product-overview{display:-webkit-box;display:flex;flex-wrap:wrap;border-bottom:1px solid #e0e0e0}.product-overview h1{margin:0;font-weight:400;line-height:1.2}.product-overview mat-chip{margin-bottom:3px}.product-id{display:-webkit-box;display:flex;width:100%;padding:24px;-webkit-box-flex:1;flex-grow:1}.product-id va-icon{margin-right:20px}@media screen and (max-width:600px){.product-id va-icon ::ng-deep .va-icon-container{width:40px!important;height:40px!important}.product-id va-icon ::ng-deep .va-icon-container span{line-height:40px!important;font-size:15px!important}}.product-id .product-id-text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center}.product-id span{overflow:hidden}.product-id .tagline{color:#616161;margin:.5em 0 1em;font-size:16px}@media screen and (min-width:600px){.product-title{font-size:32px}.product-id .tagline{font-size:20px}.product-id{width:66%;padding-right:20px}}.product-id .prerequisite{margin:.5em 0 1em;font-size:14px}.product-id .requires-text{color:#9e9e9e}.inline-link{display:-webkit-inline-box!important;display:inline-flex!important;color:#1e88e5;cursor:pointer;padding-top:5px}.pricing{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:100%;padding:0 24px 24px;color:#616161}@media screen and (min-width:600px){.pricing{width:34%;padding-top:24px;padding-left:20px}}.pricing span{display:block}.pricing span:nth-child(2){margin:.5em 0 1em}.pricing .price{font-size:24px;font-weight:700;line-height:1;color:#4caf50}.pricing .price-box{padding-top:10px}.pricing .pricing-action-container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;margin:8px 0}.pricing .pricing-action-container mat-icon{vertical-align:middle;margin-right:6px}.pricing .pricing-action-container a{cursor:pointer;margin:5px 0}.pricing .pricing-model{display:inline-block;font-size:.8rem;color:#9e9e9e;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.app-enable-button{height:inherit;color:#fff;background-color:#4caf50;font-size:20px;padding:14px 16px;line-height:1}.addon-enable{height:inherit;background-color:#e0e0e0;font-size:14px;padding:14px 16px;line-height:1;color:#1e88e5;cursor:pointer;text-align:center}.wholesale-price{margin-top:0;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid #e0e0e0}.stencil-title{height:32px;width:200px;margin-bottom:5px!important}.stencil-tagline{height:32px;width:250px}"]
            }] }
];
/** @nocollapse */
VaHeaderContainerComponent.ctorParameters = () => [
    { type: TranslateService }
];
VaHeaderContainerComponent.propDecorators = {
    iconUrl: [{ type: Input }],
    title: [{ type: Input }],
    tagline: [{ type: Input }],
    prerequisite: [{ type: Input }],
    chipLabels: [{ type: Input }],
    pricing: [{ type: Input }],
    billedProduct: [{ type: Input }],
    loaded: [{ type: Input }],
    hasVerifiedContract: [{ type: Input }],
    pricingLabel: [{ type: Input }],
    primaryPricingActionLabel: [{ type: Input }],
    pricingActionLabel: [{ type: Input }],
    pricingActionEnabled: [{ type: Input }],
    actionEnabled: [{ type: Input }],
    actionLabel: [{ type: Input }],
    showAction: [{ type: Input }],
    showPricing: [{ type: Input }],
    showEnableAddon: [{ type: Input }],
    prerequisiteLabel: [{ type: Input }],
    prerequisiteSelected: [{ type: Output }],
    actionSelected: [{ type: Output }],
    primaryPricingActionSelected: [{ type: Output }],
    pricingActionSelected: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    VaHeaderContainerComponent.prototype.iconUrl;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.title;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.tagline;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.prerequisite;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.chipLabels;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.pricing;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.billedProduct;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.loaded;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.hasVerifiedContract;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.pricingLabel;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.primaryPricingActionLabel;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.pricingActionLabel;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.pricingActionEnabled;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.actionEnabled;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.actionLabel;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.showAction;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.showPricing;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.showEnableAddon;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.prerequisiteLabel;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.prerequisiteSelected;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.actionSelected;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.primaryPricingActionSelected;
    /** @type {?} */
    VaHeaderContainerComponent.prototype.pricingActionSelected;
    /**
     * @type {?}
     * @private
     */
    VaHeaderContainerComponent.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaHeaderContainerModule {
}
VaHeaderContainerModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule,
                    VaPricingModule,
                    VaIconModule,
                    MatChipsModule,
                    MatButtonModule,
                    MatTooltipModule,
                    TranslateModule
                ],
                declarations: [VaHeaderContainerComponent],
                exports: [VaHeaderContainerComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class OrderFormSectionData {
}
if (false) {
    /** @type {?} */
    OrderFormSectionData.prototype.parentForm;
    /** @type {?} */
    OrderFormSectionData.prototype.titleText;
    /** @type {?} */
    OrderFormSectionData.prototype.subtitleText;
    /** @type {?} */
    OrderFormSectionData.prototype.descriptionText;
    /** @type {?} */
    OrderFormSectionData.prototype.iconUrl;
    /** @type {?} */
    OrderFormSectionData.prototype.primarySection;
    /** @type {?} */
    OrderFormSectionData.prototype.subsections;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class OrderFormSectionComponent {
    constructor() { }
    /**
     * @return {?}
     */
    ngOnInit() {
        // The first section should always be expanded.
        /** @type {?} */
        const topSection = this.getTopSection();
        if (topSection) {
            topSection.startOpen = true;
        }
    }
    /**
     * @return {?}
     */
    getTopSection() {
        if (!this.data) {
            return null;
        }
        if (this.data.primarySection) {
            return this.data.primarySection;
        }
        if (this.data.subsections && this.data.subsections.length > 0) {
            return this.data.subsections[0];
        }
        return null;
    }
}
OrderFormSectionComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-order-form-section',
                template: "<div>\n  <mat-card class=\"va-order-form-section-header mat-card\">\n    <div class=\"product-overview\">\n      <div class=\"product-id\">\n        <va-icon [iconUrl]=\"data.iconUrl\" [name]=\"data.titleText\" [diameter]=\"45\"></va-icon>\n        <div class=\"product-id-text\">\n          <h1 class=\"product-title\">{{ data.titleText }}</h1>\n          <span *ngIf=\"data.subtitleText\" class=\"tagline\">{{ data.subtitleText }}</span>\n        </div>\n      </div>\n      <div class=\"description\" *ngIf=\"data.descriptionText\">\n        <span>{{ data.descriptionText }}</span>\n      </div>\n    </div>\n  </mat-card>\n  <va-dropdown-form-section class=\"va-primary-form-section\" *ngIf=\"data.primarySection\"\n                            [titleText]=\"data.primarySection.titleText\"\n                            [editingHint]=\"data.primarySection.editingHint\"\n                            [displayAutoDescription]=\"data.primarySection.displayAutoDescription\"\n                            [descriptionText]=\"data.primarySection.descriptionText\"\n                            [displayAutoTitle]=\"data.primarySection.displayAutoTitle\"\n                            [prepopulatedData]=\"data.primarySection.prepopulatedData\"\n                            [parentForm]=\"data.parentForm\"\n                            [fields]=\"data.primarySection.fields\"\n                            [startOpen]=\"data.primarySection.startOpen\"\n                            [expandable]=\"data.primarySection.expandable\">\n  </va-dropdown-form-section>\n  <ng-container *ngIf=\"data.subsections?.length > 0\">\n    <va-dropdown-form-section class=\"va-secondary-form-section\" *ngFor=\"let addon of data.subsections\"\n                              [titleText]=\"addon.titleText\"\n                              [editingHint]=\"addon.editingHint\"\n                              [displayAutoDescription]=\"addon.displayAutoDescription\"\n                              [descriptionText]=\"addon.descriptionText\"\n                              [displayAutoTitle]=\"addon.displayAutoTitle\"\n                              [prepopulatedData]=\"addon.prepopulatedData\"\n                              [parentForm]=\"data.parentForm\"\n                              [fields]=\"addon.fields\"\n                              [startOpen]=\"addon.startOpen\"\n                              [expandable]=\"addon.expandable\">\n    </va-dropdown-form-section>\n  </ng-container>\n  <ng-container *ngIf=\"!data.primarySection && !(data.subsections?.length > 0)\">\n    <mat-card class=\"not-expandable-card\">\n      <ng-content></ng-content>\n    </mat-card>\n  </ng-container>\n</div>\n",
                styles: [":host{font-size:16px}mat-card.va-order-form-section-header{margin-bottom:0;border-bottom-color:#e0e0e0;border-bottom-width:1px;box-shadow:0 0 1px -2px rgba(0,0,0,.2),0 0 2px 0 rgba(0,0,0,.14),0 0 5px 0 rgba(0,0,0,.12)}.product-title{font-size:16px}va-mat-card{margin-bottom:24px}.product-overview{display:-webkit-box;display:flex;flex-wrap:wrap}.product-overview h1{margin:0;font-weight:700}.product-id{display:-webkit-box;display:flex;width:100%;-webkit-box-flex:1;flex-grow:1}.product-id va-icon{margin-right:20px}@media screen and (max-width:600px){.product-id va-icon ::ng-deep .va-icon-container{width:40px!important;height:40px!important}}.product-id .product-id-text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center}.product-id span{display:block;overflow:hidden}.product-id .tagline{color:#616161;margin-top:8px;font-size:16px}@media screen and (min-width:600px){.product-id{width:66%;padding-right:16px}}.description{padding-top:16px;width:100%;color:#616161}"]
            }] }
];
/** @nocollapse */
OrderFormSectionComponent.ctorParameters = () => [];
OrderFormSectionComponent.propDecorators = {
    data: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    OrderFormSectionComponent.prototype.data;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownFormSectionData {
    constructor() {
        /* tslint:disable */
        this.expandable = true;
        /* tslint:enable */
    }
}
if (false) {
    /** @type {?} */
    DropDownFormSectionData.prototype.prepopulatedData;
    /** @type {?} */
    DropDownFormSectionData.prototype.startOpen;
    /** @type {?} */
    DropDownFormSectionData.prototype.parentForm;
    /** @type {?} */
    DropDownFormSectionData.prototype.displayAutoTitle;
    /** @type {?} */
    DropDownFormSectionData.prototype.titleText;
    /** @type {?} */
    DropDownFormSectionData.prototype.displayAutoDescription;
    /** @type {?} */
    DropDownFormSectionData.prototype.descriptionText;
    /** @type {?} */
    DropDownFormSectionData.prototype.fields;
    /** @type {?} */
    DropDownFormSectionData.prototype.editingHint;
    /** @type {?} */
    DropDownFormSectionData.prototype.expandable;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function OrderLabelsInterface() { }
if (false) {
    /** @type {?} */
    OrderLabelsInterface.prototype.commonForm;
}
/**
 * @record
 */
function OrderFormInterface() { }
if (false) {
    /** @type {?} */
    OrderFormInterface.prototype.appId;
    /** @type {?|undefined} */
    OrderFormInterface.prototype.addonId;
    /** @type {?|undefined} */
    OrderFormInterface.prototype.commonForm;
    /** @type {?|undefined} */
    OrderFormInterface.prototype.commonFormRequiredFields;
    /** @type {?|undefined} */
    OrderFormInterface.prototype.customFields;
}
/**
 * @record
 */
function IncludedCommonFormFieldsInterface() { }
if (false) {
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.businessName;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.businessAddress;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.businessPhoneNumber;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.businessAccountGroupId;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.businessWebsite;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.salespersonName;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.salespersonPhoneNumber;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.salespersonEmail;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.contactName;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.contactPhoneNumber;
    /** @type {?|undefined} */
    IncludedCommonFormFieldsInterface.prototype.contactEmail;
}
/**
 * @record
 */
function CommonFormSectionInterface() { }
if (false) {
    /** @type {?} */
    CommonFormSectionInterface.prototype.fields;
    /** @type {?|undefined} */
    CommonFormSectionInterface.prototype.sectionName;
    /** @type {?|undefined} */
    CommonFormSectionInterface.prototype.populatedData;
}
/**
 * @record
 */
function AddonKeyInterface() { }
if (false) {
    /** @type {?|undefined} */
    AddonKeyInterface.prototype.addonId;
    /** @type {?|undefined} */
    AddonKeyInterface.prototype.appId;
}
/**
 * @record
 */
function CommonFormFieldInterface() { }
if (false) {
    /** @type {?|undefined} */
    CommonFormFieldInterface.prototype.productIds;
    /** @type {?|undefined} */
    CommonFormFieldInterface.prototype.addonKeys;
}
/**
 * @record
 */
function CommonFieldIdsInterface() { }
if (false) {
    /** @type {?} */
    CommonFieldIdsInterface.prototype.fieldId;
    /** @type {?} */
    CommonFieldIdsInterface.prototype.required;
}
/**
 * @record
 */
function CommonFormData() { }
if (false) {
    /** @type {?|undefined} */
    CommonFormData.prototype.contact_email;
    /** @type {?|undefined} */
    CommonFormData.prototype.contact_name;
    /** @type {?|undefined} */
    CommonFormData.prototype.contact_phone_number;
    /** @type {?|undefined} */
    CommonFormData.prototype.business_account_group_id;
    /** @type {?|undefined} */
    CommonFormData.prototype.business_name;
    /** @type {?|undefined} */
    CommonFormData.prototype.business_address;
    /** @type {?|undefined} */
    CommonFormData.prototype.business_phone_number;
    /** @type {?|undefined} */
    CommonFormData.prototype.business_website;
    /** @type {?|undefined} */
    CommonFormData.prototype.salesperson_name;
    /** @type {?|undefined} */
    CommonFormData.prototype.salesperson_email;
    /** @type {?|undefined} */
    CommonFormData.prototype.salesperson_phone_number;
}
class ProductOrderFormSectionData extends OrderFormSectionData {
}
if (false) {
    /** @type {?} */
    ProductOrderFormSectionData.prototype.productId;
    /** @type {?} */
    ProductOrderFormSectionData.prototype.subsections;
}
class AddonDropDownFormSectionData extends DropDownFormSectionData {
}
if (false) {
    /** @type {?} */
    AddonDropDownFormSectionData.prototype.productId;
    /** @type {?} */
    AddonDropDownFormSectionData.prototype.addonId;
}
/**
 * @record
 */
function ProductInfoInterface() { }
if (false) {
    /** @type {?} */
    ProductInfoInterface.prototype.productId;
    /** @type {?|undefined} */
    ProductInfoInterface.prototype.name;
    /** @type {?|undefined} */
    ProductInfoInterface.prototype.tagline;
    /** @type {?|undefined} */
    ProductInfoInterface.prototype.icon;
    /** @type {?|undefined} */
    ProductInfoInterface.prototype.addonInfo;
}
/**
 * @record
 */
function AddonInfoInterface() { }
if (false) {
    /** @type {?} */
    AddonInfoInterface.prototype.addonId;
    /** @type {?|undefined} */
    AddonInfoInterface.prototype.name;
}
/**
 * @record
 */
function CustomFieldsAnswers() { }
if (false) {
    /** @type {?} */
    CustomFieldsAnswers.prototype.productID;
    /** @type {?|undefined} */
    CustomFieldsAnswers.prototype.addonKey;
    /** @type {?} */
    CustomFieldsAnswers.prototype.customFieldsAnswers;
}
/**
 * @record
 */
function CustomFieldsAnswer() { }
if (false) {
    /** @type {?} */
    CustomFieldsAnswer.prototype.fieldId;
    /** @type {?|undefined} */
    CustomFieldsAnswer.prototype.answer;
}
/**
 * @record
 */
function OrderFormOptionsInterface() { }
if (false) {
    /** @type {?|undefined} */
    OrderFormOptionsInterface.prototype.bypassRequiredQuestions;
    /** @type {?|undefined} */
    OrderFormOptionsInterface.prototype.readOnly;
    /** @type {?|undefined} */
    OrderFormOptionsInterface.prototype.showOfficeUseQuestions;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class OrderFormService {
    constructor() {
    }
    /**
     * @private
     * @param {?} orderForm
     * @return {?}
     */
    static extractRequiredCommonFieldIds(orderForm) {
        if (!orderForm || !orderForm.commonFormRequiredFields) {
            return [];
        }
        return Object.keys(orderForm.commonFormRequiredFields).filter((/**
         * @param {?} k
         * @return {?}
         */
        k => orderForm.commonFormRequiredFields[k]));
    }
    /**
     * @private
     * @param {?} orderForms
     * @return {?}
     */
    static buildCommonFieldIds(orderForms) {
        /** @type {?} */
        const commonFieldIdsMap = new Map();
        for (const key in OrderFormService.camelToSnakeCaseMap) {
            if (key) {
                commonFieldIdsMap.set(key, {
                    fieldId: key,
                    required: false,
                });
            }
        }
        orderForms.map((/**
         * @param {?} orderForm
         * @return {?}
         */
        orderForm => {
            /** @type {?} */
            const requiredCommonFieldIds = this.extractRequiredCommonFieldIds(orderForm);
            requiredCommonFieldIds.map((/**
             * @param {?} fieldId
             * @return {?}
             */
            fieldId => {
                /** @type {?} */
                const commonFieldId = commonFieldIdsMap.get(fieldId);
                commonFieldId.required = true;
                commonFieldIdsMap.set(fieldId, commonFieldId);
            }));
        }));
        return Array.from(commonFieldIdsMap.values());
    }
    /**
     * @private
     * @param {?} fieldIds
     * @param {?} commonData
     * @param {?} labels
     * @param {?} options
     * @return {?}
     */
    static fillCommonFormSections(fieldIds, commonData, labels, options) {
        /** @type {?} */
        const commonFormSections = OrderFormService.buildCommonOrderFormFields(fieldIds, labels, options);
        return commonFormSections.map((/**
         * @param {?} section
         * @return {?}
         */
        section => (Object.assign({}, section, { populatedData: commonData }))));
    }
    /**
     * @private
     * @param {?} fieldIds
     * @param {?} labels
     * @param {?} options
     * @return {?}
     */
    static buildCommonOrderFormFields(fieldIds, labels, options) {
        /** @type {?} */
        const businessSection = {
            sectionName: labels.commonForm.businessSectionTitle || 'Business',
            fields: []
        };
        /** @type {?} */
        const salespersonSection = {
            sectionName: labels.commonForm.salespersonSectionTitle || 'Salesperson',
            fields: []
        };
        /** @type {?} */
        const contactSection = {
            sectionName: labels.commonForm.contactSectionTitle || 'Contact',
            fields: []
        };
        for (const field of fieldIds) {
            /** @type {?} */
            const fieldLabel = this.getLabelForFieldId(field.fieldId, labels);
            /** @type {?} */
            const commonFormField = new TextboxField({
                id: OrderFormService.camelToSnakeCaseMap[field.fieldId],
                label: fieldLabel,
                textboxType: 'text'
            });
            commonFormField.displayOnly = commonFormField.id === 'business_account_group_id';
            commonFormField.disabled = options.readOnly;
            if (!options.bypassRequiredQuestions) {
                commonFormField.required = field.required;
            }
            if (field.fieldId.startsWith('contact')) {
                contactSection.fields.push(commonFormField);
            }
            if (field.fieldId.startsWith('business')) {
                businessSection.fields.push(commonFormField);
            }
            if (field.fieldId.startsWith('salesperson')) {
                if (!options.showOfficeUseQuestions) {
                    commonFormField.hidden = true;
                }
                salespersonSection.fields.push(commonFormField);
            }
        }
        return [businessSection, contactSection, salespersonSection].filter((/**
         * @param {?} section
         * @return {?}
         */
        section => section.fields ? section.fields.length > 0 : false));
    }
    /**
     * @private
     * @param {?} fieldId
     * @param {?} labels
     * @return {?}
     */
    static getLabelForFieldId(fieldId, labels) {
        return labels.commonForm[fieldId] || '';
    }
    /**
     * @private
     * @param {?} parentForm
     * @return {?}
     */
    static buildOrderFormSectionData(parentForm) {
        /** @type {?} */
        const section = new AddonDropDownFormSectionData();
        section.displayAutoTitle = true;
        section.descriptionText = '';
        section.displayAutoDescription = false;
        section.parentForm = parentForm;
        return section;
    }
    /**
     * @private
     * @param {?} customFields
     * @param {?} fileUploadUrl
     * @param {?} users
     * @param {?} answers
     * @param {?} options
     * @return {?}
     */
    static buildCustomOrderFormFields(customFields, fileUploadUrl, users, answers, options) {
        /** @type {?} */
        const fieldTypeMap = {
            text: TextboxField,
            textbox: TextboxField,
            dropdown: DropdownField,
            checkbox: CheckboxField,
            file: FileUploadGroupField,
            textarea: TextareaField,
            vbcuser: VBCUserField
        };
        return customFields
            .filter((/**
         * @param {?} field
         * @return {?}
         */
        field => {
            return fieldTypeMap[field.type];
        }))
            .map((/**
         * @param {?} field
         * @return {?}
         */
        field => {
            /** @type {?} */
            const fieldClass = fieldTypeMap[field.type];
            /** @type {?} */
            const result = ((/**
             * @return {?}
             */
            function () {
                switch (fieldClass) {
                    case VBCUserField:
                        /** @type {?} */
                        const fieldConfig = (/** @type {?} */ ({
                            description: field.description,
                            id: field.id,
                            required: field.required,
                            type: field.type,
                            label: field.label,
                            forOfficeUseOnly: field.forOfficeUseOnly,
                            hidden: field.hidden,
                            users: users // TODO: Get users in this component
                        }));
                        return new VBCUserField(fieldConfig);
                    case FileUploadGroupField:
                        /** @type {?} */
                        const uploadField = (/** @type {?} */ (field));
                        uploadField.uploadUrl = fileUploadUrl;
                        return new FileUploadGroupField(uploadField);
                    default:
                        return new fieldClass(field);
                }
            }))();
            result.id = OrderFormService.encodeCustomFieldId(field.id);
            if (!options.showOfficeUseQuestions) {
                result.hidden = result.forOfficeUseOnly ? true : result.hidden;
            }
            result.required = options.bypassRequiredQuestions ? false : result.required;
            result.disabled = options.readOnly ? options.readOnly : result.disabled;
            if (answers) {
                /** @type {?} */
                const ca = answers.find((/**
                 * @param {?} a
                 * @return {?}
                 */
                a => a.fieldId === field.id));
                if (ca) {
                    try {
                        result.value = JSON.parse(ca.answer);
                    }
                    catch (error) {
                        result.value = ca.answer;
                    }
                }
            }
            return result;
        }));
    }
    // Different products can have order form fields with the same fieldID, which will cause problem.
    // Please refer to https://github.com/vendasta/business-center-client/pull/1002
    // We will prefix the fieldID with uuid, and take it off before we same the order form into session storage
    /**
     * @private
     * @param {?} fieldId
     * @return {?}
     */
    static encodeCustomFieldId(fieldId) {
        /** @type {?} */
        const id = uuid();
        return `${id}#${fieldId}`;
    }
    /**
     * @private
     * @param {?} fieldId
     * @return {?}
     */
    static decodeCustomFieldId(fieldId) {
        return fieldId.replace(new RegExp('(.*#)'), '');
    }
    /**
     * @private
     * @param {?} fieldType
     * @return {?}
     */
    static mapFieldType(fieldType) {
        switch (fieldType) {
            case 'textbox':
                return FieldType.TEXT;
            case 'textarea':
                return FieldType.TEXTAREA;
            case 'checkbox':
                return FieldType.CHECKBOX;
            case 'dropdown':
                return FieldType.DROPDOWN;
            case 'file':
                return FieldType.FILE;
            case 'vbcuser':
                return FieldType.VBCUSER;
            default:
                return FieldType.NOT_SPECIFIED;
        }
    }
    /**
     * @private
     * @param {?} fieldBase
     * @return {?}
     */
    static orderFieldToSalesOrderField(fieldBase) {
        return new Field({
            fieldId: OrderFormService.decodeCustomFieldId(fieldBase.id),
            fieldType: OrderFormService.mapFieldType(fieldBase.controlType),
            label: fieldBase.label,
            description: fieldBase.description || '',
            prefix: fieldBase.prefix || '',
            suffix: fieldBase.suffix || '',
            regexValidator: fieldBase.regexValidator || '',
            regexErrorMessage: fieldBase.regexErrorMessage || '',
            answer: fieldBase.value ? JSON.stringify(fieldBase.value) : 'null'
        });
    }
    /**
     * @private
     * @param {?} orderFormData
     * @return {?}
     */
    static productOrderFormToCustomFields(orderFormData) {
        /** @type {?} */
        const primaryCustomField = new CustomField();
        primaryCustomField.productId = orderFormData.productId;
        primaryCustomField.fields = orderFormData.primarySection
            ? orderFormData.primarySection.fields.map((/**
             * @param {?} field
             * @return {?}
             */
            field => this.orderFieldToSalesOrderField(field)))
            : [];
        /** @type {?} */
        const secondaryCustomFields = orderFormData.subsections.map((/**
         * @param {?} subsection
         * @return {?}
         */
        subsection => {
            /** @type {?} */
            const customField = new CustomField();
            if (subsection.addonId) {
                customField.addonKey = new AddonKey({
                    appId: subsection.productId,
                    addonId: subsection.addonId
                });
            }
            else {
                customField.productId = orderFormData.productId;
            }
            customField.fields = subsection.fields.map((/**
             * @param {?} field
             * @return {?}
             */
            field => this.orderFieldToSalesOrderField(field)));
            return customField;
        }));
        return [].concat(primaryCustomField, secondaryCustomFields);
    }
    /**
     * @param {?} orderForms
     * @param {?} commonData
     * @param {?} labels
     * @param {?} options
     * @return {?}
     */
    static getCommonFormSections(orderForms, commonData, labels, options) {
        /** @type {?} */
        const fieldIds = OrderFormService.buildCommonFieldIds(orderForms);
        return OrderFormService.fillCommonFormSections(fieldIds, commonData, labels, options);
    }
    /**
     * @param {?} orderForms
     * @param {?} products
     * @param {?} parentForm
     * @param {?} fileUploadUrl
     * @param {?} users
     * @param {?} answers
     * @param {?} options
     * @return {?}
     */
    static getCustomFormSections(orderForms, products, parentForm, fileUploadUrl, users, answers, options) {
        /** @type {?} */
        const formSections = products.map((/**
         * @param {?} product
         * @return {?}
         */
        product => {
            /** @type {?} */
            const subsections = [];
            (product.addonInfo || []).map((/**
             * @param {?} addon
             * @return {?}
             */
            addon => {
                /** @type {?} */
                const addonOrderForms = orderForms.filter((/**
                 * @param {?} o
                 * @return {?}
                 */
                o => o.addonId === addon.addonId));
                /** @type {?} */
                const addonAnswers = (answers || []).filter((/**
                 * @param {?} a
                 * @return {?}
                 */
                a => a.addonKey &&
                    a.addonKey.appId === product.productId && a.addonKey.addonId === addon.addonId && a.productID === product.productId));
                addonOrderForms.map((/**
                 * @param {?} addonOrderForm
                 * @param {?} index
                 * @return {?}
                 */
                (addonOrderForm, index) => {
                    if (addonOrderForm && addonOrderForm.customFields && addonOrderForm.customFields.length > 0) {
                        /** @type {?} */
                        const addonSection = OrderFormService.buildOrderFormSectionData(parentForm);
                        /** @type {?} */
                        const addonAnswersForThisSpecificFormIndex = (addonAnswers.length > index) ? addonAnswers[index].customFieldsAnswers : [];
                        /** @type {?} */
                        const formFields = OrderFormService.buildCustomOrderFormFields(addonOrderForm.customFields, fileUploadUrl, users, addonAnswersForThisSpecificFormIndex, options);
                        addonSection.expandable = true;
                        addonSection.titleText = addon.name;
                        addonSection.fields = formFields;
                        addonSection.productId = product.productId;
                        addonSection.addonId = addon.addonId;
                        subsections.push(addonSection);
                    }
                }));
            }));
            /** @type {?} */
            const foundOrderForms = orderForms.reduce((/**
             * @param {?} orderFormsFound
             * @param {?} o
             * @return {?}
             */
            (orderFormsFound, o) => {
                if (o.appId === product.productId && !o.addonId) {
                    orderFormsFound.push(o);
                }
                return orderFormsFound;
            }), []);
            const [primaryOrder, ...otherOrdersForSameProduct] = foundOrderForms;
            /** @type {?} */
            const productHasOrderForm = primaryOrder && primaryOrder.customFields && primaryOrder.customFields.length > 0;
            if (subsections.length > 0 || productHasOrderForm) {
                /** @type {?} */
                const sectionData = new ProductOrderFormSectionData();
                sectionData.productId = product.productId;
                sectionData.parentForm = parentForm;
                sectionData.titleText = product.name;
                sectionData.subtitleText = product.tagline;
                sectionData.descriptionText = ''; // TODO: build the description string to show which common data this form uses
                sectionData.iconUrl = product.icon;
                if (productHasOrderForm) {
                    /** @type {?} */
                    const section = OrderFormService.buildOrderFormSectionData(parentForm);
                    section.titleText = product.name;
                    /** @type {?} */
                    let productAnswers = [];
                    if (answers) {
                        productAnswers = answers.filter((/**
                         * @param {?} a
                         * @return {?}
                         */
                        a => !a.addonKey && a.productID === product.productId));
                    }
                    const [firstProductAnswers, ...otherProductAnswers] = productAnswers;
                    section.fields = OrderFormService.buildCustomOrderFormFields(primaryOrder.customFields, fileUploadUrl, users, firstProductAnswers ? firstProductAnswers.customFieldsAnswers : [], options);
                    sectionData.primarySection = section;
                    otherOrdersForSameProduct.forEach((/**
                     * @param {?} _
                     * @param {?} index
                     * @return {?}
                     */
                    (_, index) => {
                        /**
                         * Clone the same section to avoid child component from modifying all as if these are all the top section.
                         * All sections need to be re-created or else they will have the same id and send repeated data as well.
                         * @type {?}
                         */
                        const dupeSection = Object.assign({}, section);
                        /** @type {?} */
                        const answersForSpecificForm = (otherProductAnswers.length > index) ? otherProductAnswers[index].customFieldsAnswers : [];
                        dupeSection.fields = OrderFormService.buildCustomOrderFormFields(primaryOrder.customFields, fileUploadUrl, users, answersForSpecificForm, options);
                        subsections.unshift(dupeSection);
                    }));
                }
                sectionData.subsections = subsections;
                return sectionData;
            }
            return null;
        })).filter((/**
         * @param {?} s
         * @return {?}
         */
        s => !!s));
        return formSections;
    }
    /**
     * @param {?} extraFields
     * @param {?} parentForm
     * @param {?} fileUploadUrl
     * @param {?} users
     * @param {?} answers
     * @param {?} options
     * @return {?}
     */
    static getExtraFieldsSection(extraFields, parentForm, fileUploadUrl, users, answers, options) {
        if (!extraFields || extraFields.length < 1) {
            return null;
        }
        /** @type {?} */
        const section = OrderFormService.buildOrderFormSectionData(parentForm);
        section.fields = OrderFormService.buildCustomOrderFormFields(extraFields, fileUploadUrl, users, answers, options);
        return section;
    }
    /**
     * @param {?} customFormSections
     * @return {?}
     */
    static getCustomFieldsData(customFormSections) {
        /** @type {?} */
        const customFormData = customFormSections.reduce((/**
         * @param {?} acc
         * @param {?} orderFormData
         * @return {?}
         */
        (acc, orderFormData) => {
            acc = acc.concat(OrderFormService.productOrderFormToCustomFields(orderFormData));
            return acc;
        }), []);
        return customFormData;
    }
    /**
     * @param {?} commonFormSections
     * @return {?}
     */
    static getCommonFieldsData(commonFormSections) {
        /** @type {?} */
        let commonFields = [];
        if (commonFormSections) {
            commonFields = commonFormSections.reduce((/**
             * @param {?} acc
             * @param {?} group
             * @return {?}
             */
            (acc, group) => {
                /** @type {?} */
                const fields = group.fields.map((/**
                 * @param {?} singleField
                 * @return {?}
                 */
                singleField => {
                    /** @type {?} */
                    const field = OrderFormService.orderFieldToSalesOrderField(singleField);
                    if (field.fieldId) {
                        return new CommonField({
                            field: field,
                            productIds: singleField.productIds,
                            addonKeys: singleField.addonKeys
                        });
                    }
                }));
                return acc.concat(fields);
            }), []);
        }
        return commonFields;
    }
    /**
     * @param {?} extraFieldsSection
     * @return {?}
     */
    static getExtraFieldsData(extraFieldsSection) {
        /** @type {?} */
        let extraFieldsData = [];
        if (!!extraFieldsSection) {
            extraFieldsData = extraFieldsSection.fields.map((/**
             * @param {?} field
             * @return {?}
             */
            field => OrderFormService.orderFieldToSalesOrderField(field)));
        }
        return extraFieldsData;
    }
}
OrderFormService.camelToSnakeCaseMap = {
    'contactName': 'contact_name',
    'contactEmail': 'contact_email',
    'contactPhoneNumber': 'contact_phone_number',
    'businessAccountGroupId': 'business_account_group_id',
    'businessName': 'business_name',
    'businessAddress': 'business_address',
    'businessPhoneNumber': 'business_phone_number',
    'businessWebsite': 'business_website',
    'salespersonName': 'salesperson_name',
    'salespersonEmail': 'salesperson_email',
    'salespersonPhoneNumber': 'salesperson_phone_number'
};
OrderFormService.decorators = [
    { type: Injectable }
];
/** @nocollapse */
OrderFormService.ctorParameters = () => [];
if (false) {
    /** @type {?} */
    OrderFormService.camelToSnakeCaseMap;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class OrderFormComponent {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        this.dropdownOpen$$ = new BehaviorSubject(false);
        this.dropdownOpen$ = this.dropdownOpen$$.asObservable();
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        const options = new OrderFormOptions(this.orderFormOptions || {});
        this.commonFormSections = OrderFormService.getCommonFormSections(this.orderForms, this.commonData, this.labels, options);
        this.customFormSections = OrderFormService.getCustomFormSections(this.orderForms, this.productInfo, this.parentForm, this.fileUploadUrl, this.users, this.answers, options);
        // TODO: Handle MyCorporation OrderForm (handled in a separate component right now)
        this.extraFieldsSection = OrderFormService.getExtraFieldsSection(this.extraFields, this.parentForm, this.fileUploadUrl, this.users, this.extraFieldsAnswers, options);
    }
    /**
     * returns the data from common form fields in a format that is usable by sales orders
     * @return {?}
     */
    getCommonFormData() {
        return OrderFormService.getCommonFieldsData(this.commonFormSections);
    }
    /**
     * returns the data from custom forms in a format that is usable by sales orders
     * @return {?}
     */
    getCustomFormData() {
        return OrderFormService.getCustomFieldsData(this.customFormSections);
    }
    /**
     * returns the data from extra fields in a format that is usable by sales orders
     * @return {?}
     */
    getExtraFieldsData() {
        return OrderFormService.getExtraFieldsData(this.extraFieldsSection);
    }
    /**
     * changes the read only state of the sales order form
     * @param {?} readOnly
     * @return {?}
     */
    changeReadOnly(readOnly) {
        this.orderFormOptions.readOnly = readOnly;
        readOnly ? this.parentForm.disable() : this.parentForm.enable();
    }
    /**
     * @return {?}
     */
    openDropdown() {
        this.dropdownOpen$$.next(true);
    }
}
OrderFormComponent.decorators = [
    { type: Component, args: [{
                template: "<form [formGroup]=\"parentForm\">\n    <!-- Common Fields -->\n    <div *ngIf=\"commonFormSections?.length > 0\" class=\"common-form-container\">\n        <mat-card class=\"common-form-header\">\n            <mat-card-title class=\"common-form-header-title\">{{ labels.commonForm.headerTitle }}</mat-card-title>\n            <div class=\"common-form-header-text\">{{ labels.commonForm.headerText }}</div>\n        </mat-card>\n        <va-dropdown-form-section\n            *ngFor=\"let formSection of commonFormSections\"\n            [parentForm]=\"parentForm\"\n            [prepopulatedData]=\"formSection.populatedData\"\n            [fields]=\"formSection.fields\"\n            [titleText]=\"formSection.sectionName\"\n            [startOpen]=\"dropdownOpen$ | async\"\n            editingHint=\"{{ labels.commonForm.editingHint }}\"\n        >\n        </va-dropdown-form-section>\n      <ng-container *ngIf=\"extraFieldsSection\">\n        <va-dropdown-form-section\n          [parentForm]=\"parentForm\"\n          [prepopulatedData]=\"extraFieldsSection.prepopulatedData\"\n          [fields]=\"extraFieldsSection.fields\"\n          [displayAutoDescription]=false\n          [startOpen]=\"true\"\n          [titleText]=\"'FRONTEND.STORE.ADMINISTRATIVE_QUESTIONS' | translate\"\n        >\n        </va-dropdown-form-section>\n      </ng-container>\n    </div>\n\n    <!--Custom Fields-->\n    <div *ngIf=\"customFormSections?.length > 0\" class=\"custom-form-container\">\n        <va-order-form-section *ngFor=\"let sectionData of customFormSections\" [data]=\"sectionData\"></va-order-form-section>\n    </div>\n</form>\n",
                providers: [],
                selector: 'va-order-form',
                styles: [".common-form-container{margin-bottom:16px}mat-card.common-form-header{margin-bottom:0;border-bottom-color:#fafafa;border-bottom-width:1px;box-shadow:0 0 1px -2px rgba(0,0,0,.2),0 0 2px 0 rgba(0,0,0,.14),0 0 5px 0 rgba(0,0,0,.12)}.common-form-header-text{font-size:15px;color:#9e9e9e}.common-form-header-title{margin-bottom:0;padding-bottom:15px}va-order-form-section{display:block;margin-bottom:16px}"]
            }] }
];
/** @nocollapse */
OrderFormComponent.ctorParameters = () => [
    { type: TranslateService }
];
OrderFormComponent.propDecorators = {
    commonData: [{ type: Input }],
    answers: [{ type: Input }],
    parentForm: [{ type: Input }],
    fileUploadUrl: [{ type: Input }],
    orderForms: [{ type: Input }],
    productInfo: [{ type: Input }],
    labels: [{ type: Input }],
    users: [{ type: Input }],
    extraFields: [{ type: Input }],
    extraFieldsAnswers: [{ type: Input }],
    orderFormOptions: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    OrderFormComponent.prototype.commonData;
    /** @type {?} */
    OrderFormComponent.prototype.answers;
    /** @type {?} */
    OrderFormComponent.prototype.parentForm;
    /** @type {?} */
    OrderFormComponent.prototype.fileUploadUrl;
    /** @type {?} */
    OrderFormComponent.prototype.orderForms;
    /** @type {?} */
    OrderFormComponent.prototype.productInfo;
    /** @type {?} */
    OrderFormComponent.prototype.labels;
    /** @type {?} */
    OrderFormComponent.prototype.users;
    /** @type {?} */
    OrderFormComponent.prototype.extraFields;
    /** @type {?} */
    OrderFormComponent.prototype.extraFieldsAnswers;
    /** @type {?} */
    OrderFormComponent.prototype.orderFormOptions;
    /** @type {?} */
    OrderFormComponent.prototype.commonFormSections;
    /** @type {?} */
    OrderFormComponent.prototype.customFormSections;
    /** @type {?} */
    OrderFormComponent.prototype.extraFieldsSection;
    /** @type {?} */
    OrderFormComponent.prototype.dropdownOpen$$;
    /** @type {?} */
    OrderFormComponent.prototype.dropdownOpen$;
    /**
     * @type {?}
     * @private
     */
    OrderFormComponent.prototype.translateService;
}
class OrderFormOptions {
    /**
     * @param {?} i
     */
    constructor(i) {
        this.bypassRequiredQuestions = !!i.bypassRequiredQuestions;
        this.readOnly = !!i.readOnly;
        this.showOfficeUseQuestions = !!i.showOfficeUseQuestions;
    }
}
if (false) {
    /** @type {?} */
    OrderFormOptions.prototype.bypassRequiredQuestions;
    /** @type {?} */
    OrderFormOptions.prototype.readOnly;
    /** @type {?} */
    OrderFormOptions.prototype.showOfficeUseQuestions;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const FILES = 'file';
/** @type {?} */
const DROP_DOWN = 'dropdown';
/** @type {?} */
const CHECK_BOX = 'checkbox';
/** @type {?} */
const TEXT_AREA = 'textarea';
/** @type {?} */
const TEXT_BOX = 'textbox';
/** @type {?} */
const BUSINESS_USER = 'vbcuser';
/**
 * @record
 */
function FieldBaseOptions() { }
if (false) {
    /** @type {?} */
    FieldBaseOptions.prototype.id;
    /** @type {?} */
    FieldBaseOptions.prototype.label;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.required;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.description;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.type;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.prefix;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.suffix;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.regexValidator;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.regexErrorMessage;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.disabled;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.forOfficeUseOnly;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.hidden;
    /** @type {?|undefined} */
    FieldBaseOptions.prototype.displayOnly;
}
/**
 * @abstract
 * @template T
 */
class FieldBase {
    /**
     * @param {?} options
     */
    constructor(options) {
        this.id = options.id;
        this.label = options.label;
        this.required = !!options.required;
        this.description = options.description || null;
        options.type = options.type === 'text' ? 'textbox' : options.type;
        this.controlType = (/** @type {?} */ (options.type));
        this.prefix = options.prefix;
        this.suffix = options.suffix;
        this.regexValidator = options.regexValidator;
        this.regexErrorMessage = options.regexErrorMessage;
        this.disabled = options.disabled || false;
        this.validator = this.validatorBuilder();
        this.forOfficeUseOnly = !!options.forOfficeUseOnly;
        this.hidden = options.hidden;
        this.displayOnly = options.displayOnly;
    }
    /**
     * @return {?}
     */
    getLabel() {
        /** @type {?} */
        let fieldLabel = this.label;
        if (this.required) {
            fieldLabel += ' *';
        }
        return fieldLabel;
    }
    /**
     * @protected
     * @return {?}
     */
    validatorBuilder() {
        return (/**
         * @param {?} control
         * @return {?}
         */
        (control) => {
            return null;
        });
    }
}
if (false) {
    /** @type {?} */
    FieldBase.prototype.value;
    /** @type {?} */
    FieldBase.prototype.id;
    /** @type {?} */
    FieldBase.prototype.label;
    /** @type {?} */
    FieldBase.prototype.required;
    /** @type {?} */
    FieldBase.prototype.order;
    /** @type {?} */
    FieldBase.prototype.description;
    /** @type {?} */
    FieldBase.prototype.controlType;
    /** @type {?} */
    FieldBase.prototype.prefix;
    /** @type {?} */
    FieldBase.prototype.suffix;
    /** @type {?} */
    FieldBase.prototype.regexValidator;
    /** @type {?} */
    FieldBase.prototype.regexErrorMessage;
    /** @type {?} */
    FieldBase.prototype.disabled;
    /** @type {?} */
    FieldBase.prototype.validator;
    /** @type {?} */
    FieldBase.prototype.forOfficeUseOnly;
    /** @type {?} */
    FieldBase.prototype.hidden;
    /** @type {?} */
    FieldBase.prototype.displayOnly;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class FieldBuilderComponent {
    constructor() {
        this.removeField = new EventEmitter(null);
    }
    /**
     * @param {?} option
     * @param {?} required
     * @return {?}
     */
    static createDropDownOption(option, required) {
        return new FormGroup({
            label: new FormControl(option.label || option.value, required ? [Validators.required] : []),
            value: new FormControl(option.value),
            useValue: new FormControl(!!option.value)
        });
    }
    /**
     * @param {?} options
     * @return {?}
     */
    static createDropDownOptions(options) {
        if (options === null || options === undefined) {
            options = [];
        }
        /** @type {?} */
        const orderFormFieldsGroupArray = options.map((/**
         * @param {?} option
         * @return {?}
         */
        option => FieldBuilderComponent.createDropDownOption(option, false)));
        return new FormArray(orderFormFieldsGroupArray);
    }
    /**
     * @param {?} orderFormField
     * @return {?}
     */
    static createOrderFormFieldGroup(orderFormField) {
        /** @type {?} */
        const orderFormFieldGroup = new FormGroup({
            descriptionControl: new FormControl(orderFormField.description, []),
            labelControl: new FormControl(orderFormField.label, [Validators.required]),
            idControl: new FormControl(orderFormField.id, [Validators.required]),
            requiredControl: new FormControl(orderFormField.required || false, []),
            uploadUrlControl: new FormControl(orderFormField.uploadUrl, []),
            prefixControl: new FormControl(orderFormField.prefix, []),
            suffixControl: new FormControl(orderFormField.suffix, []),
            regexValidatorControl: new FormControl(orderFormField.regexValidator, regexValidator()),
            regexErrorMessageControl: new FormControl(orderFormField.regexErrorMessage, []),
            typeControl: new FormControl(getFieldInterface(orderFormField.type), [Validators.required]),
            allowMultiples: new FormControl(orderFormField.allowMultiples || false, []),
            allowDuplicates: new FormControl(orderFormField.allowDuplicates || false, []),
            maxChoices: new FormControl(orderFormField.maxChoices ? orderFormField.maxChoices : 1, [Validators.min(1), numberValidator()]),
            forOfficeUseOnly: new FormControl(orderFormField.forOfficeUseOnly || false, [])
        });
        if (orderFormField.optionsWithLabels) {
            /** @type {?} */
            const optionsArray = FieldBuilderComponent.createDropDownOptions(orderFormField.optionsWithLabels);
            orderFormFieldGroup.addControl('optionsFormArray', optionsArray);
        }
        else if (orderFormField.options) {
            /** @type {?} */
            const optionsArray = FieldBuilderComponent.createDropDownOptions(orderFormField.options.map((/**
             * @param {?} option
             * @return {?}
             */
            option => ({ label: option }))));
            orderFormFieldGroup.addControl('optionsFormArray', optionsArray);
        }
        else {
            orderFormFieldGroup.addControl('optionsFormArray', new FormArray([]));
        }
        return orderFormFieldGroup;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (!this.supportedFieldTypes || this.supportedFieldTypes.length < 1) {
            this.supportedFieldTypes = FORM_FIELDS;
        }
        this.initForm();
    }
    /**
     * @return {?}
     */
    initForm() {
        // Check to see if form has been initiated
        if (!this.orderFormFieldGroup.get('labelControl')) {
            this.orderFormFieldGroup =
                FieldBuilderComponent.createOrderFormFieldGroup({});
        }
    }
    /**
     * @return {?}
     */
    getOptionsArray() {
        return (/** @type {?} */ (this.orderFormFieldGroup.get('optionsFormArray')));
    }
    /**
     * @return {?}
     */
    getCurrentFieldInterface() {
        /** @type {?} */
        const formFieldTypeInterface = ((/** @type {?} */ (this.orderFormFieldGroup.get('typeControl').value)));
        return formFieldTypeInterface ? formFieldTypeInterface.id : null;
    }
    /**
     * @param {?} index
     * @return {?}
     */
    removeOption(index) {
        /** @type {?} */
        const formArray = this.getOptionsArray();
        formArray.removeAt(index);
    }
    /**
     * @return {?}
     */
    addOption() {
        /** @type {?} */
        const fieldArray = this.getOptionsArray();
        fieldArray.push(FieldBuilderComponent.createDropDownOption({ label: '' }, true));
    }
    /**
     * @return {?}
     */
    getFormValues() {
        /** @type {?} */
        const obj = {};
        obj.label = this.orderFormFieldGroup.get('labelControl').value;
        obj.id = this.orderFormFieldGroup.get('idControl').value;
        /** @type {?} */
        const formFieldType = ((/** @type {?} */ (this.orderFormFieldGroup.get('typeControl').value)));
        obj.type = formFieldType ? formFieldType.id : null;
        // Options will be nested under their own form control in the larger Orderformfield array
        /** @type {?} */
        const optionsArray = ((/** @type {?} */ (this.orderFormFieldGroup.get('optionsFormArray'))));
        if (optionsArray && optionsArray.value) {
            obj.options = optionsArray.value.map((/**
             * @param {?} option
             * @return {?}
             */
            option => option.value || option.label));
            obj.optionsWithLabels = optionsArray.value.map((/**
             * @param {?} option
             * @return {?}
             */
            option => ({ label: option.label, value: option.value })));
        }
        obj.description = this.orderFormFieldGroup.get('descriptionControl').value;
        obj.required = this.orderFormFieldGroup.get('requiredControl').value || false;
        obj.uploadUrl = this.orderFormFieldGroup.get('uploadUrlControl').value;
        obj.prefix = this.orderFormFieldGroup.get('prefixControl').value;
        obj.suffix = this.orderFormFieldGroup.get('suffixControl').value;
        obj.regexValidator = this.orderFormFieldGroup.get('regexValidatorControl').value;
        obj.regexErrorMessage = this.orderFormFieldGroup.get('regexErrorMessageControl').value;
        obj.allowMultiples = this.orderFormFieldGroup.get('allowMultiples').value || false;
        obj.allowDuplicates = this.orderFormFieldGroup.get('allowDuplicates').value || false;
        obj.maxChoices = this.orderFormFieldGroup.get('maxChoices').value || 1;
        obj.forOfficeUseOnly = this.orderFormFieldGroup.get('forOfficeUseOnly').value || false;
        return obj;
    }
}
FieldBuilderComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-field-builder',
                template: "<div class=\"color-primary grab-mask order-form-field-form-container\" [formGroup]=\"orderFormFieldGroup\">\n    <mat-form-field class=\"order-form-mat-form-field\">\n      <mat-select matInput formControlName=\"typeControl\" placeholder=\"Type\" required novalidate>\n        <mat-option *ngFor=\"let field of supportedFieldTypes\" [value]=\"field\">\n          {{ field.name }}\n        </mat-option>\n      </mat-select>\n      <mat-error *ngIf=\"'typeControl.invalid'\">Form Field type is Required</mat-error>\n    </mat-form-field>\n    <span class=\"options\">\n      <mat-checkbox color=\"primary\" [formControlName]=\"'requiredControl'\"> Required</mat-checkbox>\n      <mat-checkbox color=\"primary\" [formControlName]=\"'forOfficeUseOnly'\" class=\"underlined\" matTooltip=\"This question will not be shown to end users\"> For Office Use Only</mat-checkbox>\n    </span>\n  <!-- Options if drop down type is selected -->\n  <ng-container *ngIf=\"getCurrentFieldInterface() && getCurrentFieldInterface() === 'dropdown'\">\n    <div formArrayName=\"optionsFormArray\" *ngFor=\"let option of getOptionsArray().controls; let i = index;\">\n      <div class=\"removable-form-field dropdown-option\">\n          <mat-form-field class=\"dropdown-option-label\">\n            <input  matInput [formControl]=\"option.get('label')\" placeholder=\"Option\">\n          </mat-form-field>\n          <mat-form-field class=\"dropdown-option-value\" *ngIf=\"option.get('useValue').value\">\n            <input matInput [formControl]=\"option.get('value')\" placeholder=\"Value\">\n          </mat-form-field>\n          <a class=\"dropdown-option-value\" (click)=\"option.get('useValue').setValue(true)\" *ngIf=\"!option.get('useValue').value\">+ Assign Value</a>\n        <button mat-icon-button type=\"button\" color=\"primary\" (click)=\"removeOption(i)\">\n            <mat-icon aria-label=\"Clear Button\">clear</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"order-form-mat-form-field\">\n      <a (click)=\"addOption()\">+ Option</a>\n    </div>\n    <div class=\"dropdown-config\">\n      <mat-checkbox color=\"primary\" [formControlName]=\"'allowMultiples'\"> Allow Multiples</mat-checkbox>\n      <ng-container *ngIf=\"orderFormFieldGroup.controls.allowMultiples.value\">\n        <mat-checkbox class=\"required-checkbox\" color=\"primary\" [formControlName]=\"'allowDuplicates'\"> Allow Duplicates</mat-checkbox>\n      <div>\n        <mat-form-field class=\"order-form-mat-form-field\">\n          <input matInput formControlName=\"maxChoices\" placeholder=\"Maximum Number of Choices\" required type=\"number\">\n          <mat-hint>Must be greater than 0</mat-hint>\n          <mat-error *ngIf=\"'maxChoices.invalid'\">Max Choices must be a number larger than 0</mat-error>\n        </mat-form-field>\n      </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <div>\n    <mat-form-field class=\"order-form-mat-form-field\">\n      <input matInput formControlName=\"labelControl\" placeholder=\"Label\" required novalidate>\n      <mat-hint>Keep it short. Recommended: Max 140 characters</mat-hint>\n      <mat-error *ngIf=\"'idControl.invalid'\">Label is Required</mat-error>\n    </mat-form-field>\n  </div>\n  <!-- Prefix/suffix if textbox type is selected -->\n  <ng-container *ngIf=\"getCurrentFieldInterface() && getCurrentFieldInterface() === 'textbox'\">\n    <ng-container *ngIf=\"showSuffixes\">\n      <mat-form-field>\n        <input matInput formControlName=\"prefixControl\" placeholder=\"Prefix\">\n      </mat-form-field>\n      <mat-form-field>\n        <input matInput formControlName=\"suffixControl\" placeholder=\"Suffix\">\n      </mat-form-field>\n      <div class=\"show-hide-text-button\"><a (click)=\"showSuffixes = !showSuffixes\">Hide Prefix/Suffix</a></div>\n    </ng-container>\n    <div *ngIf=\"!showSuffixes\" class=\"show-hide-text-button\">\n      <a (click)=\"showSuffixes = !showSuffixes\">+ Prefix/Suffix</a>\n      <div class=\"hidden-note\">- Values will apply even though currently hidden </div>\n    </div>\n  </ng-container>\n\n  <div>\n    <mat-form-field class=\"order-form-mat-form-field\">\n        <input matInput formControlName=\"idControl\" placeholder=\"ID\" required>\n        <mat-error *ngIf=\"'idControl.invalid'\">Id is Required</mat-error>\n        <mat-hint>ID must be unique</mat-hint>\n    </mat-form-field>\n  </div>\n\n\n  <!-- Upload url if file type is selected -->\n  <ng-container *ngIf=\"getCurrentFieldInterface() && getCurrentFieldInterface() === 'file'\">\n    <mat-form-field>\n      <input matInput formControlName=\"uploadUrlControl\" placeholder=\"Upload URL\">\n    </mat-form-field>\n  </ng-container>\n\n\n  <!-- Prefix/suffix if textbox type is selected -->\n  <ng-container *ngIf=\"getCurrentFieldInterface() && getCurrentFieldInterface() === 'textbox'\">\n\n    <!-- RegexValidator/RegexErrorMessage if textbox type is selected -->\n    <ng-container *ngIf=\"showValidators\">\n      <mat-form-field>\n        <input matInput formControlName=\"regexValidatorControl\" placeholder=\"Regex Validator\">\n        <mat-error *ngIf=\"'regexValidatorControl.invalid'\"> Must be a valid regular expression </mat-error>\n      </mat-form-field>\n      <mat-form-field>\n        <input matInput formControlName=\"regexErrorMessageControl\" placeholder=\"Regex Error Message\">\n        <mat-hint> Error displayed to the user when the regular expression is not matched </mat-hint>\n      </mat-form-field>\n      <div class=\"show-hide-text-button\">\n        <a (click)=\"showValidators = !showValidators\">Hide Validation</a>\n      </div>\n    </ng-container>\n    <div *ngIf=\"!showValidators\" class=\"show-hide-text-button\">\n      <a (click)=\"showValidators = !showValidators\">+ Validation</a>\n      <div class=\"hidden-note\"> - Values will apply even though currently hidden </div>\n    </div>\n  </ng-container>\n\n  <!-- Optional description -->\n  <div class=\"removable-form-field\">\n    <mat-form-field>\n      <input matInput formControlName=\"descriptionControl\" placeholder=\"Hint text\">\n      <mat-hint>A short sentence to show below the field if you absolutely need extra instruction</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"delete-field-section\">\n    <button mat-icon-button type=\"button\" color=\"primary\" (click)=\"removeField.emit()\">\n      Delete field\n      <!-- <mat-icon aria-label=\"Clear Button\">clear</mat-icon> -->\n    </button>\n  </div>\n</div>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".show-hide-text-button{margin-bottom:2em;display:-webkit-box;display:flex}.show-hide-text-button .hidden-note{font-size:10px;margin-left:7px;color:#9e9e9e;-ms-grid-row-align:center;align-self:center}.options{padding-left:15px;width:15%;display:inline-block}.dropdown-option,mat-form-field{width:85%}.delete-field-section{text-align:right}.mat-icon-button{width:auto;color:rgba(0,0,0,.54)!important}.mat-icon-button:hover{color:#c62828!important}.dropdown-config{margin-top:17px}.dropdown-config mat-checkbox{margin-right:16px}.dropdown-option{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.dropdown-option-label{-webkit-box-flex:1;flex:1 1 auto;margin-right:16px}.dropdown-option-value{-webkit-box-flex:0;flex:0 1 33%}.underlined{border-bottom:1px dotted}"]
            }] }
];
FieldBuilderComponent.propDecorators = {
    orderFormFieldGroup: [{ type: Input }],
    supportedFieldTypes: [{ type: Input }],
    removeField: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    FieldBuilderComponent.prototype.orderFormFieldGroup;
    /** @type {?} */
    FieldBuilderComponent.prototype.supportedFieldTypes;
    /** @type {?} */
    FieldBuilderComponent.prototype.removeField;
    /** @type {?} */
    FieldBuilderComponent.prototype.showValidators;
    /** @type {?} */
    FieldBuilderComponent.prototype.showSuffixes;
}
// Validation to ensure supplied regex is valid
/**
 * @return {?}
 */
function regexValidator() {
    return (/**
     * @param {?} control
     * @return {?}
     */
    (control) => {
        try {
            /** @type {?} */
            const _ = new RegExp(control.value || '');
        }
        catch (e) {
            return { 'regex': true };
        }
        return null;
    });
}
/**
 * @return {?}
 */
function numberValidator() {
    return (/**
     * @param {?} control
     * @return {?}
     */
    (control) => {
        /** @type {?} */
        const isNumber = /^\d+$/;
        if (isNumber.test(control.value)) {
            return null;
        }
        return { 'number': true };
    });
}
/**
 * @record
 */
function FormFieldInterface() { }
if (false) {
    /** @type {?} */
    FormFieldInterface.prototype.id;
    /** @type {?} */
    FormFieldInterface.prototype.name;
}
/** @type {?} */
const FORM_FIELDS = [
    { id: FILES, name: 'Files' }, { id: DROP_DOWN, name: 'Drop Down' },
    { id: CHECK_BOX, name: 'Check Box' }, { id: TEXT_AREA, name: 'Text Area' },
    { id: TEXT_BOX, name: 'Text Box' }, { id: BUSINESS_USER, name: 'End User' }
];
/**
 * @param {?} formFieldId
 * @return {?}
 */
function getFieldInterface(formFieldId) {
    return getFormFieldInterfaceFromId(((/** @type {?} */ (formFieldId))));
}
/**
 * @param {?} id
 * @return {?}
 */
function getFormFieldInterfaceFromId(id) {
    return FORM_FIELDS.find((/**
     * @param {?} obj
     * @return {?}
     */
    (obj) => obj.id === id));
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class OrderItemListService {
    /**
     * @param {?} items
     * @return {?}
     */
    static getPriceSummary(items) {
        if (!items) {
            return { items: [], includesUndefinedPricing: false };
        }
        /** @type {?} */
        let includesUndefinedPricing = false;
        /** @type {?} */
        const summaryItems = items.reduce((/**
         * @param {?} currentArray
         * @param {?} item
         * @return {?}
         */
        (currentArray, item) => {
            if (item.pricing.prices.length <= 0) {
                includesUndefinedPricing = true;
                return currentArray;
            }
            item.pricing.prices.map((/**
             * @param {?} price
             * @return {?}
             */
            price => {
                if (!price || price.price < 0) {
                    includesUndefinedPricing = true;
                    return;
                }
                /** @type {?} */
                const freq = price.billingFrequency;
                /** @type {?} */
                const cur = item.pricing.currency;
                /** @type {?} */
                const existingCurIndex = currentArray.findIndex((/**
                 * @param {?} summaryItem
                 * @return {?}
                 */
                summaryItem => summaryItem.currency === cur));
                /** @type {?} */
                let pricing = {
                    currency: cur,
                    prices: []
                };
                if (existingCurIndex > -1) {
                    pricing = currentArray[existingCurIndex];
                }
                /** @type {?} */
                const existingFreqIndex = pricing.prices.findIndex((/**
                 * @param {?} summaryItem
                 * @return {?}
                 */
                summaryItem => summaryItem.billingFrequency === freq));
                /** @type {?} */
                const quantifiedPrice = price.price !== null ? price.price * item.quantity : null;
                /** @type {?} */
                const quantifiedDiscount = (price.discountAmount || 0) * item.quantity;
                if (existingFreqIndex > -1) {
                    pricing.prices[existingFreqIndex] = {
                        price: pricing.prices[existingFreqIndex].price + quantifiedPrice,
                        billingFrequency: freq,
                        discountAmount: pricing.prices[existingFreqIndex].discountAmount + quantifiedDiscount
                    };
                }
                else {
                    pricing.prices.push({
                        price: quantifiedPrice,
                        billingFrequency: freq,
                        discountAmount: quantifiedDiscount
                    });
                }
                if (existingCurIndex > -1) {
                    currentArray[existingCurIndex] = pricing;
                }
                else {
                    currentArray.push(pricing);
                }
            }));
            return currentArray;
        }), []);
        return { items: summaryItems, includesUndefinedPricing: includesUndefinedPricing };
    }
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class OrderItemListComponent {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        this.includesUndefinedPricing = false;
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @param {?} items
     * @return {?}
     */
    set orderItems(items) {
        this.items = items || [];
        /** @type {?} */
        const summary = OrderItemListService.getPriceSummary(items);
        this.summaryItems = summary.items;
        this.includesUndefinedPricing = summary.includesUndefinedPricing;
    }
    /**
     * @param {?} price
     * @return {?}
     */
    calculateTotalPrice(price) {
        if (price.price === null) {
            return null;
        }
        /** @type {?} */
        const totalPrice = price.price - price.discountAmount;
        if (!this.taxOptions) {
            return totalPrice;
        }
        /** @type {?} */
        const taxTotal = this.taxOptions.reduce((/**
         * @param {?} all
         * @param {?} tax
         * @return {?}
         */
        (all, tax) => all + (tax.percentage * totalPrice)), 0);
        return totalPrice + taxTotal;
    }
    /**
     * @param {?} tax
     * @return {?}
     */
    buildTaxLabel(tax) {
        /** @type {?} */
        const taxPercentage = Number(tax.percentage * 100).toFixed(2);
        return `${tax.label} (${taxPercentage}%)`;
    }
    /**
     * @return {?}
     */
    isFree() {
        /** @type {?} */
        const summaryTotal = this.summaryItems.reduce((/**
         * @param {?} all
         * @param {?} item
         * @return {?}
         */
        (all, item) => {
            /** @type {?} */
            const totalPrices = item.prices.reduce((/**
             * @param {?} acc
             * @param {?} price
             * @return {?}
             */
            (acc, price) => acc + price.price), 0);
            return all + totalPrices;
        }), 0);
        return summaryTotal === 0;
    }
}
OrderItemListComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-order-item-list',
                template: "<div class=\"va-order-item-list\">\n  <mat-list class=\"product-list\" *ngIf=\"items; else loading\">\n    <ng-container *ngFor=\"let item of items\">\n      <mat-list-item>\n        <div class=\"list-item\">\n          <div class=\"left-section\">\n            <div class=\"icon-and-name\">\n              <div class=\"icon-container\">\n                <va-icon [diameter]=\"32\" [iconUrl]=\"item.icon\" [name]=\"item.name\"></va-icon>\n              </div>\n              <div>\n                <div>\n                  {{ item.name }}\n                  <va-badge color=\"blue-solid\" *ngIf=\"item.editionName\">\n                    <span> {{ item.editionName }} </span>\n                  </va-badge>\n                  <span *ngIf=\"item.quantity > 1\"> ({{ item.quantity }})</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"right-section\" *ngIf=\"!hidePricing && item.pricing\">\n            <ng-container *ngIf=\"item.pricing.prices?.length > 0\">\n              <ng-container *ngFor=\"let price of item.pricing.prices\">\n                <div matLine>\n                  <strong *ngIf=\"!price.discountAmount\">{{ price.price | price: item.pricing.currency }}</strong>\n                  <ng-container *ngIf=\"price.price && price.discountAmount > 0\">\n                    <span matTooltipPosition=\"left\" class=\"item-price-before-discount\"\n                      [matTooltip]=\"price.discountAmount | price: item.pricing.currency\">\n                      {{ price.price | price: item.pricing.currency }}\n                    </span>\n                    <strong>{{ price.price - price.discountAmount | price: item.pricing.currency }}</strong>\n                  </ng-container>\n                </div>\n                <div matLine class=\"tertiary-font-color\" *ngIf=\"price.price > 0\">\n                  {{ price.billingFrequency | formatBillingFrequency }}\n                </div>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"item.pricing.prices?.length <= 0\">\n              <mat-list-item class=\"summary-list-item\">\n                <div matLine>\n                  <strong>{{ null | price: 'CAD' }}</strong>\n                </div>\n              </mat-list-item>\n            </ng-container>\n          </div>\n        </div>\n      </mat-list-item>\n      <mat-divider></mat-divider>\n    </ng-container>\n  </mat-list>\n\n  <div *ngIf=\"!hidePricing\">\n    <div *ngIf=\"items; else loading\">\n      <div class=\"total-header\">\n        {{ 'FRONTEND.STORE.TOTAL' | translate }}\n      </div>\n      <mat-list class=\"summary-list\">\n        <ng-container *ngIf=\"includesUndefinedPricing; else totalIsDefined\">\n          <mat-list-item class=\"summary-list-item\">\n            <div matLine>\n              <strong>{{ null | price: 'CAD' }}</strong>\n            </div>\n          </mat-list-item>\n        </ng-container>\n\n        <ng-template #totalIsDefined>\n          <ng-container *ngIf=\"isFree(); else totalNotFree\">\n            <div class=\"summary-item-group\">\n              <mat-list-item class=\"summary-list-item\">\n                <div matLine>\n                  <strong>{{ 0 | price: 'USD' }}</strong>\n                </div>\n              </mat-list-item>\n            </div>\n          </ng-container>\n\n          <ng-template #totalNotFree>\n            <ng-container *ngFor=\"let item of summaryItems\">\n              <div class=\"summary-item-group\" *ngFor=\"let price of item.prices\">\n                <ng-container *ngIf=\"price.price > 0\">\n                  <div class=\"tax-calculation\">\n                    <mat-list-item class=\"summary-list-item tax-item\">\n                      <div matLine *ngIf=\"taxOptions\">\n                        <strong>{{ price.price - price.discountAmount | price: item.currency }}</strong>\n                      </div>\n                    </mat-list-item>\n                    <ng-container *ngFor=\"let tax of taxOptions\">\n                      <mat-list-item class=\"summary-list-item tax-item\">\n                        <div matLine class=\"tax-label\">\n                          <span>\n                            {{ buildTaxLabel(tax) }}\n                          </span>\n                          <strong>\n                            +{{ (price.price - price.discountAmount) * tax.percentage | price: item.currency }}\n                          </strong>\n                        </div>\n                      </mat-list-item>\n                    </ng-container>\n                  </div>\n\n                  <mat-list-item class=\"summary-list-item\" [ngClass]=\"{ 'result-item': (price.price > 0 && taxOptions) }\">\n                    <div matLine>\n                      <strong>{{ calculateTotalPrice(price) | price: item.currency }}</strong>\n                    </div>\n                  </mat-list-item>\n\n                  <mat-list-item class=\"summary-list-item\">\n                    <div matLine class=\"tertiary-font-color\">\n                      {{ price.billingFrequency | formatBillingFrequency }}\n                    </div>\n                  </mat-list-item>\n                </ng-container>\n              </div>\n            </ng-container>\n\n          </ng-template>\n        </ng-template>\n      </mat-list>\n    </div>\n  </div>\n\n  <ng-template #loading>\n    <div class=\"stencil-shimmer\"></div>\n  </ng-template>\n\n</div>\n",
                styles: ["::ng-deep .va-order-item-list .mat-list-item{height:auto!important}::ng-deep .va-order-item-list .mat-list .mat-list-item-content{padding:10px 0!important}::ng-deep .va-order-item-list .mat-list .summary-list-item .mat-list-item-content{padding:0!important}.product-list{padding:0;position:relative}.product-list .list-item{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;width:100%}.product-list .list-item .left-section .icon-and-name{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.product-list .list-item .left-section .icon-and-name .icon-container{margin-right:16px}.product-list .list-item .right-section{margin-left:1em;text-align:right;align-self:flex-start}.total-header{background-color:#616161;color:#fff;line-height:2;height:2em;font-weight:700;padding-right:14px;text-align:right}.summary-list{padding:8px 0;background-color:#f5f5f5}.summary-list .summary-list-item{padding-right:14px;text-align:right}.summary-list .summary-item-group{padding:10px 0}.summary-list .summary-list-item.tax-item{color:#9e9e9e;font-size:14px}.summary-list .summary-list-item.result-item{text-decoration:overline;padding-top:5px}.summary-list .tax-label{font-size:12px}.tertiary-font-color{color:#212121;font-size:14px!important}.stencil-shimmer{width:100%;min-height:20px;margin-bottom:4px}.item-price-before-discount{font-size:14px;margin-right:8px;color:#9e9e9e;text-decoration:line-through;border-bottom:1px dotted #9e9e9e}"]
            }] }
];
/** @nocollapse */
OrderItemListComponent.ctorParameters = () => [
    { type: TranslateService }
];
OrderItemListComponent.propDecorators = {
    taxOptions: [{ type: Input }],
    hidePricing: [{ type: Input }],
    orderItems: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    OrderItemListComponent.prototype.items;
    /** @type {?} */
    OrderItemListComponent.prototype.summaryItems;
    /** @type {?} */
    OrderItemListComponent.prototype.includesUndefinedPricing;
    /** @type {?} */
    OrderItemListComponent.prototype.taxOptions;
    /** @type {?} */
    OrderItemListComponent.prototype.hidePricing;
    /**
     * @type {?}
     * @private
     */
    OrderItemListComponent.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PricePipe {
    /**
     * @param {?} value
     * @param {?} currency
     * @param {?=} billingFrequency
     * @param {?=} isCents
     * @param {?=} translateZero
     * @param {?=} displaySymbol
     * @return {?}
     */
    transform(value, currency, billingFrequency, isCents = true, translateZero = true, displaySymbol = true) {
        return formatDisplayPrice(value, currency, billingFrequency, isCents, translateZero, displaySymbol);
    }
}
PricePipe.decorators = [
    { type: Pipe, args: [{ name: 'price' },] }
];
class FormatBillingFrequencyPipe {
    /**
     * @param {?} value
     * @return {?}
     */
    transform(value) {
        return formatBillingFrequency(value);
    }
}
FormatBillingFrequencyPipe.decorators = [
    { type: Pipe, args: [{ name: 'formatBillingFrequency' },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaOrderFormModule {
}
VaOrderFormModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    FormsModule,
                    MatButtonModule,
                    MatCheckboxModule,
                    MatExpansionModule,
                    MatIconModule,
                    MatInputModule,
                    MatOptionModule,
                    MatProgressSpinnerModule,
                    MatSelectModule,
                    MatCardModule,
                    MatTooltipModule,
                    ReactiveFormsModule,
                    VaFormsModule,
                    VaHeaderContainerModule,
                    VaIconModule,
                    VaFormsModule,
                    VaBadgeModule,
                    MatListModule,
                    TranslateModule,
                ],
                declarations: [
                    DropDownFormSectionComponent,
                    FieldComponent,
                    OrderFormSectionComponent,
                    OrderFormComponent,
                    FieldBuilderComponent,
                    OrderItemListComponent,
                    PricePipe,
                    FormatBillingFrequencyPipe,
                ],
                exports: [
                    DropDownFormSectionComponent,
                    FieldComponent,
                    OrderFormSectionComponent,
                    OrderFormComponent,
                    FieldBuilderComponent,
                    OrderItemListComponent,
                ],
                providers: [
                    FieldService,
                    OrderFormService,
                    OrderItemListService,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class StoreService {
    /**
     * @param {?} formGroup
     * @return {?}
     */
    markFormsAsTouched(formGroup) {
        for (const key in formGroup.controls) {
            if (formGroup.controls[key] instanceof FormGroup) {
                this.markFormsAsTouched((/** @type {?} */ (formGroup.controls[key])));
            }
            else {
                ((/** @type {?} */ (formGroup.controls[key]))).markAsTouched();
                ((/** @type {?} */ (formGroup.controls[key]))).updateValueAndValidity();
            }
        }
    }
}
StoreService.decorators = [
    { type: Injectable }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class File {
    /**
     * @param {?} url
     */
    constructor(url) {
        this.url = url;
        this.url = url;
    }
    /**
     * @return {?}
     */
    get name() {
        return this.url ? this.url.substring(this.url.lastIndexOf('/') + 1, this.url.lastIndexOf('.')) : null;
    }
    /**
     * @return {?}
     */
    get icon() {
        /** @type {?} */
        const ext = this.url ? this.url.substring(this.url.lastIndexOf('.') + 1) : null;
        switch (ext) {
            case 'pdf':
                return 'icon-pdf';
            case 'ppt':
                return 'icon-ppt';
            default:
                return 'icon-docs';
        }
    }
}
if (false) {
    /** @type {?} */
    File.prototype.url;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function Pricing() { }
if (false) {
    /** @type {?} */
    Pricing.prototype.currency;
    /** @type {?} */
    Pricing.prototype.prices;
}
/**
 * @record
 */
function Price() { }
if (false) {
    /** @type {?} */
    Price.prototype.price;
    /** @type {?} */
    Price.prototype.frequency;
    /** @type {?|undefined} */
    Price.prototype.isStartingPrice;
}
/** @type {?} */
const CONTACT_SALES = -1;

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Sellable {
    /**
     * @return {?}
     */
    get isFree() {
        return this.pricing && this.pricing.prices ? this.pricing.prices.some((/**
         * @param {?} p
         * @return {?}
         */
        p => p.price === 0 || p.price === undefined)) : false;
    }
    /**
     * @return {?}
     */
    get shouldContactSales() {
        return this.pricing && this.pricing.prices ?
            this.pricing.prices.some((/**
             * @param {?} p
             * @return {?}
             */
            p => p.price === null || p.price === CONTACT_SALES)) ||
                this.pricing.prices.length === 0 : true;
    }
    /**
     * @param {?} inputString
     * @return {?}
     */
    static getCapitalizeFirstLetter(inputString) {
        return inputString ? inputString.charAt(0).toUpperCase() + inputString.slice(1) : null;
    }
    /**
     * @return {?}
     */
    get formattedPricingList() {
        if (this.pricing && this.pricing.prices && this.pricing.prices.length) {
            /** @type {?} */
            const hasCurrencyAndIsNotUSD = this.pricing.currency && this.pricing.currency !== 'USD';
            /** @type {?} */
            const currencyStr = hasCurrencyAndIsNotUSD ? this.pricing.currency : '';
            /** @type {?} */
            const currencySymbol = Sellable.getCurrencySymbol(this.pricing.currency);
            return this.pricing.prices.map((/**
             * @param {?} price
             * @return {?}
             */
            price => {
                /** @type {?} */
                const frequencyStr = price.frequency ? '/ ' + Sellable.getCapitalizeFirstLetter(price.frequency) : '';
                /** @type {?} */
                const roundedPrice = ((price.price || 0) / 100.0).toFixed(2);
                /** @type {?} */
                const startingAtPrefix = price.isStartingPrice ? 'Starting at ' : '';
                /** @type {?} */
                const priceStr = `${startingAtPrefix}${currencySymbol}${roundedPrice} ${currencyStr} ${frequencyStr}`;
                return (priceStr.trim().replace(/\s+/g, ' '));
            }));
        }
        else {
            return ['Contact Sales'];
        }
    }
    /**
     * @return {?}
     */
    get priceStrings() {
        if (this.shouldContactSales) {
            return ['Contact Sales'];
        }
        if (this.isFree) {
            return ['Free'];
        }
        return this.formattedPricingList;
    }
    /**
     * @return {?}
     */
    get formattedWholesalePrice() {
        return this.priceStrings.join(' + ');
    }
    /**
     * @param {?} currency
     * @return {?}
     */
    static getCurrencySymbol(currency) {
        /** @type {?} */
        let currencySymbol = '$';
        switch (currency) {
            case 'EUR':
                currencySymbol = '\u20AC';
                break;
            case 'GBP':
                currencySymbol = '\u00A3';
                break;
            case 'CHF':
                currencySymbol = 'Fr';
                break;
            case 'CNY':
                currencySymbol = '\u00A5';
                break;
            case 'JPY':
                currencySymbol = '\u00A5';
                break;
            case 'CZK':
                currencySymbol = 'K\u010d';
                break;
            case 'INR':
                currencySymbol = '\u20B9';
                break;
            case 'KHR':
                currencySymbol = '\u17DB';
                break;
            case 'KRW':
                currencySymbol = '\u20A9';
                break;
            case 'NOK':
                currencySymbol = 'kr';
                break;
            case 'SEK':
                currencySymbol = 'kr';
                break;
            case 'RUB':
                currencySymbol = '\u20BD';
                break;
            case 'TRY':
                currencySymbol = '\u20BA';
                break;
            case 'ZAR':
                currencySymbol = 'R';
                break;
            default:
                currencySymbol = '$';
                break;
        }
        return currencySymbol;
    }
}
if (false) {
    /** @type {?} */
    Sellable.prototype.pricing;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// @dynamic
class CaseTransform {
    /**
     * @param {?} value
     * @return {?}
     */
    static snakeToCamelCase(value) {
        return value ? value.replace(new RegExp(/_/g), ' ').replace(/\b\w/g, (/**
         * @param {?} l
         * @return {?}
         */
        l => l.toUpperCase()))
            .replace(/\b\w/, (/**
         * @param {?} l
         * @return {?}
         */
        l => l.toLowerCase())).replace(/\s/g, '') : value;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    static lowerToTitleCase(value) {
        // Code taken from https://github.com/gouch/to-title-case to support the proper spec.
        /** @type {?} */
        const smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs?\.?|via)$/i;
        return value ? value.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, (/**
         * @param {?} match
         * @param {?} index
         * @param {?} title
         * @return {?}
         */
        function (match, index, title) {
            if (index > 0 && index + match.length !== title.length &&
                match.search(smallWords) > -1 && title.charAt(index - 2) !== ':' &&
                (title.charAt(index + match.length) !== '-' || title.charAt(index - 1) === '-') &&
                title.charAt(index - 1).search(/[^\s-]/) < 0) {
                return match.toLowerCase();
            }
            if (match.substr(1).search(/[A-Z]|\../) > -1) {
                return match;
            }
            return match.charAt(0).toUpperCase() + match.substr(1);
        })) : value;
    }
    ;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const COLOR_CODES = [
    '#EF5350', '#42A5F5', '#66BB6A', '#FFA726', '#AB47BC', '#FFCA28', '#EC407A', '#26C6DA',
    '#FF7B57'
];
/** @type {?} */
const DEFAULT_COLOR = '#808080';
class Product extends Sellable {
    /**
     * @param {?=} data
     */
    constructor(data) {
        super();
        this.addons = [];
        data = data || {};
        this.pricing = data.pricing;
        this.productId = data.productId;
        this.editionId = data.editionId;
        this.editionName = data.editionName;
        this.name = data.name;
        this.description = data.description;
        this.tagline = data.tagline;
        this.iconUrl = data.iconUrl;
        this.entryUrl = data.entryUrl;
        this.screenshotUrls = data.screenshotUrls;
        this.pdfUploadUrls = data.pdfUploadUrls;
        this.lmiCategories = data.lmiCategories;
        this.keySellingPoints = data.keySellingPoints;
        this.faqs = data.faqs;
        this.wholesalePrice = data.wholesalePrice;
        this.currency = data.currency;
        this.billingFrequency = data.billingFrequency;
        this.isArchived = data.isArchived;
        this.addons = data.addons;
        this.restrictions = data.restrictions;
        this.billingId = data.billingId;
        if (data.hasOwnProperty('pdfUploadUrls')) {
            this.files = this.pdfUploadUrls ? this.pdfUploadUrls.map((/**
             * @param {?} url
             * @return {?}
             */
            url => new File(url))) : null;
        }
    }
    /**
     * @param {?} data
     * @return {?}
     */
    static fromApi(data) {
        /** @type {?} */
        const newProduct = {};
        data = data || {};
        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                /** @type {?} */
                const newKey = CaseTransform.snakeToCamelCase(key);
                newProduct[newKey] = data[key];
            }
        }
        return new Product(newProduct);
    }
    /**
     * @return {?}
     */
    get iconStyle() {
        return this.iconUrl ? `url("${this.iconUrl}") no-repeat center / 100% 100%` : null;
    }
    /**
     * @return {?}
     */
    get iconColor() {
        // determine an icon color for a product with no icon by using the product name
        if (!this.name) {
            return DEFAULT_COLOR;
        }
        /** @type {?} */
        let nameSum = 0;
        for (let i = 0; i < this.name.length; i++) {
            nameSum += this.name[i].charCodeAt(0);
        }
        /** @type {?} */
        const index = nameSum % COLOR_CODES.length;
        return COLOR_CODES[index];
    }
    /**
     * @return {?}
     */
    getLmiCategoryNames() {
        /** @type {?} */
        const lmiCategories = this.lmiCategories || [];
        return lmiCategories.map((/**
         * @param {?} lmiCategory
         * @return {?}
         */
        lmiCategory => CaseTransform.lowerToTitleCase(lmiCategory.toLowerCase().replace(/_/g, ' '))));
    }
}
if (false) {
    /** @type {?} */
    Product.prototype.productId;
    /** @type {?} */
    Product.prototype.editionId;
    /** @type {?} */
    Product.prototype.editionName;
    /** @type {?} */
    Product.prototype.name;
    /** @type {?} */
    Product.prototype.description;
    /** @type {?} */
    Product.prototype.tagline;
    /** @type {?} */
    Product.prototype.iconUrl;
    /** @type {?} */
    Product.prototype.entryUrl;
    /** @type {?} */
    Product.prototype.screenshotUrls;
    /** @type {?} */
    Product.prototype.pdfUploadUrls;
    /** @type {?} */
    Product.prototype.lmiCategories;
    /** @type {?} */
    Product.prototype.keySellingPoints;
    /** @type {?} */
    Product.prototype.faqs;
    /** @type {?} */
    Product.prototype.wholesalePrice;
    /** @type {?} */
    Product.prototype.currency;
    /** @type {?} */
    Product.prototype.billingFrequency;
    /** @type {?} */
    Product.prototype.billingId;
    /** @type {?} */
    Product.prototype.isArchived;
    /** @type {?} */
    Product.prototype.addons;
    /** @type {?} */
    Product.prototype.files;
    /** @type {?} */
    Product.prototype.restrictions;
}
class ProductWithParent extends Product {
    /**
     * @param {?} data
     * @return {?}
     */
    static fromApi(data) {
        /** @type {?} */
        const newProduct = {};
        data = data || {};
        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                /** @type {?} */
                const newKey = CaseTransform.snakeToCamelCase(key);
                newProduct[newKey] = data[key];
            }
        }
        return new ProductWithParent(newProduct);
    }
    /**
     * @param {?=} data
     */
    constructor(data) {
        super(data);
        this.parentId = data.parentId;
        this.parentName = data.parentName;
        this.parentIconUrl = data.parentIconUrl;
        this.multipleActivations = data.multipleActivations || false;
    }
}
if (false) {
    /** @type {?} */
    ProductWithParent.prototype.parentId;
    /** @type {?} */
    ProductWithParent.prototype.parentName;
    /** @type {?} */
    ProductWithParent.prototype.parentIconUrl;
    /** @type {?} */
    ProductWithParent.prototype.multipleActivations;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AddonDetailsComponent {
    constructor() {
        this.hasVerifiedContract = false;
        this.loaded = true;
        this.showPricing = true;
        this.showEnableAddon = false;
        this.actionEnabled = false;
        this.prerequisiteSelected = new EventEmitter();
        this.actionSelected = new EventEmitter();
    }
    /**
     * @return {?}
     */
    onPrerequisiteSelected() {
        this.prerequisiteSelected.emit();
    }
    /**
     * @return {?}
     */
    onActionSelected() {
        this.actionSelected.emit();
    }
    /**
     * @param {?} product
     * @param {?} addon
     * @return {?}
     */
    getPricing(product, addon) {
        return {
            currency: product.currency,
            prices: [
                {
                    price: addon.price,
                    frequency: addon.billingFrequency ? addon.billingFrequency : 'Monthly'
                }
            ]
        };
    }
    /**
     * @return {?}
     */
    get pricingLabel() {
        return this.reseller ? 'Wholesale Pricing' : 'Pricing';
    }
}
AddonDetailsComponent.decorators = [
    { type: Component, args: [{
                selector: 'addon-details',
                template: "<div class=\"addon-page\">\n  <va-header-container [iconUrl]=\"addon.icon\"\n                       [title]=\"addon.title\"\n                       [tagline]=\"addon.tagline\"\n                       [chipLabels]=\"product.getLmiCategoryNames()\"\n                       [pricing]=\"getPricing(product, addon)\"\n                       [pricingLabel]=\"pricingLabel\"\n                       [prerequisiteLabel]=\"product.name\"\n                       [billedProduct]=\"billedProduct\"\n                       [hasVerifiedContract]=\"hasVerifiedContract\"\n                       [loaded]=\"loaded\"\n                       [showPricing]=\"showPricing\"\n                       [actionLabel]=\"'Enable Add-on'\"\n                       [showEnableAddon]=\"showEnableAddon\"\n                       (actionSelected)=\"onActionSelected()\"\n                       (prerequisiteSelected)=\"onPrerequisiteSelected()\">\n  </va-header-container>\n\n  <div class=\"addon-details addon-content\">\n    <ng-container *ngIf=\"reseller\">\n      <div class=\"left-column\">\n        <div *ngIf=\"addon.resellerMarketing?.description || addon.resellerMarketing?.keySellingPoints\">\n          <va-selling-info [description]=\"addon.resellerMarketing?.description\"\n                           [keySellingPoints]=\"addon.resellerMarketing?.keySellingPoints\"></va-selling-info>\n        </div>\n        <section *ngIf=\"addon.resellerMarketing?.faqs?.length > 0 && addon.resellerMarketing?.faqs[0].question\">\n          <h2 class=\"va-addon-title\">FAQs</h2>\n          <va-faqs [faqs]=\"addon.resellerMarketing?.faqs\"></va-faqs>\n        </section>\n      </div>\n      <div class=\"right-column\">\n        <section *ngIf=\"addon.restrictions?.country?.whitelist\">\n          <supported-countries [countryCodes]=\"addon.restrictions.country.whitelist\"></supported-countries>\n        </section>\n        <section *ngIf=\"addon.screenshots?.length > 0\">\n          <h2 class=\"va-addon-title\">Gallery</h2>\n          <va-image-gallery [imageUrls]=\"addon.screenshots\"></va-image-gallery>\n        </section>\n        <section *ngIf=\"addon.resellerMarketing?.files?.length > 0\">\n        <h2 class=\"va-addon-title\">Files</h2>\n        <va-files [files]=\"addon.resellerMarketingFiles\"></va-files>\n        </section>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!reseller\">\n      <div class=\"left-column\">\n        <div *ngIf=\"addon.endUserMarketing?.description || addon.endUserMarketing?.keySellingPoints\">\n          <va-selling-info [description]=\"addon.endUserMarketing?.description\"\n                           [keySellingPoints]=\"addon.endUserMarketing?.keySellingPoints\"></va-selling-info>\n        </div>\n        <section *ngIf=\"addon.endUserMarketing?.faqs?.length > 0 && addon.endUserMarketing?.faqs[0].question\">\n          <h2 class=\"va-addon-title\">FAQs</h2>\n          <va-faqs [faqs]=\"addon.endUserMarketing?.faqs\"></va-faqs>\n        </section>\n      </div>\n\n      <div class=\"right-column\">\n        <section *ngIf=\"addon.restrictions?.country?.whitelist?.length > 0\">\n          <supported-countries [countryCodes]=\"addon.restrictions.country.whitelist\"></supported-countries>\n        </section>\n        <section *ngIf=\"addon.screenshots?.length > 0\">\n          <h2 class=\"va-addon-title\">Gallery</h2>\n          <va-image-gallery [imageUrls]=\"addon.screenshots\"></va-image-gallery>\n        </section>\n        <section *ngIf=\"addon.endUserMarketing?.files?.length > 0\">\n        <h2 class=\"va-addon-title\">Files</h2>\n        <va-files [files]=\"addon.endUserMarketingFiles\"></va-files>\n        </section>\n      </div>\n    </ng-container>\n  </div>\n\n</div>\n",
                styles: [":host{display:block;font-size:14px;line-height:1.4}:host *{box-sizing:border-box}.va-addon-title{font-size:32px;font-weight:300;margin-top:0;color:#212121}@media screen and (min-width:600px){.va-addon-title{font-size:32px}}img{max-width:100%}va-icon{display:inline-block}.addon-page{position:relative;margin:0 auto 20px;background:#fff;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px;color:#212121}.addon-page .item-amount{color:#999;font-size:14px;text-align:right;margin:0 24px 8px}section{padding:24px}.left-column{width:66%}@media screen and (max-width:600px){.left-column{width:100%}}.right-column{width:34%}.addon-content{display:-webkit-box;display:flex}@media screen and (max-width:600px){.right-column{width:100%}.addon-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}"]
            }] }
];
AddonDetailsComponent.propDecorators = {
    product: [{ type: Input }],
    addon: [{ type: Input }],
    reseller: [{ type: Input }],
    billedProduct: [{ type: Input }],
    hasVerifiedContract: [{ type: Input }],
    loaded: [{ type: Input }],
    showPricing: [{ type: Input }],
    showEnableAddon: [{ type: Input }],
    actionEnabled: [{ type: Input }],
    prerequisiteSelected: [{ type: Output }],
    actionSelected: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    AddonDetailsComponent.prototype.product;
    /** @type {?} */
    AddonDetailsComponent.prototype.addon;
    /** @type {?} */
    AddonDetailsComponent.prototype.reseller;
    /** @type {?} */
    AddonDetailsComponent.prototype.billedProduct;
    /** @type {?} */
    AddonDetailsComponent.prototype.hasVerifiedContract;
    /** @type {?} */
    AddonDetailsComponent.prototype.loaded;
    /** @type {?} */
    AddonDetailsComponent.prototype.showPricing;
    /** @type {?} */
    AddonDetailsComponent.prototype.showEnableAddon;
    /** @type {?} */
    AddonDetailsComponent.prototype.actionEnabled;
    /** @type {?} */
    AddonDetailsComponent.prototype.prerequisiteSelected;
    /** @type {?} */
    AddonDetailsComponent.prototype.actionSelected;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaFilesComponent {
}
VaFilesComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-files',
                template: `
    <div class="va-files file-list-container" *ngFor="let file of files">
      <mat-icon class="file-icon">insert_drive_file</mat-icon>
      <a [href]="file.url" target="_blank">{{ file.name }}</a>
    </div>`,
                styles: [".va-files{display:-webkit-inline-box;display:inline-flex;margin-bottom:16px}.va-files a{color:#212121;font-size:16px;font-weight:700;-ms-grid-row-align:center;align-self:center;padding-left:8px;text-decoration:none}.va-files .file-icon{vertical-align:middle}.va-files .file-list-container{display:-webkit-box;display:flex}"]
            }] }
];
VaFilesComponent.propDecorators = {
    files: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    VaFilesComponent.prototype.files;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaFilesModule {
}
VaFilesModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule
                ],
                declarations: [VaFilesComponent],
                exports: [VaFilesComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaFaqsComponent {
    constructor() {
        this.openFaqs = [];
    }
    /**
     * @param {?} index
     * @return {?}
     */
    toggleFaq(index) {
        if (this.openFaqs.indexOf(index) >= 0) {
            this.openFaqs.splice(this.openFaqs.indexOf(index), 1); // Remove
        }
        else {
            this.openFaqs.push(index); // Insert
        }
    }
    /**
     * @param {?} index
     * @return {?}
     */
    isFaqOpen(index) {
        return this.openFaqs.indexOf(index) >= 0;
    }
    /**
     * @param {?} index
     * @return {?}
     */
    faqIcon(index) {
        return this.isFaqOpen(index) ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
    }
}
VaFaqsComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-faqs',
                template: `
    <div class="va-faq" *ngFor="let faq of faqs; let i = index;">
      <div class="question" (click)="toggleFaq(i)">
        <span>{{ faq.question }}</span>
        <mat-icon>{{ faqIcon(i) }}</mat-icon>
      </div>
      <span class="answer" [ngClass]="{'show': isFaqOpen(i) }" [innerHtml]="faq.answer | vaSanitize"></span>
    </div>`,
                styles: [".va-faq{font-size:16px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:start;justify-content:flex-start;padding:12px 0;border-bottom:1px solid #e0e0e0}.va-faq:first-of-type{border-top:1px solid #e0e0e0}.va-faq .question{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;color:#212121;cursor:pointer}.va-faq .answer{color:#616161;height:0;overflow:hidden}.va-faq .show{padding-top:12px;height:inherit}"]
            }] }
];
VaFaqsComponent.propDecorators = {
    faqs: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    VaFaqsComponent.prototype.faqs;
    /** @type {?} */
    VaFaqsComponent.prototype.openFaqs;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaFaqsModule {
}
VaFaqsModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, MatIconModule, VaSafeHtmlModule],
                declarations: [VaFaqsComponent],
                exports: [VaFaqsComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaSellingInfoComponent {
    /**
     * @return {?}
     */
    get filterDescription() {
        /** @type {?} */
        const desc = this.description.replace(/max-width:\d*[^\"]/i, 'max-width:100%');
        if ((desc.indexOf('"max-width:100%"') === -1) && (desc.indexOf('<iframe ') !== -1)) {
            /** @type {?} */
            const index = desc.indexOf('<iframe ') + 7;
            return desc.substr(0, index) + ' style="max-width:100%"' + desc.substr(index);
        }
        return String(desc);
    }
}
VaSellingInfoComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-selling-info',
                template: `
      <section *ngIf="description" class="resize" [innerHtml]="filterDescription | vaSafeHtml"></section>
      <section *ngIf="keySellingPoints && keySellingPoints.length > 0" class="key-selling-points">
        <div *ngFor="let ksp of keySellingPoints" class="key-selling-point">
          <mat-icon>check_circle</mat-icon>
          {{ ksp }}
        </div>
      </section>
    `,
                styles: ["section{padding:24px}section ::ng-deep>:first-child{margin-top:0;padding-top:0}#description *{max-width:100%!important}.key-selling-point{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding-bottom:24px;font-size:16px}@media screen and (max-width:600px){.resize{font-size:16px}.key-selling-point{-webkit-box-align:start;align-items:flex-start}}.key-selling-point:last-of-type{padding-bottom:0}.key-selling-point mat-icon{color:#4caf50;font-size:32px;width:32px;height:32px;margin-right:20px}"]
            }] }
];
VaSellingInfoComponent.propDecorators = {
    description: [{ type: Input }],
    keySellingPoints: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    VaSellingInfoComponent.prototype.description;
    /** @type {?} */
    VaSellingInfoComponent.prototype.keySellingPoints;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaSellingInfoModule {
}
VaSellingInfoModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, MatIconModule, VaSafeHtmlModule],
                declarations: [VaSellingInfoComponent],
                exports: [VaSellingInfoComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SupportedCountriesComponent {
}
SupportedCountriesComponent.decorators = [
    { type: Component, args: [{
                selector: 'supported-countries',
                template: `
    <span class="supported-text"> Supported Countries: </span>
    <div class="flags">
        <span *ngFor="let countryCode of countryCodes" matTooltip="{{countryCode}}" matTooltipPosition="below"
              class="flag-icon flag-icon-{{countryCode.toLowerCase()}}">
        </span>
    </div>
    `,
                styles: [".flag-icon{margin-right:10px}.supported-text{margin-right:3px}.flags{display:inline-block}"]
            }] }
];
SupportedCountriesComponent.propDecorators = {
    countryCodes: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    SupportedCountriesComponent.prototype.countryCodes;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class RestrictionsModule {
}
RestrictionsModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, MatTooltipModule],
                declarations: [SupportedCountriesComponent],
                exports: [SupportedCountriesComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AddonModule {
}
AddonModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    VaListModule,
                    VaImageGalleryModule,
                    VaIconModule,
                    VaPricingModule,
                    VaFilesModule,
                    VaFaqsModule,
                    VaSellingInfoModule,
                    VaHeaderContainerModule,
                    VaSafeHtmlModule,
                    MatProgressSpinnerModule$1,
                    VaBreadcrumbsModule,
                    RestrictionsModule
                ],
                exports: [AddonDetailsComponent],
                declarations: [AddonDetailsComponent],
                providers: [],
                entryComponents: []
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DetailsStencilComponent {
}
DetailsStencilComponent.decorators = [
    { type: Component, args: [{
                selector: 'details-stencil',
                template: `
    <div class="details">

      <mat-card class="details-header">
        <div class="details-column-0">
          <div class="details-column-0-1">
            <div class="details-icon stencil-shimmer"></div>
          </div>
          <div class="details-column-0-2">
            <div class="details-title stencil-shimmer"></div>
            <div class="details-title stencil-shimmer"></div>
          </div>
        </div>
        <div class="details-column-1">
          <div class="details-column-1-0 stencil-shimmer"></div>
          <div class="details-column-1-1 stencil-shimmer"></div>
        </div>
      </mat-card>

      <mat-card>
        <div class="details-box-large stencil-shimmer"></div>
      </mat-card>

      <mat-card class="details-body">
        <div class="details-body-column-0" >
          <div class="details-icon-small stencil-shimmer"></div>
          <div class="details-icon-small stencil-shimmer"></div>
          <div class="details-icon-small stencil-shimmer"></div>
          <div class="details-icon-small stencil-shimmer"></div>
          <div class="details-icon-small stencil-shimmer"></div>
          <div class="details-icon-small stencil-shimmer"></div>
          <div class="details-icon-small stencil-shimmer"></div>
        </div>
        <div class="details-body-column-1">
          <div class="details-line stencil-shimmer"></div>
          <div class="details-line stencil-shimmer"></div>
          <div class="details-line stencil-shimmer"></div>
          <div class="details-line stencil-shimmer"></div>
          <div class="details-line stencil-shimmer"></div>
          <div class="details-line stencil-shimmer"></div>
          <div class="details-line stencil-shimmer"></div>
        </div>
        <div class="details-body-column-2">
          <div class="details-box stencil-shimmer"></div>
          <div class="details-box stencil-shimmer"></div>
          <div class="details-box stencil-shimmer"></div>
          <div class="details-box stencil-shimmer"></div>
          <div class="details-box stencil-shimmer"></div>
        </div>
      </mat-card>

    </div>
  `,
                styles: [".details{position:relative;margin:0 auto 20px;background:#fff;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px}.details-header{display:-webkit-box;display:flex;height:180px}.details-column-0{display:-webkit-box;display:flex;width:66%}@media screen and (max-width:600px){.details-column-0{width:100%}}.details-column-0-1{display:-webkit-box;display:flex;width:25%;min-width:120px}@media screen and (max-width:600px){.details-column-0-1{width:50%}}.details-icon{height:120px;width:120px;border-radius:50%}.details-title{margin:20px 0 20px 20px;height:32px;width:250px}@media screen and (max-width:600px){.details-title{width:120px}}.details-column-1{width:34%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}@media screen and (max-width:1100px){.details-column-1{width:0}}.details-column-1-0{height:32px;margin:10px 0}.details-column-1-1{height:70px}@media screen and (max-width:600px){.details-column-1-0{width:0;margin:0}.details-column-1-1{height:0}}.details-box-large{display:-webkit-box;display:flex;width:650px;height:150px}@media screen and (max-width:1100px){.details-box-large{width:100%}}.details-body{display:-webkit-box;display:flex;height:500px;width:100%}.details-body-column-0{width:10%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}@media screen and (max-width:600px){.details-body-column-0{width:0%}}.details-body-column-1{width:56%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}@media screen and (max-width:600px){.details-body-column-1{width:100%}}.details-icon-small{margin-bottom:24px;display:-webkit-box;display:flex;height:32px;width:32px;border-radius:50%}.details-line{margin-bottom:24px;height:32px;width:400px}@media screen and (max-width:600px){.details-line{width:100%;margin-right:10px}}.details-body-column-2{width:34%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}@media screen and (max-width:1100px){.details-body-column-2{width:0}}.details-box{height:70px;margin-bottom:10px}@media screen and (max-width:600px){.details-box{width:0;margin:0}}"]
            }] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CardStencilComponent {
}
CardStencilComponent.decorators = [
    { type: Component, args: [{
                selector: 'card-stencil',
                template: `
    <div class="card-stencil-container">
      <mat-card class="card-stencil">
        <div class="card-stencil-header stencil-shimmer"></div>
        <div class="card-stencil-footer">
          <div class="card-stencil-circle stencil-shimmer"></div>
          <div>
            <div class="card-stencil-line-large stencil-shimmer"></div>
            <div class="card-stencil-line-medium stencil-shimmer"></div>
          </div>
        </div>
      </mat-card>
    </div>
  `,
                styles: [".card-stencil-container{position:relative;width:100%;padding-bottom:100%;margin-bottom:-45%}.card-stencil{position:absolute;width:100%;height:55%;padding:0;margin-bottom:0}.card-stencil-header{display:-webkit-box;display:flex;height:60%}.card-stencil-footer{display:-webkit-box;display:flex;height:40%;-webkit-box-align:center;align-items:center}.card-stencil-circle{margin:0 16px;height:60px;width:60px;border-radius:50%}@media screen and (max-width:650px){.card-stencil-circle{width:45px;height:45px}}.card-stencil-line-large{height:20px;width:200px;margin-bottom:10px}@media screen and (max-width:650px){.card-stencil-line-large{width:100px;height:10px}}.card-stencil-line-medium{height:20px;width:160px}@media screen and (max-width:650px){.card-stencil-line-medium{width:80px;height:10px}}"]
            }] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CardListStencilComponent {
    constructor() {
        this.numCards = 3;
        this.cards = [];
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        for (let n = 0; n < this.numCards; n++) {
            this.cards.push(n);
        }
    }
}
CardListStencilComponent.decorators = [
    { type: Component, args: [{
                selector: 'card-stencil-list',
                template: `
    <div class="row row-gutters">
      <div *ngFor="let _ of cards" class="col-flex">
        <card-stencil></card-stencil>
      </div>
    </div>
  `,
                styles: [`
    .row {
      display: flex;
      flex-wrap: wrap;
    }

    .row + .row-gutters {
      margin-top: 0;
    }

    .row-gutters {
      margin-top: -20px;
      margin-left: -20px;
    }

    .row-gutters > .col-flex {
      padding-top: 20px;
      padding-left: 20px;
    }

    .col-flex {
      position: relative;
      max-width: 100%;
      box-sizing: border-box;
      flex: 0 0 auto;
      width: 100%;
    }

    @media screen and (min-width: 480px) {
      .col-flex {
        width: 50%;
      }
    }

    @media screen and (min-width: 1200px) {

      .col-flex {
        width: 33.333333%;
      }
    }

  `]
            }] }
];
CardListStencilComponent.propDecorators = {
    numCards: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    CardListStencilComponent.prototype.numCards;
    /** @type {?} */
    CardListStencilComponent.prototype.cards;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SearchBarStencilComponent {
}
SearchBarStencilComponent.decorators = [
    { type: Component, args: [{
                selector: 'search-bar-stencil',
                template: `
    <div class="search-bar-stencil-container">
      <div class="search-bar-stencil-line stencil-shimmer">
        <div class="search-bar-stencil-icon"></div>
      </div>
    </div>
  `,
                styles: [`
    .search-bar-stencil-container {
      height: 52px;
      display: flex;
      align-content: center;
      background-color: white;
      border-radius: 2px;
    }
    .search-bar-stencil-line {
      height: 30px;
      width: 350px;
      margin: auto 10px;
      display: flex;
      justify-content: flex-end;
    }
    .search-bar-stencil-icon {
      background-color: white;
      width: 20px;
      height: 20px;
      margin: auto 5px;
    }
  `]
            }] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ListStencilComponent {
    constructor() {
        this.showHeader = true;
        this.numRows = 3;
        this.rowHeight = '51px'; // defaults to height of partner center business tab height (95px for marketplace)
        // defaults to height of partner center business tab height (95px for marketplace)
        this.sidePadding = '17px'; // defaults to padding on partner center business padding (38px for marketplace)
        // defaults to padding on partner center business padding (38px for marketplace)
        this.rows = []; // this is to turn the number of rows into an arbitrary list so we can loop through them
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        for (let n = 0; n < this.numRows; n++) {
            this.rows.push(n);
        }
        // if you think this is gross i agree
        // if you think this is gross and actually have a solution hit me up otherwise just enjoy the magic.
        // determine the height of each row for the table
        this.listItemRowStyles = {
            'height': `${this.rowHeight}`,
            'padding': `0 ${this.sidePadding}`
        };
    }
}
ListStencilComponent.decorators = [
    { type: Component, args: [{
                selector: 'list-stencil',
                template: `
    <mat-card class="list-container">
      <div *ngIf="showHeader" class="list-header stencil-shimmer" style=""></div>
      <div *ngFor="let _ of rows">
        <div class="list-item-row" [ngStyle]="listItemRowStyles">
          <div class="stencil-shimmer" style="margin: 0; padding: 0; width: 100%; height: 80%;"></div>
        </div>
      </div>
    </mat-card>
  `,
                styles: [`
    .list-container { padding: 0; }
    .list-header { height: 40px; }
    .list-item-row { height: 50px; display: flex; justify-content: space-between; align-items: center; }
  `]
            }] }
];
ListStencilComponent.propDecorators = {
    showHeader: [{ type: Input }],
    numRows: [{ type: Input }],
    rowHeight: [{ type: Input }],
    sidePadding: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    ListStencilComponent.prototype.showHeader;
    /** @type {?} */
    ListStencilComponent.prototype.numRows;
    /** @type {?} */
    ListStencilComponent.prototype.rowHeight;
    /** @type {?} */
    ListStencilComponent.prototype.sidePadding;
    /** @type {?} */
    ListStencilComponent.prototype.rows;
    /** @type {?} */
    ListStencilComponent.prototype.listItemRowStyles;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class StencilsModule {
}
StencilsModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, MatCardModule, MatIconModule, MatInputModule, MatSelectModule, MatExpansionModule, MatCheckboxModule],
                declarations: [DetailsStencilComponent, CardStencilComponent, CardListStencilComponent, SearchBarStencilComponent, ListStencilComponent],
                exports: [DetailsStencilComponent, CardStencilComponent, CardListStencilComponent, SearchBarStencilComponent, ListStencilComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaAddonListComponent {
    /**
     * @param {?} billingService
     * @param {?} cdr
     */
    constructor(billingService, cdr) {
        this.billingService = billingService;
        this.cdr = cdr;
        this.showPricing = true;
        this._hasVerifiedContract = null;
        this._canAccessContractPricing = null;
        this.addonSelected = new EventEmitter();
        this.billedProductsMap = new Map();
        this.billedProductLoaded = new Map();
        this.subscriptions = [];
    }
    /**
     * @param {?} addons
     * @return {?}
     */
    set addons(addons) {
        this._addons = addons;
        this.populateBilledProduct();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set hasVerifiedContract(value) {
        this._hasVerifiedContract = value;
        this.populateBilledProduct();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set canAccessContractPricing(value) {
        this._canAccessContractPricing = value;
        this.populateBilledProduct();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.populateBilledProduct();
    }
    /**
     * @return {?}
     */
    populateBilledProduct() {
        if (this.displayContractPricing()) {
            /** @type {?} */
            const billingIDs = this._addons.map((/**
             * @param {?} a
             * @return {?}
             */
            a => {
                this.billedProductsMap.set(a.addonId, null);
                this.billedProductLoaded.set(a.addonId, false);
                return a.billingId;
            }));
            this.subscriptions.push(this.billingService.getMultiProductPricing(this.partnerID, billingIDs).subscribe((/**
             * @param {?} pricing
             * @return {?}
             */
            pricing => {
                this._addons.forEach((/**
                 * @param {?} addon
                 * @return {?}
                 */
                addon => {
                    /** @type {?} */
                    const addonPricing = pricing[addon.billingId];
                    if (!addonPricing) {
                        return;
                    }
                    /** @type {?} */
                    const billedProduct = buildBilledProductFromProductPricingAndAddon(addon, addonPricing);
                    this.billedProductsMap.set(addon.addonId, billedProduct);
                    this.billedProductLoaded.set(addon.addonId, true);
                }));
                this.cdr.detectChanges();
            })));
        }
    }
    /**
     * @param {?} addonId
     * @return {?}
     */
    onClick(addonId) {
        this.addonSelected.emit(addonId);
    }
    /**
     * @param {?} object
     * @return {?}
     */
    instanceOfPricing(object) {
        if (typeof object === 'number') {
            return false;
        }
        return object.currency !== undefined && object.prices !== undefined;
    }
    /**
     * @param {?} addon
     * @return {?}
     */
    getDisplayPricing(addon) {
        /** @type {?} */
        const price = addon.price;
        if (price && this.instanceOfPricing(price)) {
            return price;
        }
        return {
            currency: addon.currency,
            prices: [
                {
                    price: addon.price,
                    frequency: addon.billingFrequency ? addon.billingFrequency : 'Monthly'
                }
            ]
        };
    }
    /**
     * @return {?}
     */
    noData() {
        return isNullOrUndefined(this._hasVerifiedContract) || isNullOrUndefined(this._canAccessContractPricing);
    }
    /**
     * @return {?}
     */
    displayContractPricing() {
        return this._canAccessContractPricing && this._hasVerifiedContract;
    }
    /**
     * @param {?} addon
     * @return {?}
     */
    isBilledProductLoaded(addon) {
        if (this.noData()) {
            return false;
        }
        if (this.displayContractPricing()) {
            /** @type {?} */
            const value = this.billedProductLoaded.get(addon.addonId);
            return value ? value : false;
        }
        return true;
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.subscriptions.forEach((/**
         * @param {?} subscription
         * @return {?}
         */
        subscription => subscription.unsubscribe()));
    }
}
VaAddonListComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-addon-list',
                template: "<mat-list *ngIf=\"_addons\" class=\"addon-list\">\n    <mat-divider></mat-divider>\n    <ng-container *ngFor=\"let addon of _addons\">\n        <mat-list-item (click)=\"onClick(addon.addonId)\">\n            <div class=\"addon-icon-title\">\n                <img *ngIf=\"addon.icon;else noIcon\" class=\"addon-icon\" [src]=\"addon.icon\" mat-list-avatar/>\n                <ng-template #noIcon>\n                    <mat-icon class=\"addon-default-icon\" mat-list-icon>add_circle</mat-icon>\n                </ng-template>\n                <div class=\"addon-title-tagline\">\n                    <p class=\"addon-title\" matLine>{{ addon.title }} </p>\n                    <p class=\"addon-tagline\" matLine>{{ addon.tagline }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"showPricing\" class=\"price-section\">\n                <va-pricing\n                    [pricing]=\"getDisplayPricing(addon)\"\n                    [highlightPrice]=\"false\"\n                    [hasVerifiedContract]=\"_hasVerifiedContract\"\n                    [billedProduct]=\"billedProductsMap.get(addon.addonId)\"\n                    [loaded]=\"isBilledProductLoaded(addon)\">\n                </va-pricing>\n            </div>\n        </mat-list-item>\n        <mat-divider></mat-divider>\n    </ng-container>\n</mat-list>\n",
                styles: [":host{display:block}h2+:host{margin:-8px 0}:host ::ng-deep .mat-list-item.mat-2-line{height:auto!important}:host ::ng-deep .mat-list .mat-list-item .mat-list-item-content{padding:8px;-webkit-box-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}@media screen and (min-width:800px){:host ::ng-deep .mat-list .mat-list-item .mat-list-item-content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}.addon-list{position:relative}.addon-default-icon{margin:0 5px;color:#4caf50}.addon-icon{width:32px;height:32px}.addon-icon-title{-webkit-box-flex:1;flex-grow:1;display:-webkit-box;display:flex;width:100%}@media screen and (min-width:800px){.addon-icon-title{width:auto}}.addon-title-tagline{padding:0 16px 10px 8px;-webkit-box-flex:1;flex-grow:1}.addon-title-tagline .addon-title{color:#212121;font-size:16px;line-height:1.2;margin:6px 0;white-space:normal}.addon-title-tagline .addon-tagline{color:#616161;font-size:14px;margin:0;white-space:normal}.price-section{min-width:10em;margin-top:6px;flex-shrink:0}mat-list-item:hover{background-color:#fafafa!important;cursor:pointer!important}"]
            }] }
];
/** @nocollapse */
VaAddonListComponent.ctorParameters = () => [
    { type: BillingService },
    { type: ChangeDetectorRef }
];
VaAddonListComponent.propDecorators = {
    addons: [{ type: Input, args: ['addons',] }],
    showPricing: [{ type: Input }],
    partnerID: [{ type: Input }],
    hasVerifiedContract: [{ type: Input, args: ['hasVerifiedContract',] }],
    canAccessContractPricing: [{ type: Input, args: ['canAccessContractPricing',] }],
    addonSelected: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    VaAddonListComponent.prototype._addons;
    /** @type {?} */
    VaAddonListComponent.prototype.showPricing;
    /** @type {?} */
    VaAddonListComponent.prototype.partnerID;
    /** @type {?} */
    VaAddonListComponent.prototype._hasVerifiedContract;
    /** @type {?} */
    VaAddonListComponent.prototype._canAccessContractPricing;
    /** @type {?} */
    VaAddonListComponent.prototype.addonSelected;
    /** @type {?} */
    VaAddonListComponent.prototype.billedProductsMap;
    /**
     * @type {?}
     * @private
     */
    VaAddonListComponent.prototype.billedProductLoaded;
    /**
     * @type {?}
     * @private
     */
    VaAddonListComponent.prototype.subscriptions;
    /**
     * @type {?}
     * @private
     */
    VaAddonListComponent.prototype.billingService;
    /**
     * @type {?}
     * @private
     */
    VaAddonListComponent.prototype.cdr;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaAddonListModule {
}
VaAddonListModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    BillingModule,
                    CommonModule,
                    MatIconModule,
                    MatListModule$1,
                    MatDividerModule,
                    VaPricingModule
                ],
                declarations: [VaAddonListComponent],
                exports: [VaAddonListComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function HeimdallServiceTokenInterface() { }
if (false) {
    /**
     * @param {?} category
     * @param {?} action
     * @param {?} label
     * @param {?=} value
     * @param {?=} dimensions
     * @return {?}
     */
    HeimdallServiceTokenInterface.prototype.track = function (category, action, label, value, dimensions) { };
}
/** @type {?} */
const HeimdallServiceToken = new InjectionToken('HeimdallService');
class HeimdallClient {
    /**
     * @param {?} userEvents
     */
    constructor(userEvents) {
        this.userEvents = userEvents;
    }
    /**
     * @param {?} category
     * @param {?} action
     * @param {?} label
     * @param {?=} value
     * @param {?=} dimensions
     * @return {?}
     */
    track(category, action, label, value, dimensions) {
        this.userEvents.track(category, action, label, value, dimensions);
    }
}
HeimdallClient.decorators = [
    { type: Injectable }
];
/** @nocollapse */
HeimdallClient.ctorParameters = () => [
    { type: undefined, decorators: [{ type: Inject, args: [HeimdallServiceToken,] }] }
];
if (false) {
    /**
     * @type {?}
     * @private
     */
    HeimdallClient.prototype.userEvents;
}
class HeimdallClientModule {
}
HeimdallClientModule.decorators = [
    { type: NgModule, args: [{
                providers: [HeimdallClient]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const STOREFRONT_FILTER_NAME = 'Store Filters';
/**
 * @record
 */
function StorefrontCategory() { }
if (false) {
    /** @type {?} */
    StorefrontCategory.prototype.id;
    /** @type {?} */
    StorefrontCategory.prototype.name;
    /** @type {?} */
    StorefrontCategory.prototype.packageIds;
}
class StorefrontComponent {
    /**
     * @param {?} userEvents
     * @param {?} filterService
     * @param {?} translateService
     */
    constructor(userEvents, filterService, translateService) {
        this.userEvents = userEvents;
        this.filterService = filterService;
        this.translateService = translateService;
        this.useCustomCase = false;
        this.categorySelected = new EventEmitter();
        this.packageIdSelected = new EventEmitter();
        this.getDataForCategory = new EventEmitter();
        this.categories$$ = new BehaviorSubject([]);
        this.packagesMap$$ = new BehaviorSubject(new Map());
        this.searchTerm$$ = new BehaviorSubject('');
        this.selectedCateoryId$$ = new BehaviorSubject('');
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set categories(value) {
        this.categories$$.next(value || []);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set categoryIdToStoreItemListMap(value) {
        this.packagesMap$$.next(value || new Map());
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        const lmiCategoryCheckboxList = LMI_CATEGORIES.map((/**
         * @param {?} category
         * @return {?}
         */
        (category) => {
            return new CheckboxFilterField({
                name: category.name,
                id: category.categoryId,
                value: false,
                condition: (/**
                 * @param {?} item
                 * @return {?}
                 */
                (item) => {
                    /** @type {?} */
                    let lmiCategories = [];
                    if (item.lmiCategories) {
                        lmiCategories = item.lmiCategories.map((/**
                         * @param {?} cat
                         * @return {?}
                         */
                        (cat) => {
                            return Categories[cat].toLowerCase();
                        }));
                    }
                    return lmiCategories.indexOf(category.categoryId) > -1;
                })
            });
        }));
        /** @type {?} */
        const lmiCategoryFilterSection = new FilterSection({
            title: 'LMI Category',
            type: 'or',
            fields: lmiCategoryCheckboxList
        });
        this.lmiCategoryFilter = new Filters(STOREFRONT_FILTER_NAME, [
            lmiCategoryFilterSection
        ]);
        this.filters$ = this.categories$$.pipe(map((/**
         * @param {?} categories
         * @return {?}
         */
        categories => {
            /** @type {?} */
            const tabbedFilterField = new TabbedFilterField({
                name: '',
                value: null,
                id: 'categorytab',
                options: categories
            });
            /** @type {?} */
            const filters = new Filters(STOREFRONT_FILTER_NAME, [
                new FilterSection({
                    title: 'Categories',
                    type: 'or',
                    fields: [tabbedFilterField]
                }),
                lmiCategoryFilterSection
            ]);
            return filters;
        })));
        this.filterService.setFilters(this.lmiCategoryFilter);
        this.searchTermSubscription = this.searchTerm$$.asObservable().pipe(debounceTime(300), distinctUntilChanged()).subscribe((/**
         * @param {?} searchTerm
         * @return {?}
         */
        searchTerm => this.userEvents.track('store', 'search-input', '', 1, { 'searchTerm': searchTerm })));
        /** @type {?} */
        const selectedLMIFilters$ = this.filterService.filters.fieldValuesObservable.pipe(startWith([]), map((/**
         * @return {?}
         */
        () => {
            return this.lmiCategoryFilter.fields.filter((/**
             * @param {?} item
             * @return {?}
             */
            (item) => item.value));
        })));
        this.showLMIFilter$ = selectedLMIFilters$.pipe(filter((/**
         * @param {?} selectedLMIFilters
         * @return {?}
         */
        selectedLMIFilters => !!selectedLMIFilters)), take(1), map((/**
         * @param {?} selectedLMIFilters
         * @return {?}
         */
        selectedLMIFilters => selectedLMIFilters.length > 0)));
        this.filteredItems$ = combineLatest(this.packagesMap$$, this.searchTerm$$, this.selectedCateoryId$$, selectedLMIFilters$).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([packages, searchTerm, selectedCategoryId, selectedLMIFilters]) => {
            /** @type {?} */
            let storeItems = [];
            if (packages.size) {
                storeItems = (selectedCategoryId ? packages.get(selectedCategoryId) : packages.get(Array.from(packages.keys())[0]));
            }
            storeItems = storeItems ? this.lmiCategoryFilter.applyFilters(storeItems) : [];
            return searchTerm ? storeItems.filter((/**
             * @param {?} item
             * @return {?}
             */
            item => item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)) : storeItems;
        })));
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.searchTermSubscription.unsubscribe();
    }
    /**
     * @param {?} term
     * @return {?}
     */
    onSearchTermChanged(term) {
        this.searchTerm$$.next(term);
    }
    /**
     * @param {?} filterField
     * @return {?}
     */
    onFieldValueChanged(filterField) {
        if (!(filterField instanceof TabbedFilterField)) {
            return;
        }
        this.selectedCateoryId$$.next(filterField.value.id);
        this.categorySelected.emit((/** @type {?} */ (filterField.value)));
        /** @type {?} */
        const currentStoreItemsForSelectCategory = this.packagesMap$$.getValue().get(filterField.value.id);
        if (!(currentStoreItemsForSelectCategory && currentStoreItemsForSelectCategory.length)) {
            this.getDataForCategory.emit((/** @type {?} */ (filterField.value)));
        }
    }
    /**
     * @param {?} item
     * @return {?}
     */
    storeItemClicked(item) {
        this.packageIdSelected.emit(item.id);
    }
}
StorefrontComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-storefront',
                template: "<va-filter-container\n  [filters]=\"filters$ | async\"\n  (searchTermChanged)=\"onSearchTermChanged($event)\"\n  (fieldValueChanged)=\"onFieldValueChanged($event)\"\n  [theme]=\"'plain'\"\n  [filterIsOpen]=\"showLMIFilter$ | async\"\n  [useCustomCase]=\"useCustomCase\"\n  >\n    <va-store\n      [items]=\"filteredItems$ | async\"\n      [searchable]=\"false\"\n      (itemClicked)=\"storeItemClicked($event)\"\n      content>\n    </va-store>\n</va-filter-container>\n",
                styles: [".public-store-container{padding:20px}va-store{margin-top:20px;display:block}@media only screen and (device-width:375px) and (-webkit-device-pixel-ratio:2){::ng-deep va-filter-tabbed{width:280px}::ng-deep .filter-container .toolbar.toolbar{background:0 0}}@media only screen and (device-width:414px) and (-webkit-device-pixel-ratio:3){::ng-deep va-filter-tabbed{width:280px}::ng-deep .filter-container .toolbar.toolbar{background:0 0}}"]
            }] }
];
/** @nocollapse */
StorefrontComponent.ctorParameters = () => [
    { type: undefined, decorators: [{ type: Inject, args: [HeimdallServiceToken,] }] },
    { type: FilterService },
    { type: TranslateService }
];
StorefrontComponent.propDecorators = {
    categories: [{ type: Input }],
    categoryIdToStoreItemListMap: [{ type: Input }],
    useCustomCase: [{ type: Input }],
    categorySelected: [{ type: Output }],
    packageIdSelected: [{ type: Output }],
    getDataForCategory: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    StorefrontComponent.prototype.useCustomCase;
    /** @type {?} */
    StorefrontComponent.prototype.categorySelected;
    /** @type {?} */
    StorefrontComponent.prototype.packageIdSelected;
    /** @type {?} */
    StorefrontComponent.prototype.getDataForCategory;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.categories$$;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.packagesMap$$;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.searchTerm$$;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.selectedCateoryId$$;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.lmiCategoryFilter;
    /** @type {?} */
    StorefrontComponent.prototype.filters$;
    /** @type {?} */
    StorefrontComponent.prototype.filteredItems$;
    /** @type {?} */
    StorefrontComponent.prototype.searchTermSubscription;
    /** @type {?} */
    StorefrontComponent.prototype.showLMIFilter$;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.userEvents;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.filterService;
    /**
     * @type {?}
     * @private
     */
    StorefrontComponent.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class StoreModule {
}
StoreModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, UIKitModule, MatCardModule, MatIconModule, MatInputModule, FormsModule, ReactiveFormsModule,
                    MatSelectModule, MatExpansionModule, MatCheckboxModule, StoreCardModule, VaOrderFormModule, AddonModule, StencilsModule,
                    VaPricingModule, VaAddonListModule, HeimdallClientModule],
                declarations: [StoreComponent, StorefrontComponent],
                providers: [StoreService, FilterService],
                exports: [StoreComponent, StoreCardModule, VaOrderFormModule, StencilsModule, StorefrontComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function LmiCategory() { }
if (false) {
    /** @type {?} */
    LmiCategory.prototype.name;
    /** @type {?} */
    LmiCategory.prototype.categoryId;
}
/** @type {?} */
const LMI_CATEGORIES = [
    { name: 'Listings', categoryId: 'listings' },
    { name: 'Social', categoryId: 'social' },
    { name: 'Reputation', categoryId: 'reputation' },
    { name: 'SEO', categoryId: 'seo' },
    { name: 'Website', categoryId: 'website' },
    { name: 'Advertising', categoryId: 'advertising' },
    { name: 'Content & Experience', categoryId: 'content_and_experience' }
];
/** @type {?} */
const LMI_CATEGORY_MAP = LMI_CATEGORIES.reduce((/**
 * @param {?} previous
 * @param {?} current
 * @return {?}
 */
(previous, current) => {
    previous[current.categoryId] = current;
    return previous;
}), {});
/** @type {?} */
const LMI_CATEGORIES_BY_NAME = LMI_CATEGORIES.reduce((/**
 * @param {?} previous
 * @param {?} current
 * @return {?}
 */
(previous, current) => {
    previous[current.name] = current;
    return previous;
}), {});

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaSalespersonDetailsComponent {
    constructor() {
        this.showGetItNow = true;
        this.getItNow = new EventEmitter();
    }
    /**
     * @return {?}
     */
    onGetItNowSelected() {
        this.getItNow.emit(this.salesperson);
    }
    /**
     * @return {?}
     */
    get iconUrl() {
        return this.salesperson && this.salesperson.photoUrlSecure ?
            this.salesperson.photoUrlSecure :
            'https://vbc-frontend.storage-download.googleapis.com/salesperson-details/default_sales_person.jpg';
    }
    /**
     * @return {?}
     */
    get name() {
        return this.salesperson && this.salesperson.formattedName ?
            this.salesperson.formattedName : '';
    }
    /**
     * @return {?}
     */
    get title() {
        return this.salesperson && this.salesperson.jobTitle ?
            this.salesperson.jobTitle : '';
    }
    /**
     * @return {?}
     */
    get email() {
        return this.salesperson && this.salesperson.email ?
            this.salesperson.email : '';
    }
    /**
     * @return {?}
     */
    get cityAndState() {
        return this.salesperson && this.salesperson.city && this.salesperson.state ?
            this.salesperson.city + ', ' + this.salesperson.state : '';
    }
}
VaSalespersonDetailsComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-salesperson-details',
                template: "<div class=\"container\">\n      <div class=\"salesperson-contact-info\">\n\n        <div class=\"salesperson-image\" *ngIf=\"salesperson\">\n          <va-icon [iconUrl]=\"iconUrl\" [diameter]=\"60\"></va-icon>\n        </div>\n\n        <div>\n          <div class=\"salesperson-name\">{{ name }}</div>\n          <div>{{ title }}</div>\n          <div>{{ cityAndState }}</div>\n          <div><a href=\"mailto:{{ email }}\">{{ email }}</a></div>\n        </div>\n\n        <div *ngIf=\"!salesperson\" class=\"generic-contact\">\n          Contact {{ brandName ? \"your \" + brandName : \"a\" }} representative today!\n        </div>\n\n         <div class=\"pricing\">\n          <va-pricing [pricing]=\"packagePricing\" wrapFrequency=\"true\"></va-pricing>\n          <div class=\"cta get-it-now-bottom-button\">\n            <button mat-button *ngIf=\"salesperson && showGetItNow\" (click)=\"onGetItNowSelected()\" class=\"now-button\">\n              Get it Now\n            </button>\n          </div>\n        </div>\n      </div>\n</div>\n",
                styles: ["a{color:#1e88e5;text-decoration:none}.container{width:100%;margin:0 auto;background-color:#fff;box-shadow:1px 1px 1px 0 rgba(0,0,0,.2)}.salesperson-image{margin-right:20px}.salesperson-contact-info{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:24px;font-size:14px;color:#9e9e9e}@media screen and (max-width:600px){.salesperson-contact-info{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;display:inline-block}}.salesperson-name{font-size:20px;font-weight:700;color:#212121}.generic-contact{margin-left:20px}.pricing{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-flex:1;flex-grow:1;-webkit-box-pack:end;justify-content:flex-end}.pricing ::ng-deep .price-box{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.pricing ::ng-deep .price-number{margin-right:4px}@media screen and (min-width:600px){.pricing{padding-left:16px}}.pricing va-pricing{margin-right:20px}.now-button{font-size:14px;color:#fff;background-color:#4caf50}"]
            }] }
];
VaSalespersonDetailsComponent.propDecorators = {
    salesperson: [{ type: Input }],
    packagePricing: [{ type: Input }],
    brandName: [{ type: Input }],
    showGetItNow: [{ type: Input }],
    getItNow: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    VaSalespersonDetailsComponent.prototype.salesperson;
    /** @type {?} */
    VaSalespersonDetailsComponent.prototype.packagePricing;
    /** @type {?} */
    VaSalespersonDetailsComponent.prototype.brandName;
    /** @type {?} */
    VaSalespersonDetailsComponent.prototype.showGetItNow;
    /** @type {?} */
    VaSalespersonDetailsComponent.prototype.getItNow;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaSalespersonDetailsModule {
}
VaSalespersonDetailsModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatButtonModule,
                    MatIconModule,
                    VaIconModule,
                    VaPricingModule,
                ],
                declarations: [
                    VaSalespersonDetailsComponent
                ],
                exports: [
                    VaSalespersonDetailsComponent
                ],
                entryComponents: [
                    VaSalespersonDetailsComponent
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Package extends Sellable {
    // the order the product / addons in the package
    /**
     * @param {?} data
     * @return {?}
     */
    static fromApi(data) {
        /** @type {?} */
        const newPackage = new Package();
        if (!data.pricing && data.selling_price) {
            data.pricing = {
                currency: data.currency,
                prices: [{
                        price: data.selling_price * 100,
                        frequency: data.billingFrequency,
                        isStartingPrice: false,
                    }]
            };
        }
        Object.assign(newPackage, data);
        if (!newPackage.name) {
            newPackage.name = 'Untitled';
        }
        if (data.created) {
            newPackage.createdDate = new Date(data.created);
        }
        if (data.updated) {
            newPackage.updatedDate = new Date(data.updated);
        }
        return newPackage;
    }
    /**
     * @return {?}
     */
    get isPackageFree() {
        return this.isFree;
    }
}
if (false) {
    /** @type {?} */
    Package.prototype.solution_id;
    /** @type {?} */
    Package.prototype.partner_id;
    /** @type {?} */
    Package.prototype.market_id;
    /** @type {?} */
    Package.prototype.name;
    /** @type {?} */
    Package.prototype.icon;
    /** @type {?} */
    Package.prototype.status;
    /** @type {?} */
    Package.prototype.tagline;
    /** @type {?} */
    Package.prototype.header_image_url;
    /** @type {?} */
    Package.prototype.content;
    /** @type {?} */
    Package.prototype.products;
    /** @type {?} */
    Package.prototype.addon_keys;
    /** @type {?} */
    Package.prototype.hide_product_icons_and_names;
    /** @type {?} */
    Package.prototype.hide_product_details;
    /** @type {?} */
    Package.prototype.createdDate;
    /** @type {?} */
    Package.prototype.updatedDate;
    /** @type {?} */
    Package.prototype.productOrder;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @param {?} combined
 * @param {?} order
 * @return {?}
 */
function orderProductsAndAddons(combined, order) {
    if (!order || order.length === 0) {
        return combined || [];
    }
    if (!combined || combined.length === 0) {
        return [];
    }
    /** @type {?} */
    const itemMap = (combined || []).reduce((/**
     * @param {?} m
     * @param {?} curr
     * @return {?}
     */
    (m, curr) => {
        m.set(getUniqueProductAddonId(curr), curr);
        return m;
    }), new Map());
    /** @type {?} */
    const combinedIdList = combined.map(getUniqueProductAddonId);
    /** @type {?} */
    const finalOrderedIds = combineProductOrderWithContainedProducts(order, combinedIdList);
    /** @type {?} */
    const orderedList = (/** @type {?} */ (finalOrderedIds.reduce((/**
     * @param {?} items
     * @param {?} id
     * @return {?}
     */
    (items, id) => {
        items.push(itemMap.get(id));
        return items;
    }), [])));
    return orderedList.filter(filterUniqueAndDefined);
}
/**
 * @param {?} elem
 * @param {?} pos
 * @param {?} arr
 * @return {?}
 */
function filterUniqueAndDefined(elem, pos, arr) {
    return elem && arr.indexOf(elem) === pos;
}
/**
 * @param {?} productOrder
 * @param {?} itemIds
 * @return {?}
 */
function combineProductOrderWithContainedProducts(productOrder, itemIds) {
    if (itemIds == null || itemIds.length === 0) {
        return [];
    }
    if (!productOrder || productOrder.length === 0) {
        return itemIds.filter(filterUniqueAndDefined);
    }
    return productOrder
        .filter((/**
     * @param {?} elem
     * @return {?}
     */
    elem => itemIds.indexOf(elem) >= 0))
        .concat(itemIds)
        .filter(filterUniqueAndDefined);
}
/**
 * @param {?} thing
 * @return {?}
 */
function getUniqueProductAddonId(thing) {
    return thing['addonId'] || thing['productId'];
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaPackageDetailsComponent {
    constructor() {
        this.showActionButton = true;
        this.showPricing = true;
        this.actionLabel = 'Get It Now';
        this.getItNow = new EventEmitter();
        this.standAloneProducts$$ = new BehaviorSubject([]);
        this.products$ = new BehaviorSubject([]);
        this.addons$ = new BehaviorSubject([]);
        this.pkg$ = new ReplaySubject(1);
        this.itemSelectedEvent$ = new ReplaySubject(1);
        this.combinedItemsList$ = combineLatest(this.products$, this.addons$, (/**
         * @param {?} products
         * @param {?} addons
         * @return {?}
         */
        (products, addons) => {
            return (/** @type {?} */ ([].concat(products || []).concat(addons || [])));
        }));
        this.orderedItemsList$ = combineLatest(this.combinedItemsList$, this.pkg$, (/**
         * @param {?} combined
         * @param {?} pkg
         * @return {?}
         */
        (combined, pkg) => {
            return orderProductsAndAddons(combined, pkg ? pkg.productOrder || [] : []);
        }));
        /** @type {?} */
        const nonEmptyCombinedItemsList = this.combinedItemsList$.pipe(skipWhile((/**
         * @param {?} items
         * @return {?}
         */
        items => !items || items.length === 0)), shareReplay(1));
        // Need to map to an index because that's how product selection works.
        /** @type {?} */
        const initialSelectedItem$ = nonEmptyCombinedItemsList.pipe(map((/**
         * @param {?} _
         * @return {?}
         */
        (_) => 0)), take(1));
        /** @type {?} */
        const mergedSelection = merge(initialSelectedItem$, this.itemSelectedEvent$);
        this.selectedItem$ = combineLatest(mergedSelection, this.orderedItemsList$).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([index, items]) => {
            return items[index];
        })));
        this.lmiCategories$ = this.products$.pipe(skipWhile((/**
         * @param {?} products
         * @return {?}
         */
        products => !products || products.length === 0)), map((/**
         * @param {?} products
         * @return {?}
         */
        products => {
            return VaPackageDetailsComponent.getLmiCategories(products);
        })));
        this.productNameForSingleAddon$ = nonEmptyCombinedItemsList.pipe(map((/**
         * @param {?} items
         * @return {?}
         */
        items => {
            return VaPackageDetailsComponent.getProductNameForSingleAddon(items);
        })));
        this.displayTagName$ = combineLatest(this.pkg$, this.combinedItemsList$).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([pkg, items]) => {
            return VaPackageDetailsComponent.getDisplayTagline(pkg, items);
        })));
    }
    /**
     * @param {?} standAloneProducts
     * @return {?}
     */
    set standAloneProducts(standAloneProducts) {
        this.standAloneProducts$$.next(standAloneProducts);
    }
    /**
     * @param {?} products
     * @return {?}
     */
    set products(products) {
        this.products$.next(products);
    }
    /**
     * @param {?} addons
     * @return {?}
     */
    set addons(addons) {
        this.addons$.next(addons);
    }
    /**
     * @param {?} pkg
     * @return {?}
     */
    set pkg(pkg) {
        this.pkg$.next(pkg);
    }
    /**
     * @param {?} products
     * @return {?}
     */
    static getLmiCategories(products) {
        /** @type {?} */
        let lmiCategories = [];
        if (products) {
            products.forEach((/**
             * @param {?} product
             * @return {?}
             */
            product => {
                lmiCategories = lmiCategories.concat(product.getLmiCategoryNames());
            }));
        }
        return new Set(lmiCategories);
    }
    /**
     * @param {?} pkg
     * @param {?} items
     * @return {?}
     */
    static getDisplayTagline(pkg, items) {
        if (pkg && pkg.tagline) {
            return pkg.tagline;
        }
        else if (items && items.length === 1) {
            // Single product / addon package.
            return items[0].tagline || '';
        }
        return '';
    }
    /**
     * @param {?} items
     * @return {?}
     */
    static getProductNameForSingleAddon(items) {
        if (items && items.length === 1 && items[0] instanceof Addon) {
            /** @type {?} */
            const addon = (/** @type {?} */ (items[0]));
            return addon.productName;
        }
    }
    /**
     * @param {?} i
     * @return {?}
     */
    selectItem(i) {
        this.itemSelectedEvent$.next(i);
    }
    /**
     * @return {?}
     */
    emitGetItNow() {
        this.getItNow.emit();
    }
}
VaPackageDetailsComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-package-details',
                template: "<div *ngIf=\"pkg$ | async as pkg\" class=\"page\">\n  <va-header-container [iconUrl]=\"pkg.icon\"\n                       [title]=\"pkg.name\"\n                       [tagline]=\"displayTagName$ | async\"\n                       [prerequisite]=\"productNameForSingleAddon$ | async\"\n                       [chipLabels]=\"lmiCategories$ | async\"\n                       [pricing]=\"pkg.pricing\"\n                       [pricingLabel]=\"'Pricing'\"\n                       [showAction]=\"showActionButton\"\n                       [showPricing]=\"showPricing\"\n                       [actionLabel]=\"actionLabel\"\n                       [actionEnabled]=true\n                       (actionSelected)=\"emitGetItNow()\"\n  ></va-header-container>\n  <ng-container *ngIf=\"pkg?.content\">\n    <va-selling-info [description]=\"pkg.content\"></va-selling-info>\n  </ng-container>\n\n  <va-products-nav [items]=\"orderedItemsList$ | async\"\n                   [hideItemsNav]=\"pkg?.hide_product_icons_and_names\"\n                   (itemSelected)=\"selectItem($event)\"></va-products-nav>\n\n  <ng-container *ngIf=\"selectedItem$ | async as selectedItem\">\n    <div *ngIf=\"!pkg?.hide_product_details\" class=\"package-content\">\n      <div class=\"left-column\">\n        <section\n          *ngIf=\"(selectedItem.endUserMarketing?.description || selectedItem.endUserMarketing?.keySellingPoints) ||\n             (selectedItem.description || selectedItem.keySellingPoints)\">\n          <va-selling-info [description]=\"selectedItem.endUserMarketing?.description || selectedItem.description\"\n                           [keySellingPoints]=\"selectedItem.endUserMarketing?.keySellingPoints || selectedItem.keySellingPoints\"></va-selling-info>\n        </section>\n\n        <section *ngIf=\"(selectedItem.endUserMarketing?.faqs?.length > 0\n          && selectedItem.endUserMarketing?.faqs[0].question) || selectedItem.faqs?.length > 0\">\n          <h2 class=\"va-component-title\">FAQs</h2>\n          <va-faqs [faqs]=\"selectedItem.endUserMarketing?.faqs || selectedItem.faqs\"></va-faqs>\n        </section>\n      </div>\n\n      <div class=\"right-column\">\n        <section *ngIf=\"selectedItem.screenshotUrls?.length > 0 || selectedItem.screenshots?.length > 0\">\n          <h2 class=\"va-component-title\">Gallery</h2>\n          <va-image-gallery [imageUrls]=\"selectedItem.screenshotUrls || selectedItem.screenshots\"></va-image-gallery>\n        </section>\n\n        <section *ngIf=\"selectedItem.endUserMarketing?.files?.length > 0 || selectedItem.files?.length > 0\">\n          <h2 class=\"va-component-title\">Files</h2>\n          <va-files [files]=\"selectedItem.endUserMarketingFiles || selectedItem.files\"></va-files>\n        </section>\n      </div>\n    </div>\n  </ng-container>\n</div>\n",
                styles: [":host{display:block;font-size:14px;line-height:1.4}:host *{box-sizing:border-box}.va-component-title{font-size:24px;font-weight:300;margin-top:0}@media screen and (min-width:600px){.va-component-title{font-size:32px}}img{max-width:100%}va-icon{display:inline-block}.page{position:relative;margin:0 auto 20px;background:#fff;color:#212121;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px}.page .item-amount{color:#9e9e9e;font-size:14px;text-align:right;margin:0 24px 8px}section{padding:24px}.left-column{width:66%}@media screen and (max-width:600px){.left-column{width:100%}}.right-column{width:34%}.package-content{display:-webkit-box;display:flex}@media screen and (max-width:600px){.right-column{width:100%}.package-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}"]
            }] }
];
/** @nocollapse */
VaPackageDetailsComponent.ctorParameters = () => [];
VaPackageDetailsComponent.propDecorators = {
    showActionButton: [{ type: Input }],
    showPricing: [{ type: Input }],
    actionLabel: [{ type: Input }],
    getItNow: [{ type: Output }],
    standAloneProducts: [{ type: Input }],
    products: [{ type: Input }],
    addons: [{ type: Input }],
    pkg: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    VaPackageDetailsComponent.prototype.showActionButton;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.showPricing;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.actionLabel;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.getItNow;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.standAloneProducts$$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.products$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.addons$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.pkg$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.itemSelectedEvent$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.selectedItem$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.combinedItemsList$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.orderedItemsList$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.lmiCategories$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.productNameForSingleAddon$;
    /** @type {?} */
    VaPackageDetailsComponent.prototype.displayTagName$;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaProductsNavComponent {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        this.itemSelected = new EventEmitter();
        this.selectedIndex = 0;
        this.pageMarker = 0;
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @param {?} index
     * @return {?}
     */
    onItemSelected(index) {
        this.selectedIndex = index;
        this.itemSelected.emit(index);
    }
    /**
     * @param {?} slides
     * @return {?}
     */
    moveSlides(slides) {
        /** @type {?} */
        const sliderWidth = Math.round(slides.offsetWidth / slides.children[0].clientWidth);
        /** @type {?} */
        const numSlides = Math.ceil(slides.children.length / sliderWidth);
        if (numSlides === 0) {
            return;
        }
        /** @type {?} */
        const pageWidth = slides.offsetWidth;
        /** @type {?} */
        let move = 0;
        if (this.pageMarker === -1) {
            this.pageMarker = numSlides - 1; // go to end
            move = pageWidth * this.pageMarker;
            slides.style.left = `-${move}px`;
        }
        else if (this.pageMarker >= numSlides) {
            slides.style.left = '0px';
            this.pageMarker = 0; // reset
        }
        else {
            move = pageWidth * this.pageMarker;
            slides.style.left = `-${move}px`;
        }
    }
    /**
     * @param {?} slides
     * @return {?}
     */
    pageNext(slides) {
        this.pageMarker++;
        this.moveSlides(slides);
    }
    /**
     * @param {?} slides
     * @return {?}
     */
    pagePrev(slides) {
        this.pageMarker--;
        this.moveSlides(slides);
    }
}
VaProductsNavComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-products-nav',
                template: "<p *ngIf=\"items?.length > 1\" class=\"item-amount\">{{ 'FRONTEND.STORE.CONTAINS_NUM_ITEMS' | translate: {itemCount: items.length}  }}</p>\n<div class=\"wrapper\">\n  <nav *ngIf=\"items && !hideItemsNav\" (swipeleft)=\"pageNext(slides)\" (swiperight)=\"pagePrev(slides)\">\n    <div [ngClass]=\"{'hide-arrows': items && items.length < 5}\">\n      <span class=\"prev\" (click)=\"pagePrev(slides)\"><mat-icon>keyboard_arrow_left</mat-icon></span>\n      <span class=\"next\" (click)=\"pageNext(slides)\"><mat-icon>keyboard_arrow_right</mat-icon></span>\n    </div>\n    <ul class=\"slides\" #slides>\n      <li *ngFor=\"let item of items; index as i;\" (click)=\"onItemSelected(i)\">\n        <a [ngClass]=\"{'active': i === selectedIndex}\">\n          <span class=\"icon-area\">\n            <va-icon [iconUrl]=\"item.icon || item.iconUrl\" [name]=\"item.name || item.title\" [diameter]=\"80\"></va-icon>\n            <va-icon *ngIf=\"item.addonId\" class=\"addon-indicator\" [iconUrl]=\"item.productIcon\" [name]=\"item.productName\" [diameter]=\"24\"></va-icon>\n          </span>\n          <p>{{ item.name || item.title }}</p>\n          <div *ngIf=\"item.addonId\">\n            <span class=\"requires-text\">{{ 'FRONTEND.STORE.REQUIRES' | translate }}</span>\n            <span>{{item.productName}}</span>\n          </div>\n        </a>\n      </li>\n    </ul>\n  </nav>\n</div>\n",
                styles: ["nav{position:relative;width:350px;margin:0 auto;background:#fff;border:1px solid #e0e0e0;border-width:1px 0;overflow:hidden}nav ul{display:-webkit-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0 50px;padding:0;position:relative;left:0;-webkit-transition:left .3s;transition:left .3s;word-break:break-word}nav li{min-width:100%;-webkit-box-flex:1;flex:1 0 25%;text-align:center;font-size:14px}nav li:first-child a{border-right:1px solid #e0e0e0}nav a{position:relative;display:block;height:100%;padding:20px;text-decoration:none;color:#212121;-webkit-transition:background .3s;transition:background .3s;-webkit-box-align:center;align-items:center;border-right:1px solid #e0e0e0;cursor:pointer}nav a:hover{background-color:rgba(255,255,255,.6)}nav a.active{background-color:#fff}nav a.active:after{content:'';display:block;position:absolute;bottom:-1px;left:0;width:100%;height:1px;background-color:#fff}nav p{margin-bottom:0}nav .icon img{width:80px;min-width:80px;height:80px}nav .next,nav .prev{position:absolute;height:100%;width:50px;top:0;background:rgba(33,33,33,.1);cursor:pointer;text-align:center;opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;z-index:1}nav .next:not(.disabled):hover,nav .prev:not(.disabled):hover{background:rgba(33,33,33,.3)}nav .prev{left:0}nav .next{right:0}nav .disabled{cursor:default;opacity:0}@media screen and (min-width:600px){nav{width:auto;overflow:initial}nav li{min-width:0;width:25%;-webkit-box-flex:0;flex-grow:0}nav .hide-arrows{display:none}nav .hide-arrows+.slides{margin:0}}va-icon{display:inline-block}.item-amount{color:#9e9e9e;font-size:14px;text-align:right;margin:0 24px 8px}.wrapper{overflow:hidden}.requires-text{color:#9e9e9e}.icon-area{position:relative;display:inline-block}.addon-indicator{position:absolute;border:2px solid #fff;border-radius:50%;bottom:-2px;right:-2px}"]
            }] }
];
/** @nocollapse */
VaProductsNavComponent.ctorParameters = () => [
    { type: TranslateService }
];
VaProductsNavComponent.propDecorators = {
    items: [{ type: Input }],
    hideItemsNav: [{ type: Input }],
    itemSelected: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    VaProductsNavComponent.prototype.items;
    /** @type {?} */
    VaProductsNavComponent.prototype.hideItemsNav;
    /** @type {?} */
    VaProductsNavComponent.prototype.itemSelected;
    /** @type {?} */
    VaProductsNavComponent.prototype.selectedIndex;
    /** @type {?} */
    VaProductsNavComponent.prototype.pageMarker;
    /**
     * @type {?}
     * @private
     */
    VaProductsNavComponent.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ProductsNavV2Component {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        this.itemSelected = new EventEmitter();
        this.selected_id = '';
        this.pageMarker = 0;
        this.translateService.setTranslation('en', En.en, true);
    }
    /**
     * @param {?} id
     * @return {?}
     */
    onItemSelected(id) {
        this.selected_id = id;
        this.itemSelected.emit(id);
    }
    /**
     * @param {?} slides
     * @return {?}
     */
    moveSlides(slides) {
        /** @type {?} */
        const sliderWidth = Math.round(slides.offsetWidth / slides.children[0].clientWidth);
        /** @type {?} */
        const numSlides = Math.ceil(slides.children.length / sliderWidth);
        if (numSlides === 0) {
            return;
        }
        /** @type {?} */
        const pageWidth = slides.offsetWidth;
        /** @type {?} */
        let move = 0;
        if (this.pageMarker === -1) {
            this.pageMarker = numSlides - 1; // go to end
            move = pageWidth * this.pageMarker;
            slides.style.left = `-${move}px`;
        }
        else if (this.pageMarker >= numSlides) {
            slides.style.left = '0px';
            this.pageMarker = 0; // reset
        }
        else {
            move = pageWidth * this.pageMarker;
            slides.style.left = `-${move}px`;
        }
    }
    /**
     * @param {?} slides
     * @return {?}
     */
    pageNext(slides) {
        this.pageMarker++;
        this.moveSlides(slides);
    }
    /**
     * @param {?} slides
     * @return {?}
     */
    pagePrev(slides) {
        this.pageMarker--;
        this.moveSlides(slides);
    }
}
ProductsNavV2Component.decorators = [
    { type: Component, args: [{
                selector: 'va-products-nav-v2',
                template: "<p *ngIf=\"items?.length > 1\" class=\"item-amount\">{{ 'FRONTEND.STORE.CONTAINS_NUM_ITEMS' | translate: {itemCount: items.length} }}</p>\n<div class=\"wrapper\">\n  <nav *ngIf=\"items && !hideItemsNav\" (swipeleft)=\"pageNext(slides)\" (swiperight)=\"pagePrev(slides)\">\n    <div [ngClass]=\"{'hide-arrows': items && items.length < 5}\">\n      <span class=\"prev\" (click)=\"pagePrev(slides)\"><mat-icon>keyboard_arrow_left</mat-icon></span>\n      <span class=\"next\" (click)=\"pageNext(slides)\"><mat-icon>keyboard_arrow_right</mat-icon></span>\n    </div>\n    <ul class=\"slides\" #slides>\n      <li *ngFor=\"let lineItem of items;\" (click)=\"onItemSelected(lineItem?.item?.id)\">\n        <a [ngClass]=\"{'active': lineItem?.item?.id === selected_id}\">\n          <span class=\"icon-area\">\n            <va-icon [iconUrl]=\"lineItem?.item?.icon\" [name]=\"lineItem?.item?.name\" [diameter]=\"80\"></va-icon>\n            <va-icon *ngIf=\"lineItem?.parent?.id\" class=\"addon-indicator\" [iconUrl]=\"lineItem?.parent?.icon\" [name]=\"lineItem?.parent?.name\"\n                     [diameter]=\"24\"></va-icon>\n          </span>\n          <div class=\"name-container\">\n            <div>{{ lineItem?.item?.name }}</div>\n            <div *ngIf=\"lineItem?.item?.editionName\" class=\"edition-name\">{{ lineItem.item.editionName }}</div>\n          </div>\n          <div *ngIf=\"lineItem?.parent?.id\">\n            <span class=\"requires-text\">{{ 'FRONTEND.STORE.REQUIRES' | translate }} </span>\n            <span>{{lineItem?.parent.name}}</span>\n          </div>\n        </a>\n      </li>\n    </ul>\n  </nav>\n</div>\n",
                styles: [".name-container{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.name-container va-badge{margin-top:12px;margin-left:6px}nav{position:relative;width:350px;margin:0 auto;background:#fff;border:1px solid #e0e0e0;border-width:1px 0;overflow:hidden}nav ul{display:-webkit-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0 50px;padding:0;position:relative;left:0;-webkit-transition:left .3s;transition:left .3s;word-break:break-word}nav li{min-width:100%;-webkit-box-flex:1;flex:1 0 25%;text-align:center;font-size:14px}nav li:first-child a{border-right:1px solid #e0e0e0}nav a{position:relative;display:block;height:100%;padding:20px;text-decoration:none;color:#212121;-webkit-transition:background .3s;transition:background .3s;-webkit-box-align:center;align-items:center;border-right:1px solid #e0e0e0;cursor:pointer}nav a:hover{background-color:rgba(255,255,255,.6)}nav a.active{background-color:#fff}nav a.active:after{content:'';display:block;position:absolute;bottom:-1px;left:0;width:100%;height:1px;background-color:#fff}nav p{margin-bottom:0}nav .icon img{width:80px;min-width:80px;height:80px}nav .next,nav .prev{position:absolute;height:100%;width:50px;top:0;background:rgba(33,33,33,.1);cursor:pointer;text-align:center;opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;z-index:1}nav .next:not(.disabled):hover,nav .prev:not(.disabled):hover{background:rgba(33,33,33,.3)}nav .prev{left:0}nav .next{right:0}nav .disabled{cursor:default;opacity:0}@media screen and (min-width:600px){nav{width:auto;overflow:initial}nav li{min-width:0;width:25%;-webkit-box-flex:0;flex-grow:0}nav .hide-arrows{display:none}nav .hide-arrows+.slides{margin:0}}va-icon{display:inline-block}.item-amount{color:#9e9e9e;font-size:14px;text-align:right;margin:0 24px 8px}.wrapper{overflow:hidden}.requires-text{color:#9e9e9e}.icon-area{position:relative;display:inline-block}.addon-indicator{position:absolute;border:2px solid #fff;border-radius:50%;bottom:-2px;right:-2px}.edition-name{color:#9e9e9e;font-style:italic;text-align:center;width:100%;font-size:16px;margin-bottom:4px}"]
            }] }
];
/** @nocollapse */
ProductsNavV2Component.ctorParameters = () => [
    { type: TranslateService }
];
ProductsNavV2Component.propDecorators = {
    items: [{ type: Input }],
    hideItemsNav: [{ type: Input }],
    itemSelected: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    ProductsNavV2Component.prototype.items;
    /** @type {?} */
    ProductsNavV2Component.prototype.hideItemsNav;
    /** @type {?} */
    ProductsNavV2Component.prototype.itemSelected;
    /** @type {?} */
    ProductsNavV2Component.prototype.selected_id;
    /** @type {?} */
    ProductsNavV2Component.prototype.pageMarker;
    /**
     * @type {?}
     * @private
     */
    ProductsNavV2Component.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaProductsNavModule {
}
VaProductsNavModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule,
                    VaIconModule,
                    VaBadgeModule,
                    TranslateModule
                ],
                declarations: [VaProductsNavComponent, ProductsNavV2Component],
                exports: [VaProductsNavComponent, ProductsNavV2Component]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaPackageDetailsModule {
}
VaPackageDetailsModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    VaImageGalleryModule, CommonModule, MatIconModule, VaSafeHtmlModule, VaIconModule,
                    VaPricingModule, MatButtonModule, VaFilesModule, VaFaqsModule, VaSellingInfoModule,
                    VaHeaderContainerModule, VaAddonListModule, VaProductsNavModule
                ],
                declarations: [VaPackageDetailsComponent],
                exports: [VaPackageDetailsComponent],
                entryComponents: [VaPackageDetailsComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PackageDetails {
    /**
     * @return {?}
     */
    get isPackageFree() {
        /** @type {?} */
        const isFreeHelper = (/**
         * @param {?} prices
         * @return {?}
         */
        (prices) => {
            return prices ? prices.some((/**
             * @param {?} p
             * @return {?}
             */
            p => p.price === 0 || p.price === undefined)) : false;
        });
        return this.pricing && isFreeHelper(this.pricing.prices);
    }
}
if (false) {
    /** @type {?} */
    PackageDetails.prototype.solution_id;
    /** @type {?} */
    PackageDetails.prototype.partner_id;
    /** @type {?} */
    PackageDetails.prototype.market_id;
    /** @type {?} */
    PackageDetails.prototype.name;
    /** @type {?} */
    PackageDetails.prototype.icon;
    /** @type {?} */
    PackageDetails.prototype.status;
    /** @type {?} */
    PackageDetails.prototype.tagline;
    /** @type {?} */
    PackageDetails.prototype.header_image_url;
    /** @type {?} */
    PackageDetails.prototype.content;
    /** @type {?} */
    PackageDetails.prototype.hide_product_icons_and_names;
    /** @type {?} */
    PackageDetails.prototype.hide_product_details;
    /** @type {?} */
    PackageDetails.prototype.createdDate;
    /** @type {?} */
    PackageDetails.prototype.updatedDate;
    /** @type {?} */
    PackageDetails.prototype.pricing;
    /** @type {?} */
    PackageDetails.prototype.line_items;
    /** @type {?} */
    PackageDetails.prototype.market_action;
}
/**
 * @param {?} data
 * @param {?} products
 * @return {?}
 */
function convertToPackageDetails(data, products) {
    if (!data) {
        return undefined;
    }
    /** @type {?} */
    const newPackage = new PackageDetails();
    if (!data.pricing) {
        data.pricing = Pricing$1.fromProto({
            currency: undefined,
            prices: [{
                    price: 0,
                    frequency: undefined,
                    isStartingPrice: false,
                }]
        });
    }
    Object.assign(newPackage, data);
    if (!newPackage.name) {
        newPackage.name = 'Untitled';
    }
    if (data.created) {
        newPackage.createdDate = new Date(data.created);
    }
    if (data.updated) {
        newPackage.updatedDate = new Date(data.updated);
    }
    if (data.lineItems) {
        newPackage.line_items = convertProtoLineItemsToStoreLineItems(data.lineItems, products);
    }
    if (typeof data.pricing.currency === 'number') {
        newPackage.pricing.currency = Currency[data.pricing.currency];
    }
    return newPackage;
}
/**
 * @param {?} protoLineItems
 * @param {?} products
 * @return {?}
 */
function convertProtoLineItemsToStoreLineItems(protoLineItems, products) {
    if (!protoLineItems || !protoLineItems.lineItems || protoLineItems.lineItems.length === 0 || !products || products.length === 0) {
        return [];
    }
    return protoLineItems.lineItems.map((/**
     * @param {?} lineItem
     * @return {?}
     */
    lineItem => {
        /** @type {?} */
        const product = products.find((/**
         * @param {?} p
         * @return {?}
         */
        p => p.productId === lineItem.id));
        /** @type {?} */
        let parent;
        if (!!lineItem.parentId) {
            parent = products.find((/**
             * @param {?} p
             * @return {?}
             */
            p => p.productId === lineItem.parentId));
        }
        return convertProtoLineItemToStoreLineItem(lineItem, product, parent);
    }));
}
/**
 * @param {?} protoLineItem
 * @param {?} product
 * @param {?=} parentProduct
 * @return {?}
 */
function convertProtoLineItemToStoreLineItem(protoLineItem, product, parentProduct) {
    if (!product || !protoLineItem) {
        return undefined;
    }
    /** @type {?} */
    let files = [];
    if (product.pdfUploadUrls && product.pdfUploadUrls.length > 0) {
        files = product.pdfUploadUrls.map((/**
         * @param {?} url
         * @return {?}
         */
        url => new File(url)));
    }
    /** @type {?} */
    const lineItem = (/** @type {?} */ ({
        item: {
            id: protoLineItem.id,
            editionId: protoLineItem.editionId,
            icon: product.iconUrl,
            name: product.name,
            editionName: '',
            description: product.description,
            keySellingPoints: product.keySellingPoints,
            faqs: product.faqs,
            files: files,
            screenshotUrls: product.screenshotUrls,
            lmiCategories: [],
        },
        quantity: protoLineItem.quantity,
        parent: {}
    }));
    if (protoLineItem.parentId && parentProduct) {
        lineItem.parent = {
            id: protoLineItem.parentId,
            editionId: '',
            icon: parentProduct.iconUrl,
            name: parentProduct.name,
            editionName: '',
        };
    }
    return lineItem;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaPackageDetailsV2Component {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        this.showActionButton = true;
        this.showPricing = true;
        this.getItNow = new EventEmitter();
        this.pkg$$ = new ReplaySubject(1);
        this.itemSelectedEvent$$ = new BehaviorSubject('');
        this.translateService.setTranslation('en', En.en, true);
        this.orderedLineItems$ = this.pkg$$.pipe(map((/**
         * @param {?} pkg
         * @return {?}
         */
        pkg => pkg.line_items)), filter((/**
         * @param {?} items
         * @return {?}
         */
        items => !!items || items.length === 0)), shareReplay(1));
        this.productNameForSingleAddon$ = this.orderedLineItems$.pipe(map((/**
         * @param {?} items
         * @return {?}
         */
        items => this.getParentsNameForItem(items))));
        this.selectedItem$ = combineLatest([this.itemSelectedEvent$$, this.orderedLineItems$]).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([id, lineItems]) => lineItems.find((/**
         * @param {?} lineItem
         * @return {?}
         */
        lineItem => lineItem.item.id === id)))));
        this.lmiCategories$ = this.orderedLineItems$.pipe(map((/**
         * @param {?} lis
         * @return {?}
         */
        (lis) => {
            /** @type {?} */
            const lmiMap = (lis || []).reduce((/**
             * @param {?} prev
             * @param {?} li
             * @return {?}
             */
            (prev, li) => {
                if (li && li.item) {
                    (li.item.lmiCategories || []).forEach((/**
                     * @param {?} lmi
                     * @return {?}
                     */
                    lmi => prev.set(lmi, lmi)));
                }
                return prev;
            }), new Map());
            /** @type {?} */
            const lmiCats = [];
            lmiMap.forEach((/**
             * @param {?} v
             * @param {?} k
             * @return {?}
             */
            (v, k) => {
                lmiCats.push(k);
            }));
            return lmiCats;
        })));
        // Set the initial selected Item
        this.orderedLineItems$.pipe(map((/**
         * @param {?} lineItems
         * @return {?}
         */
        lineItems => lineItems[0])), tap((/**
         * @param {?} lineItem
         * @return {?}
         */
        lineItem => this.selectItem(lineItem && lineItem.item ? lineItem.item.id : ''))), take(1)).subscribe();
    }
    /**
     * @param {?} pkg
     * @return {?}
     */
    set pkg(pkg) {
        this.pkg$$.next(pkg);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (!this.actionLabel) {
            this.actionLabel = this.translateService.instant('FRONTEND.STORE.GET_IT_NOW');
        }
    }
    /**
     * @param {?} id
     * @return {?}
     */
    selectItem(id) {
        this.itemSelectedEvent$$.next(id);
    }
    /**
     * @return {?}
     */
    emitGetItNow() {
        this.getItNow.emit();
    }
    /**
     * @param {?} items
     * @return {?}
     */
    getParentsNameForItem(items) {
        if (items && items.length === 1 && items[0]) {
            return items[0].parent.name;
        }
    }
}
VaPackageDetailsV2Component.decorators = [
    { type: Component, args: [{
                selector: 'va-package-details-v2',
                template: "<div *ngIf=\"pkg$$ | async as pkg\" class=\"page\">\n  <va-header-container [iconUrl]=\"pkg.icon\"\n                       [title]=\"pkg.name\"\n                       [tagline]=\"pkg.tagline\"\n                       [prerequisite]=\"productNameForSingleAddon$ | async\"\n                       [chipLabels]=\"lmiCategories$ | async\"\n                       [pricing]=\"pkg.pricing\"\n                       [pricingLabel]=\"'FRONTEND.STORE.PRICING' | translate\"\n                       [showAction]=\"showActionButton\"\n                       [showPricing]=\"showPricing\"\n                       [actionLabel]=\"actionLabel\"\n                       [actionEnabled]=true\n                       (actionSelected)=\"emitGetItNow()\"\n  ></va-header-container>\n\n  <ng-container *ngIf=\"pkg?.content\">\n    <va-selling-info [description]=\"pkg.content\"></va-selling-info>\n  </ng-container>\n\n  <va-products-nav-v2 [items]=\"orderedLineItems$ | async\"\n                   [hideItemsNav]=\"pkg?.hide_product_icons_and_names\"\n                   (itemSelected)=\"selectItem($event)\"></va-products-nav-v2>\n\n  <ng-container *ngIf=\"selectedItem$ | async as selectedItem\">\n    <div *ngIf=\"!pkg?.hide_product_details\" class=\"package-content\">\n      <div class=\"left-column\">\n        <section *ngIf=\"selectedItem?.item?.description || selectedItem?.item?.keySellingPoints\">\n          <va-selling-info [description]=\"selectedItem?.item?.description\"\n                           [keySellingPoints]=\"selectedItem?.item?.keySellingPoints\"></va-selling-info>\n        </section>\n\n        <section *ngIf=\"selectedItem?.item?.faqs?.length > 0 && selectedItem?.item?.faqs[0].question\">\n          <h2 class=\"va-component-title\">{{ 'FRONTEND.STORE.FAQS' | translate }}</h2>\n          <va-faqs [faqs]=\"selectedItem.item.faqs\"></va-faqs>\n        </section>\n      </div>\n\n      <div class=\"right-column\">\n        <section *ngIf=\"selectedItem?.item?.screenshotUrls?.length > 0\">\n          <h2 class=\"va-component-title\">{{ 'FRONTEND.STORE.GALLERY' | translate }}</h2>\n          <va-image-gallery [imageUrls]=\"selectedItem.item.screenshotUrls\"></va-image-gallery>\n        </section>\n\n        <section *ngIf=\"selectedItem?.item?.files?.length > 0\">\n          <h2 class=\"va-component-title\">{{ 'FRONTEND.STORE.FILES' | translate }}</h2>\n          <va-files [files]=\"selectedItem.item.files\"></va-files>\n        </section>\n      </div>\n    </div>\n  </ng-container>\n</div>\n",
                styles: [":host{display:block;font-size:14px;line-height:1.4}:host *{box-sizing:border-box}.va-component-title{font-size:24px;font-weight:300;margin-top:0}@media screen and (min-width:600px){.va-component-title{font-size:32px}}img{max-width:100%}va-icon{display:inline-block}.page{position:relative;margin:0 auto 20px;background:#fff;color:#212121;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px}.page .item-amount{color:#9e9e9e;font-size:14px;text-align:right;margin:0 24px 8px}section{padding:24px}.left-column{width:66%}@media screen and (max-width:600px){.left-column{width:100%}}.right-column{width:34%}.package-content{display:-webkit-box;display:flex}@media screen and (max-width:600px){.right-column{width:100%}.package-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}"]
            }] }
];
/** @nocollapse */
VaPackageDetailsV2Component.ctorParameters = () => [
    { type: TranslateService }
];
VaPackageDetailsV2Component.propDecorators = {
    showActionButton: [{ type: Input }],
    showPricing: [{ type: Input }],
    actionLabel: [{ type: Input }],
    pkg: [{ type: Input }],
    getItNow: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.showActionButton;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.showPricing;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.actionLabel;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.getItNow;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.pkg$$;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.itemSelectedEvent$$;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.selectedItem$;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.orderedLineItems$;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.productNameForSingleAddon$;
    /** @type {?} */
    VaPackageDetailsV2Component.prototype.lmiCategories$;
    /**
     * @type {?}
     * @private
     */
    VaPackageDetailsV2Component.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaPackageDetailsV2Module {
}
VaPackageDetailsV2Module.decorators = [
    { type: NgModule, args: [{
                imports: [
                    VaImageGalleryModule,
                    CommonModule,
                    MatIconModule,
                    VaSafeHtmlModule,
                    VaIconModule,
                    VaPricingModule,
                    MatButtonModule,
                    VaFilesModule,
                    VaFaqsModule,
                    VaSellingInfoModule,
                    VaHeaderContainerModule,
                    VaAddonListModule,
                    VaProductsNavModule,
                    TranslateModule
                ],
                declarations: [VaPackageDetailsV2Component],
                exports: [VaPackageDetailsV2Component],
                entryComponents: [VaPackageDetailsV2Component]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function SalesPackage() { }
if (false) {
    /** @type {?} */
    SalesPackage.prototype.formattedPrices;
    /** @type {?} */
    SalesPackage.prototype.packageId;
    /** @type {?} */
    SalesPackage.prototype.name;
    /** @type {?} */
    SalesPackage.prototype.icon;
    /** @type {?} */
    SalesPackage.prototype.productIds;
    /** @type {?} */
    SalesPackage.prototype.products;
    /** @type {?} */
    SalesPackage.prototype.addonsWithNoParent;
    /** @type {?} */
    SalesPackage.prototype.totalAddons;
    /** @type {?|undefined} */
    SalesPackage.prototype.activationStatus;
}
/**
 * @record
 */
function SalesProduct() { }
if (false) {
    /** @type {?} */
    SalesProduct.prototype.formattedPrices;
    /** @type {?} */
    SalesProduct.prototype.productId;
    /** @type {?} */
    SalesProduct.prototype.name;
    /** @type {?} */
    SalesProduct.prototype.icon;
    /** @type {?} */
    SalesProduct.prototype.tagline;
    /** @type {?|undefined} */
    SalesProduct.prototype.activationStatus;
    /** @type {?|undefined} */
    SalesProduct.prototype.editionId;
    /** @type {?|undefined} */
    SalesProduct.prototype.editionName;
    /** @type {?} */
    SalesProduct.prototype.addons;
    /** @type {?|undefined} */
    SalesProduct.prototype.parentInfo;
}
/**
 * @record
 */
function ProductParentInfo() { }
if (false) {
    /** @type {?} */
    ProductParentInfo.prototype.parentId;
    /** @type {?} */
    ProductParentInfo.prototype.parentName;
    /** @type {?} */
    ProductParentInfo.prototype.parentIconUrl;
    /** @type {?} */
    ProductParentInfo.prototype.multipleActivations;
}
/**
 * @record
 */
function SalesAddon() { }
if (false) {
    /** @type {?} */
    SalesAddon.prototype.parentId;
    /** @type {?} */
    SalesAddon.prototype.addonId;
    /** @type {?} */
    SalesAddon.prototype.name;
    /** @type {?} */
    SalesAddon.prototype.icon;
    /** @type {?} */
    SalesAddon.prototype.tagline;
    /** @type {?} */
    SalesAddon.prototype.parentName;
    /** @type {?} */
    SalesAddon.prototype.parentIcon;
    /** @type {?} */
    SalesAddon.prototype.multipleActivations;
    /** @type {?|undefined} */
    SalesAddon.prototype.activationStatus;
}
/**
 * @record
 */
function PackageItemActivationStatus() { }
if (false) {
    /** @type {?} */
    PackageItemActivationStatus.prototype.packageItemId;
    /** @type {?} */
    PackageItemActivationStatus.prototype.status;
}
/** @enum {number} */
const ActivationStatus = {
    SUCCESS: 0,
    WARNING: 1,
    ERROR: 2,
};
ActivationStatus[ActivationStatus.SUCCESS] = 'SUCCESS';
ActivationStatus[ActivationStatus.WARNING] = 'WARNING';
ActivationStatus[ActivationStatus.ERROR] = 'ERROR';
/**
 * @record
 */
function StatusNotificationItem() { }
if (false) {
    /** @type {?} */
    StatusNotificationItem.prototype.icon;
    /** @type {?} */
    StatusNotificationItem.prototype.text;
    /** @type {?} */
    StatusNotificationItem.prototype.status;
}
/**
 * @param {?} packages
 * @param {?} products
 * @param {?} addons
 * @return {?}
 */
function buildSalesPackages(packages, products, addons) {
    if (!packages || packages.length < 1) {
        return [];
    }
    return packages.map((/**
     * @param {?} pkg
     * @return {?}
     */
    pkg => buildSalesPackageFromPackage(pkg, products, addons)));
}
/**
 * @param {?} pkg
 * @param {?} products
 * @param {?} addons
 * @return {?}
 */
function buildSalesPackageFromPackage(pkg, products, addons) {
    if (!pkg) {
        return null;
    }
    /** @type {?} */
    const salesProducts = buildSalesProducts(pkg, products, addons);
    // Addons can be in a package even if the parent product is not, this will create salesAddons with no parent
    /** @type {?} */
    const addonsWithNoParent = buildSalesAddonsWithNoParent(pkg, products, addons);
    return createSalesPackage(pkg, salesProducts, addonsWithNoParent);
}
/**
 * @param {?} pkg
 * @param {?} products
 * @param {?} addons
 * @return {?}
 */
function buildSalesProducts(pkg, products, addons) {
    if (!(products && products.length && pkg.products && pkg.products.length)) {
        return [];
    }
    /** @type {?} */
    const productMap = new Map();
    products.forEach((/**
     * @param {?} product
     * @return {?}
     */
    product => productMap.set(product.productId, product)));
    return pkg.products
        .map((/**
     * @param {?} productId
     * @return {?}
     */
    productId => {
        /** @type {?} */
        const productMatch = productMap.get(productId);
        /** @type {?} */
        const addonsInPackage = coerceAddonsForAddonKeys(addons, pkg.addon_keys);
        return productMatch ? buildSalesProductFromProduct(productMatch, addonsInPackage) : null;
    }))
        .filter((/**
     * @param {?} productItem
     * @return {?}
     */
    productItem => productItem));
}
/**
 * @param {?} addons
 * @param {?} addonKeys
 * @return {?}
 */
function coerceAddonsForAddonKeys(addons, addonKeys) {
    if (!addons || addons.length === 0 || !addonKeys || addonKeys.length === 0) {
        return [];
    }
    return addons.reduce((/**
     * @param {?} addonsArray
     * @param {?} addon
     * @return {?}
     */
    (addonsArray, addon) => {
        /** @type {?} */
        const key = addonKeys.find((/**
         * @param {?} k
         * @return {?}
         */
        k => k.addonId === addon.addonId));
        if (key) {
            /** @type {?} */
            const quantity = key.quantity || 1;
            for (let i = 0; i < quantity; i++) {
                addonsArray.push(addon);
            }
        }
        return addonsArray;
    }), []);
}
/**
 * @param {?} pkg
 * @param {?} products
 * @param {?} addons
 * @return {?}
 */
function buildSalesAddonsWithNoParent(pkg, products, addons) {
    if (!addons || addons.length < 1 || !pkg.addon_keys) {
        return [];
    }
    /** @type {?} */
    const productMap = new Map();
    products.forEach((/**
     * @param {?} product
     * @return {?}
     */
    product => productMap.set(product.productId, product)));
    /** @type {?} */
    const addonsMap = new Map();
    addons.forEach((/**
     * @param {?} addon
     * @return {?}
     */
    addon => addonsMap.set(addon.addonId, addon)));
    /** @type {?} */
    const addonsWithNoParent = pkg.addon_keys.reduce((/**
     * @param {?} addonArray
     * @param {?} addonKey
     * @return {?}
     */
    (addonArray, addonKey) => {
        if (pkg.products && pkg.products.some((/**
         * @param {?} productId
         * @return {?}
         */
        productId => productId === addonKey.appId))) {
            return addonArray || [];
        }
        /** @type {?} */
        const parentProduct = productMap.get(addonKey.appId);
        /** @type {?} */
        const parentName = parentProduct ? parentProduct.name : null;
        /** @type {?} */
        const parentIcon = parentProduct ? parentProduct.iconUrl : null;
        /** @type {?} */
        const quantity = addonKey.quantity || 1;
        /** @type {?} */
        const addon = addonsMap.get(addonKey.addonId);
        for (let i = 0; i < quantity; i++) {
            addonArray.push(createSalesAddon(addon, parentName, parentIcon));
        }
        return addonArray;
    }), []);
    return addonsWithNoParent;
}
/**
 * @param {?} product
 * @param {?} addons
 * @return {?}
 */
function buildSalesProductFromProduct(product, addons) {
    if (!product) {
        return null;
    }
    if (!addons || addons.length < 1) {
        return createSalesProduct(product, null);
    }
    /** @type {?} */
    const productAddons = addons.filter((/**
     * @param {?} addon
     * @return {?}
     */
    addon => addon.appId === product.productId));
    /** @type {?} */
    const salesAddons = createSalesAddons(productAddons);
    return createSalesProduct(product, salesAddons);
}
/**
 * @param {?} pkg
 * @param {?} salesProducts
 * @param {?} addonsWithNoParent
 * @return {?}
 */
function createSalesPackage(pkg, salesProducts, addonsWithNoParent) {
    /** @type {?} */
    let totalAddons = 0;
    for (const key of pkg.addon_keys || []) {
        totalAddons += key.quantity || 1;
    }
    return {
        formattedPrices: pkg.priceStrings.join(', '),
        packageId: pkg.solution_id,
        name: pkg.name,
        icon: pkg.icon,
        productIds: pkg.products,
        products: salesProducts || [],
        addonsWithNoParent: addonsWithNoParent || [],
        totalAddons: totalAddons
    };
}
/**
 * @param {?} product
 * @param {?} salesAddons
 * @return {?}
 */
function createSalesProduct(product, salesAddons) {
    /** @type {?} */
    let parentInfo;
    if (product instanceof ProductWithParent) {
        parentInfo = {
            parentId: product.parentId,
            parentName: product.parentName,
            parentIconUrl: product.parentIconUrl,
            multipleActivations: product.multipleActivations || false,
        };
    }
    return {
        formattedPrices: product.priceStrings.join(', '),
        productId: product.productId,
        name: product.name,
        tagline: product.tagline || '',
        icon: product.iconUrl,
        addons: salesAddons || [],
        editionId: product.editionId,
        editionName: product.editionName,
        parentInfo: parentInfo,
    };
}
/**
 * @param {?} addons
 * @return {?}
 */
function createSalesAddons(addons) {
    return addons.map((/**
     * @param {?} addon
     * @return {?}
     */
    addon => createSalesAddon(addon)));
}
/**
 * @param {?} addon
 * @param {?=} parentName
 * @param {?=} parentIcon
 * @return {?}
 */
function createSalesAddon(addon, parentName, parentIcon) {
    return {
        parentId: addon.appId,
        addonId: addon.addonId,
        name: addon.title,
        tagline: addon.tagline || '',
        icon: addon.icon || '',
        multipleActivations: addon.multipleActivations,
        parentIcon: parentIcon || '',
        parentName: parentName || ''
    };
}
/**
 * @param {?} pkg
 * @param {?} products
 * @param {?} addons
 * @param {?} activationStatus
 * @return {?}
 */
function createSalesPackageWithStatus(pkg, products, addons, activationStatus) {
    return {
        formattedPrices: pkg.formattedPrices,
        packageId: pkg.packageId,
        name: pkg.name,
        icon: pkg.icon,
        productIds: pkg.productIds,
        products: products || [],
        addonsWithNoParent: addons || [],
        activationStatus: activationStatus || null,
        totalAddons: pkg.totalAddons
    };
}
/**
 * @param {?} product
 * @param {?} addons
 * @param {?} activationStatus
 * @return {?}
 */
function createSalesProductWithStatus(product, addons, activationStatus) {
    return {
        formattedPrices: product.formattedPrices,
        productId: product.productId,
        name: product.name,
        editionId: product.editionId,
        editionName: product.editionName,
        tagline: product.tagline,
        icon: product.icon,
        addons: addons || [],
        activationStatus: activationStatus || null,
        parentInfo: product.parentInfo || null,
    };
}
/**
 * @param {?} addon
 * @param {?} activationStatus
 * @return {?}
 */
function createSalesAddonWithStatus(addon, activationStatus) {
    return {
        parentId: addon.parentId,
        addonId: addon.addonId,
        name: addon.name,
        tagline: addon.tagline,
        icon: addon.icon,
        parentIcon: addon.parentIcon,
        parentName: addon.parentName,
        multipleActivations: addon.multipleActivations,
        activationStatus: activationStatus || null
    };
}
/**
 * @param {?} salesPackages
 * @param {?} statuses
 * @return {?}
 */
function addStatusesToSalesPackages(salesPackages, statuses) {
    if (!statuses || statuses.length === 0) {
        return salesPackages;
    }
    return salesPackages.map((/**
     * @param {?} salesPackage
     * @return {?}
     */
    salesPackage => {
        /** @type {?} */
        const newProducts = salesPackage.products.map((/**
         * @param {?} product
         * @return {?}
         */
        product => addStatusesToSalesProduct(product, statuses)));
        /** @type {?} */
        const newAddonsWithNoParent = salesPackage.addonsWithNoParent.map((/**
         * @param {?} addon
         * @return {?}
         */
        addon => {
            /** @type {?} */
            const status = findStatus(statuses, addon.addonId);
            return addStatusesToSalesAddon(addon, status);
        }));
        /** @type {?} */
        const productStatuses = newProducts
            .map((/**
         * @param {?} product
         * @return {?}
         */
        product => product.activationStatus.status));
        /** @type {?} */
        const addonStatuses = newProducts
            .map((/**
         * @param {?} product
         * @return {?}
         */
        product => product.addons ? product.addons.map((/**
         * @param {?} addon
         * @return {?}
         */
        addon => addon.activationStatus.status)) : []))
            .reduce((/**
         * @param {?} statusList
         * @param {?} reducedList
         * @return {?}
         */
        (statusList, reducedList) => reducedList.concat(statusList)), []);
        /** @type {?} */
        const addonsWithNoParentStatuses = newAddonsWithNoParent
            .map((/**
         * @param {?} addon
         * @return {?}
         */
        addon => addon.activationStatus ? addon.activationStatus.status : null));
        /** @type {?} */
        const allStatuses = [...productStatuses, ...addonStatuses, ...addonsWithNoParentStatuses];
        /** @type {?} */
        const packageStatus = convertNumberToActivationStatus(Math.max(...allStatuses));
        /** @type {?} */
        const statusNotification = createStatusNotificationItemForPackage(packageStatus);
        return createSalesPackageWithStatus(salesPackage, newProducts, newAddonsWithNoParent, statusNotification);
    }));
}
/**
 * @param {?} product
 * @param {?} statuses
 * @return {?}
 */
function addStatusesToSalesProduct(product, statuses) {
    if (!statuses || statuses.length === 0) {
        return product;
    }
    /** @type {?} */
    const productStatus = findStatus(statuses, product.productId);
    /** @type {?} */
    const statusNotification = createStatusNotificationItemForPackageItem(productStatus);
    if (!product.addons) {
        return createSalesProductWithStatus(product, null, statusNotification);
    }
    /** @type {?} */
    const newSalesAddons = product.addons.map((/**
     * @param {?} addon
     * @return {?}
     */
    addon => {
        /** @type {?} */
        const addonStatus = findStatus(statuses, addon.addonId);
        return addStatusesToSalesAddon(addon, addonStatus);
    }));
    return createSalesProductWithStatus(product, newSalesAddons, statusNotification);
}
/**
 * @param {?} addon
 * @param {?} status
 * @return {?}
 */
function addStatusesToSalesAddon(addon, status) {
    /** @type {?} */
    const addonStatusNotification = createStatusNotificationItemForPackageItem(status);
    return createSalesAddonWithStatus(addon, addonStatusNotification);
}
/**
 * @param {?} statuses
 * @param {?} id
 * @return {?}
 */
function findStatus(statuses, id) {
    if (!statuses || statuses.length <= 0) {
        return null;
    }
    /** @type {?} */
    const statusIndex = statuses.findIndex((/**
     * @param {?} s
     * @return {?}
     */
    s => {
        return s.packageItemId === id;
    }));
    if (statusIndex < 0) {
        return null;
    }
    /** @type {?} */
    const status = statuses[statusIndex].status;
    statuses.splice(statusIndex, 1);
    return status;
}
/**
 * @param {?} status
 * @return {?}
 */
function createStatusNotificationItemForPackageItem(status) {
    switch (status) {
        case ActivationStatus.SUCCESS:
            return { icon: 'check_circle', status: status, text: 'Activated' };
        case ActivationStatus.WARNING:
            return { icon: 'warning', status: status, text: 'Already Activated' };
        default:
            return { icon: 'error', status: status, text: 'Activation Errors' };
    }
}
/**
 * @param {?} status
 * @return {?}
 */
function createStatusNotificationItemForPackage(status) {
    switch (status) {
        case ActivationStatus.SUCCESS:
            return { icon: 'check_circle', status: status, text: 'Activated' };
        case ActivationStatus.WARNING:
            return { icon: 'warning', status: status, text: 'Activation Warnings' };
        default:
            return { icon: 'error', status: status, text: 'Activation Errors Occured' };
    }
}
/**
 * @param {?} number
 * @return {?}
 */
function convertNumberToActivationStatus(number) {
    switch (number) {
        case 0:
            return ActivationStatus.SUCCESS;
        case 1:
            return ActivationStatus.WARNING;
        default:
            return ActivationStatus.ERROR;
    }
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @enum {string} */
const ListIndent = {
    INDENT_ZERO: 'indent-zero',
    INDENT_ONE: 'indent-one',
    INDENT_TWO: 'indent-two',
};
class VaPackageDropdownItemComponent {
    constructor() {
        this.enableDropdown = false;
        this.indent = ListIndent.INDENT_ZERO;
        this.itemToggled = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * @return {?}
     */
    toggleItem() {
        this.itemToggled.emit(null);
    }
    /**
     * @param {?} status
     * @return {?}
     */
    isActivatedStatus(status) {
        return status === ActivationStatus.SUCCESS;
    }
    /**
     * @param {?} status
     * @return {?}
     */
    isWarningStatus(status) {
        return status === ActivationStatus.WARNING;
    }
    /**
     * @param {?} status
     * @return {?}
     */
    isErrorStatus(status) {
        return status === ActivationStatus.ERROR;
    }
}
VaPackageDropdownItemComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-package-dropdown-item',
                template: "<mat-list-item [ngClass]=\"indent\" class=\"va-dropdown-list-item\">\n  <va-icon *ngIf=\"!secondaryIconUrl && !secondaryIconName; else dualIcon\" mat-list-avatar [name]=\"title\" [iconUrl]=\"iconUrl\" [diameter]=\"40\"></va-icon>\n  <h3 mat-line class=\"va-dropdown-list-item__title\">{{ title }}\n    <va-badge *ngIf=\"titleBadge\" small color=\"blue-solid\" class=\"va-dropdown-list-item__title-badge\">{{ titleBadge }}</va-badge>\n    <span *ngIf=\"titleDescriptor\" class=\"va-dropdown-list-item__title-descriptor\">{{ titleDescriptor }}</span>\n  </h3>\n  <p class=\"package-dropdown-font\" mat-line>{{subtitle}}</p>\n\n  <span *ngIf=\"!statusItem\" class=\"va-dropdown-list-item__layout\">\n    <p class=\"va-dropdown-list-item__layout va-dropdown-list-item__notice\">{{ description }}</p>\n    <ng-container *ngIf=\"enableDropdown; then dropdownButton\"></ng-container>\n  </span>\n\n  <span *ngIf=\"statusItem\" class=\"va-dropdown-list-item__layout va-dropdown-list-item__status\">\n    <div [ngClass]=\"{\n           'activated': isActivatedStatus(statusItem.status),\n           'warning': isWarningStatus(statusItem.status),\n           'error': isErrorStatus(statusItem.status)}\">\n      <mat-icon>{{statusItem.icon}}</mat-icon>\n    </div>\n    <p class=\"va-dropdown-list-item__notice\"\n       [ngClass]=\"{\n        'activated': isActivatedStatus(statusItem.status),\n        'warning': isWarningStatus(statusItem.status),\n        'error': isErrorStatus(statusItem.status)}\">\n      {{ statusItem.text }}\n    </p>\n    <ng-container *ngIf=\"enableDropdown; then dropdownButton\"></ng-container>\n  </span>\n</mat-list-item>\n\n\n<ng-template #dropdownButton>\n  <button *ngIf=\"enableDropdown\" mat-icon-button type=\"button\" (click)=\"toggleItem()\">\n    <mat-icon mat-list-icon\n              class=\"dropdown-icon\"\n              [ngClass]=\"{'dropdown-icon-rotate-up': !toggleValue, 'dropdown-icon-rotate-down': toggleValue}\">\n      keyboard_arrow_down\n    </mat-icon>\n  </button>\n</ng-template>\n\n<ng-template #dualIcon>\n  <div class=\"dual-icon\">\n    <va-icon mat-list-avatar [iconUrl]=\"iconUrl\" [name]=\"title\" [diameter]=\"40\"></va-icon>\n    <va-icon mat-list-avatar class=\"secondary-icon\" [iconUrl]=\"secondaryIconUrl\" [diameter]=\"20\" [name]=\"secondaryIconName\"></va-icon>\n  </div>\n</ng-template>\n",
                styles: [".va-dropdown-list-item{border-bottom:1px solid rgba(0,0,0,.12)}mat-list-item .va-dropdown-list-item__title{font-weight:700}.va-dropdown-list-item__title-badge{padding-bottom:4px}.indent-one{padding-left:30px}.va-dropdown-list-item__title-descriptor{font-size:11px;font-weight:700;font-style:italic}.indent-two{padding-left:30px}.indent-two .mat-list-avatar{margin-left:40px}.dual-icon{position:relative;display:inline-block;-webkit-box-ordinal-group:0;order:-1;margin-right:16px}.dual-icon .secondary-icon{position:absolute;border-radius:50%;bottom:-24px;right:-24px}.va-dropdown-list-item__layout{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.va-dropdown-list-item__layout .va-dropdown-list-item__notice{width:-webkit-max-content;width:-moz-max-content;width:max-content;font-style:italic}@media screen and (max-width:500px){.va-dropdown-list-item__layout p{display:none}}.va-dropdown-list-item__layout mat-icon{padding:0}.va-dropdown-list-item__layout button{padding:0;min-width:0}.va-dropdown-list-item__layout button .dropdown-icon{color:rgba(0,0,0,.54)}.va-dropdown-list-item__layout button .dropdown-icon-rotate-down{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:.4s;transition:.4s;pointer-events:none}.va-dropdown-list-item__layout button .dropdown-icon-rotate-up{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:.4s;transition:.4s;pointer-events:none}.va-dropdown-list-item__status{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.va-dropdown-list-item__status p{padding-left:6px;font-size:14px;white-space:nowrap}.va-dropdown-list-item__status .activated{color:#4caf50}.va-dropdown-list-item__status .warning{color:#ffa000}.va-dropdown-list-item__status .error{color:#c62828}", ".package-dropdown-font,.product-dropdown-font{color:rgba(0,0,0,.54);font-size:14px;font-weight:400}.package-list-container{border-top:1px solid rgba(0,0,0,.12);padding:0}.package-list-container mat-list{padding:0}.package-dropdown-stencil-display{display:-webkit-box;display:flex;width:100%;-webkit-box-flex:1;flex-grow:1}.package-dropdown-stencil-display va-icon{margin-right:20px}.package-dropdown-stencil-display .stencil-text{width:inherit;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center}.package-dropdown-stencil-display .stencil-text .stencil-title{height:32px;width:40%;margin-bottom:5px!important;margin-top:0!important}.package-dropdown-stencil-display .stencil-text .stencil-tagline{height:32px;width:inherit}.product-or-addon-list{background-color:rgba(0,0,0,.04);overflow:hidden}"]
            }] }
];
VaPackageDropdownItemComponent.propDecorators = {
    title: [{ type: Input }],
    titleBadge: [{ type: Input }],
    titleDescriptor: [{ type: Input }],
    iconUrl: [{ type: Input }],
    secondaryIconUrl: [{ type: Input }],
    secondaryIconName: [{ type: Input }],
    subtitle: [{ type: Input }],
    statusItem: [{ type: Input }],
    enableDropdown: [{ type: Input }],
    indent: [{ type: Input }],
    toggleValue: [{ type: Input }],
    description: [{ type: Input }],
    itemToggled: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.title;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.titleBadge;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.titleDescriptor;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.iconUrl;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.secondaryIconUrl;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.secondaryIconName;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.subtitle;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.statusItem;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.enableDropdown;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.indent;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.toggleValue;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.description;
    /** @type {?} */
    VaPackageDropdownItemComponent.prototype.itemToggled;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function OrderLengthsForToggling() { }
if (false) {
    /** @type {?} */
    OrderLengthsForToggling.prototype.packages;
    /** @type {?} */
    OrderLengthsForToggling.prototype.products;
}
class VaPackageDropdownComponent {
    /**
     * @param {?} translateService
     */
    constructor(translateService) {
        this.translateService = translateService;
        // controls whether only one dropdown can be expanded at a time
        this.singularDropdown = false;
        // hides pricing
        this.hidePricing = false;
        this.packageProductIndent = ListIndent.INDENT_ONE;
        this.packageAddonWithoutProductIndent = ListIndent.INDENT_ONE;
        this.packageAddonWithProductIndent = ListIndent.INDENT_TWO;
        this.productAddonIndent = ListIndent.INDENT_ONE;
        this.packages$$ = new ReplaySubject(1);
        this.products$$ = new ReplaySubject(1);
        this.standAloneProducts$$ = new ReplaySubject(1);
        this.statuses$$ = new BehaviorSubject([]);
        this.addons$$ = new ReplaySubject(1);
        this.orderItemLengths$$ = new BehaviorSubject((/** @type {?} */ ({
            packages: 0,
            products: 0
        })));
        this.packageToggles = [];
        this.productToggles = [];
        this.translateService.setTranslation('en', En.en, true);
    }
    // packages in dropdown
    /**
     * @param {?} packages
     * @return {?}
     */
    set packages(packages) {
        this.packages$$.next(packages);
    }
    // products within given packages
    /**
     * @param {?} products
     * @return {?}
     */
    set products(products) {
        this.products$$.next(products);
    }
    // products not associated with a package
    /**
     * @param {?} standAloneProducts
     * @return {?}
     */
    set standAloneProducts(standAloneProducts) {
        this.standAloneProducts$$.next(standAloneProducts);
    }
    // statuses for all products and addons
    /**
     * @param {?} statuses
     * @return {?}
     */
    set statuses(statuses) {
        this.statuses$$.next(statuses);
    }
    // addons within given packages
    /**
     * @param {?} addons
     * @return {?}
     */
    set addons(addons) {
        this.addons$$.next(addons);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        const packages$ = this.packages$$.pipe(filter((/**
         * @param {?} packages
         * @return {?}
         */
        packages => packages !== null)));
        /** @type {?} */
        const products$ = this.products$$.pipe(filter((/**
         * @param {?} products
         * @return {?}
         */
        products => products !== null)));
        /** @type {?} */
        const addons$ = this.addons$$.pipe(filter((/**
         * @param {?} addons
         * @return {?}
         */
        addons => addons !== null)));
        /** @type {?} */
        const salesPackage$ = zip(packages$, products$, addons$).pipe(tap((/**
         * @param {?} __0
         * @return {?}
         */
        ([packages, products, _]) => {
            this.orderItemLengths$$.next((/** @type {?} */ ({
                packages: packages.length,
                products: products.length
            })));
        })), map((/**
         * @param {?} __0
         * @return {?}
         */
        ([packages, products, addons]) => buildSalesPackages(packages, products, addons))));
        this.salesPackages$ = combineLatest(salesPackage$, this.statuses$$).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([salesPackages, statuses]) => addStatusesToSalesPackages(salesPackages, statuses))), startWith([]));
        this.salesProducts$ = combineLatest(this.standAloneProducts$$, this.statuses$$).pipe(filter((/**
         * @param {?} __0
         * @return {?}
         */
        ([products, _]) => products !== null)), map((/**
         * @param {?} __0
         * @return {?}
         */
        ([products, statuses]) => {
            return products.map((/**
             * @param {?} p
             * @return {?}
             */
            p => {
                /** @type {?} */
                const addons = p.addons || null;
                /** @type {?} */
                const salesProducts = buildSalesProductFromProduct(p, addons);
                return addStatusesToSalesProduct(salesProducts, statuses);
            }));
        })), startWith([]));
        this.templateData$ = combineLatest(this.salesPackages$, this.salesProducts$).pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([packages, products]) => ({ packages: packages, products: products }))));
    }
    /**
     * @return {?}
     */
    openAllDropdowns() {
        for (let x = 0; x < this.orderItemLengths$$.getValue().packages; x++) {
            this.packageToggles[x] = true;
        }
        for (let x = 0; x < this.orderItemLengths$$.getValue().products; x++) {
            this.productToggles[x] = true;
        }
    }
    /**
     * @param {?} indexToToggle
     * @return {?}
     */
    togglePackage(indexToToggle) {
        if (this.singularDropdown) {
            /** @type {?} */
            const openedIndex = this.packageToggles.findIndex((/**
             * @param {?} value
             * @return {?}
             */
            value => value === true));
            if (openedIndex !== indexToToggle) {
                this.packageToggles[openedIndex] = false;
            }
            /** @type {?} */
            const productOpenedIndex = this.productToggles.findIndex((/**
             * @param {?} value
             * @return {?}
             */
            value => value === true));
            if (productOpenedIndex > -1) {
                this.productToggles[productOpenedIndex] = false;
            }
        }
        this.packageToggles[indexToToggle] = !this.packageToggles[indexToToggle];
    }
    /**
     * @param {?} indexToToggle
     * @return {?}
     */
    toggleProduct(indexToToggle) {
        if (this.singularDropdown) {
            /** @type {?} */
            const openedIndex = this.productToggles.findIndex((/**
             * @param {?} value
             * @return {?}
             */
            value => value === true));
            if (openedIndex !== indexToToggle) {
                this.productToggles[openedIndex] = false;
            }
            /** @type {?} */
            const packageOpenedIndex = this.packageToggles.findIndex((/**
             * @param {?} value
             * @return {?}
             */
            value => value === true));
            if (packageOpenedIndex > -1) {
                this.packageToggles[packageOpenedIndex] = false;
            }
        }
        this.productToggles[indexToToggle] = !this.productToggles[indexToToggle];
    }
    /**
     * @param {?} product
     * @return {?}
     */
    standAloneProductDescription(product) {
        if (product.addons && product.addons.length > 0) {
            /** @type {?} */
            let description = `Contains ${product.addons.length}`;
            description = product.addons.length === 1 ? `${description} Addon` : `${description} Addons`;
            return description;
        }
        return '';
    }
    /**
     * @param {?} product
     * @return {?}
     */
    standAloneProductWithParentDescription(product) {
        if (!product.parentInfo) {
            return '';
        }
        return `(Requires ${product.parentInfo.parentName})`;
    }
    /**
     * @param {?} pkg
     * @return {?}
     */
    packageDescription(pkg) {
        /** @type {?} */
        const hasProducts = pkg.products && pkg.products.length > 0;
        if (!hasProducts && pkg.totalAddons === 0) {
            return 'No Items in Package';
        }
        /** @type {?} */
        let description = '';
        /** @type {?} */
        const hasOneProduct = pkg.products && pkg.products.length === 1;
        if (hasProducts || pkg.totalAddons > 0) {
            description = 'Contains ';
        }
        if (hasProducts) {
            description = `${description} ${pkg.products.length}`;
            description = hasOneProduct ? `${description} Product` : `${description} Products`;
        }
        if (hasProducts && pkg.totalAddons > 0) {
            description = `${description} & ${pkg.totalAddons}`;
            description = pkg.totalAddons === 1 ? `${description} Addon` : `${description} Addons`;
        }
        return description;
    }
}
VaPackageDropdownComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-package-dropdown',
                animations: [
                    trigger('listAnimationStart', [
                        state('void', style({ height: '0px' })),
                        state('*', style({ height: '*' })),
                        transition('void => *', [animate('0.25s ease')]),
                        transition('* => void', [animate('0.25s ease')])
                    ])
                ],
                template: "<ng-container *ngIf=\"templateData$ | async as data\">\n  <mat-card class=\"package-list-container\" *ngIf=\"data.products?.length > 0 || data.packages?.length > 0 else loading\">\n    <mat-list>\n      <div class=\"package-list\" *ngFor=\"let package of data.packages; let packageIndex = index\">\n\n        <va-package-dropdown-item\n          [title]=\"package.name\"\n          [iconUrl]=\"package.icon\"\n          [subtitle]=\"hidePricing ? '' : package.formattedPrices\"\n          [statusItem]=\"package.activationStatus\"\n          [description]=\"packageDescription(package)\"\n          [enableDropdown]=\"package.products?.length > 0 || package.addonsWithNoParent?.length > 0\"\n          [toggleValue]=\"packageToggles[packageIndex]\"\n          (itemToggled)=\"togglePackage(packageIndex)\"\n        ></va-package-dropdown-item>\n\n        <mat-list class=\"product-or-addon-list package-dropdown-font\" *ngIf=\"packageToggles[packageIndex]\"\n                  [@listAnimationStart]>\n          <div *ngFor=\"let product of package.products\">\n            <va-package-dropdown-item\n              [title]=\"product.name\"\n              [subtitle]=\"product.tagline\"\n              [titleBadge]=\"product.editionName\"\n              [iconUrl]=\"product.icon\"\n              [statusItem]=\"product.activationStatus\"\n              [indent]=\"packageProductIndent\"\n            ></va-package-dropdown-item>\n\n            <va-package-dropdown-item\n              *ngFor=\"let addon of product.addons\"\n              [title]=\"addon.name\"\n              [subtitle]=\"addon.tagline\"\n              [iconUrl]=\"addon.icon\"\n              [statusItem]=\"addon.activationStatus\"\n              [indent]=\"packageAddonWithProductIndent\"\n            ></va-package-dropdown-item>\n          </div>\n\n          <va-package-dropdown-item\n            *ngFor=\"let addon of package.addonsWithNoParent\"\n            [title]=\"addon.name\"\n            [titleDescriptor]=\"'FRONTEND.STORE.REQUIRES_DESCRIPTOR' | translate: {requirementName: addon.parentName}\"\n            [subtitle]=\"addon.tagline\"\n            [iconUrl]=\"addon.icon\"\n            [secondaryIconUrl]=\"addon.parentIcon\"\n            [secondaryIconName]=\"addon.parentName\"\n            [statusItem]=\"addon.activationStatus\"\n            [indent]=\"packageAddonWithoutProductIndent\"\n          ></va-package-dropdown-item>\n        </mat-list>\n      </div>\n\n      <div class=\"product-list\" *ngFor=\"let product of data.products; let productIndex = index\">\n        <va-package-dropdown-item\n          [title]=\"product.name\"\n          [titleBadge]=\"product.editionName\"\n          [titleDescriptor]=\"standAloneProductWithParentDescription(product)\"\n          [iconUrl]=\"product.icon\"\n          [subtitle]=\"hidePricing ? '' : product.formattedPrices\"\n          [secondaryIconUrl]=\"product.parentInfo?.parentIconUrl\"\n          [secondaryIconName]=\"product.parentInfo?.parentName\"\n          [statusItem]=\"product.activationStatus\"\n          [description]=\"standAloneProductDescription(product)\"\n          [enableDropdown]=\"product.addons?.length > 0\"\n          [toggleValue]=\"productToggles[productIndex]\"\n          (itemToggled)=\"toggleProduct(productIndex)\"\n        ></va-package-dropdown-item>\n\n        <mat-list class=\"product-or-addon-list product-dropdown-font\" *ngIf=\"productToggles[productIndex]\"\n                  [@listAnimationStart]>\n          <va-package-dropdown-item\n            *ngFor=\"let addon of product.addons\"\n            [title]=\"addon.name\"\n            [subtitle]=\"addon.tagline\"\n            [iconUrl]=\"addon.icon\"\n            [statusItem]=\"addon.activationStatus\"\n            [indent]=\"productAddonIndent\"\n          ></va-package-dropdown-item>\n        </mat-list>\n      </div>\n\n    </mat-list>\n  </mat-card>\n</ng-container>\n\n<ng-template #loading>\n  <mat-card>\n    <div class=\"package-dropdown-stencil-display\">\n      <va-icon [iconUrl]=\"\"></va-icon>\n      <div class=\"stencil-text\">\n        <h1 class=\"stencil-title stencil-shimmer\"></h1>\n        <span class=\"stencil-tagline stencil-shimmer\"></span>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>\n",
                styles: [".package-dropdown-font,.product-dropdown-font{color:rgba(0,0,0,.54);font-size:14px;font-weight:400}.package-list-container{border-top:1px solid rgba(0,0,0,.12);padding:0}.package-list-container mat-list{padding:0}.package-dropdown-stencil-display{display:-webkit-box;display:flex;width:100%;-webkit-box-flex:1;flex-grow:1}.package-dropdown-stencil-display va-icon{margin-right:20px}.package-dropdown-stencil-display .stencil-text{width:inherit;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center}.package-dropdown-stencil-display .stencil-text .stencil-title{height:32px;width:40%;margin-bottom:5px!important;margin-top:0!important}.package-dropdown-stencil-display .stencil-text .stencil-tagline{height:32px;width:inherit}.product-or-addon-list{background-color:rgba(0,0,0,.04);overflow:hidden}"]
            }] }
];
/** @nocollapse */
VaPackageDropdownComponent.ctorParameters = () => [
    { type: TranslateService }
];
VaPackageDropdownComponent.propDecorators = {
    packages: [{ type: Input }],
    products: [{ type: Input }],
    standAloneProducts: [{ type: Input }],
    statuses: [{ type: Input }],
    addons: [{ type: Input }],
    singularDropdown: [{ type: Input }],
    hidePricing: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    VaPackageDropdownComponent.prototype.singularDropdown;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.hidePricing;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.packageProductIndent;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.packageAddonWithoutProductIndent;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.packageAddonWithProductIndent;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.productAddonIndent;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.packages$$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.products$$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.standAloneProducts$$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.statuses$$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.addons$$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.orderItemLengths$$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.templateData$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.salesPackages$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.salesProducts$;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.packageToggles;
    /** @type {?} */
    VaPackageDropdownComponent.prototype.productToggles;
    /**
     * @type {?}
     * @private
     */
    VaPackageDropdownComponent.prototype.translateService;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaPackageDropdownModule {
}
VaPackageDropdownModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatButtonModule,
                    MatCardModule,
                    MatListModule$1,
                    MatIconModule,
                    VaIconModule,
                    VaBadgeModule,
                    TranslateModule
                ],
                declarations: [VaPackageDropdownComponent, VaPackageDropdownItemComponent],
                exports: [VaPackageDropdownComponent],
                entryComponents: [VaPackageDropdownComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaProductDetailsComponent {
    constructor() {
        this.hasVerifiedContract = false;
        this.canAccessContractPricing = false;
        this.showActionButton = false;
        this.showPricing = false;
        this.showPricingAction = false;
        this.loaded = true;
        this.enableClicked = new EventEmitter();
        this.addonSelected = new EventEmitter();
        this.primaryPricingActionSelected = new EventEmitter();
        this.pricingActionSelected = new EventEmitter();
    }
    /**
     * @return {?}
     */
    getAddons() {
        if (!this._addons) {
            this._addons = this.product.addons.map((/**
             * @param {?} addon
             * @return {?}
             */
            (addon) => Addon.fromApi(addon)));
        }
        return this._addons;
    }
    /**
     * @return {?}
     */
    getActionLabel() {
        if (this.product.isArchived) {
            return 'Enable';
        }
        return 'Enabled';
    }
    /**
     * @return {?}
     */
    get price() {
        // NOTE: wholesalePrice = 0 means free, wholesalePrice = null || -1 means "contact sales"
        /** @type {?} */
        let prices = [];
        if (this.product.wholesalePrice !== CONTACT_SALES && this.product.wholesalePrice != null) {
            prices = [{
                    price: this.product.wholesalePrice,
                    frequency: this.product.billingFrequency
                }];
        }
        return {
            currency: this.product.currency,
            prices: prices
        };
    }
    /**
     * @param {?} addonId
     * @return {?}
     */
    onAddonSelected(addonId) {
        this.addonSelected.emit(addonId);
    }
}
VaProductDetailsComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-product-details',
                template: "<div class=\"page\">\n    <va-header-container [iconUrl]=\"product.iconUrl\"\n                         [title]=\"product.name\"\n                         [tagline]=\"product.tagline\"\n                         [chipLabels]=\"product.getLmiCategoryNames()\"\n                         [pricing]=\"price\"\n                         [pricingLabel]=\"'Wholesale Price'\"\n                         [primaryPricingActionLabel]=\"primaryPricingActionLabel\"\n                         [pricingActionLabel]=\"pricingActionLabel\"\n                         [pricingActionEnabled]=\"showPricingAction\"\n                         [actionLabel]=\"getActionLabel()\"\n                         [actionEnabled]=\"product.isArchived\"\n                         [showAction]=\"showActionButton\"\n                         [showPricing]=\"showPricing\"\n                         [billedProduct]=\"billedProduct\"\n                         [hasVerifiedContract]=\"hasVerifiedContract\"\n                         [loaded]=\"loaded\"\n                         (primaryPricingActionSelected)=\"primaryPricingActionSelected.emit()\"\n                         (pricingActionSelected)=\"pricingActionSelected.emit()\"\n                         (actionSelected)=\"enableClicked.emit()\">\n    </va-header-container>\n    <div class=\"product-details product-content\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"product.description || product.keySellingPoints\">\n          <va-selling-info [description]=\"product.description\"\n                          [keySellingPoints]=\"product.keySellingPoints\"></va-selling-info>\n        </ng-container>\n        <section *ngIf=\"product.addons?.length > 0\">\n          <h2 class=\"va-component-title\">Add-Ons</h2>\n          <va-addon-list (addonSelected)=\"onAddonSelected($event)\"\n                         [addons]=\"getAddons()\"\n                         [showPricing]=\"showPricing\"\n                         [hasVerifiedContract]=\"hasVerifiedContract\"\n                         [canAccessContractPricing]=\"canAccessContractPricing\"\n                         [partnerID]=\"partnerID\">\n          </va-addon-list>\n        </section>\n\n        <section *ngIf=\"product.faqs?.length > 0\">\n          <h2 class=\"va-component-title\">FAQs</h2>\n          <va-faqs [faqs]=\"product.faqs\"></va-faqs>\n        </section>\n      </div>\n\n      <div class=\"right-column\">\n        <section *ngIf=\"product.restrictions?.country?.whitelist?.length > 0\">\n          <supported-countries [countryCodes]=\"product.restrictions.country.whitelist\"></supported-countries>\n        </section>\n\n        <section *ngIf=\"product.screenshotUrls?.length > 0\">\n          <h2 class=\"va-component-title\">Gallery</h2>\n          <va-image-gallery [imageUrls]=\"product.screenshotUrls\"></va-image-gallery>\n        </section>\n\n        <section *ngIf=\"product.files?.length > 0\">\n          <h2 class=\"va-component-title\">Files</h2>\n          <va-files [files]=\"product.files\"></va-files>\n        </section>\n      </div>\n    </div>\n</div>\n",
                styles: [":host{display:block;font-size:14px;line-height:1.4}:host *{box-sizing:border-box}.va-component-title{font-size:24px;font-weight:300;margin-top:0}@media screen and (min-width:600px){.va-component-title{font-size:32px}}img{max-width:100%}va-icon{display:inline-block}.sales-person-details{max-height:430px;overflow:hidden}.page{position:relative;margin:0 auto 20px;background:#fff;color:#212121;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px}.page .item-amount{color:#9e9e9e;font-size:14px;text-align:right;margin:0 24px 8px}section{padding:24px}.left-column{width:66%}@media screen and (max-width:600px){.left-column{width:100%}}.right-column{width:34%}.product-content{display:-webkit-box;display:flex}@media screen and (max-width:600px){.right-column{width:100%}.product-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}"]
            }] }
];
VaProductDetailsComponent.propDecorators = {
    product: [{ type: Input }],
    billedProduct: [{ type: Input }],
    hasVerifiedContract: [{ type: Input }],
    canAccessContractPricing: [{ type: Input }],
    showActionButton: [{ type: Input }],
    showPricing: [{ type: Input }],
    primaryPricingActionLabel: [{ type: Input }],
    pricingActionLabel: [{ type: Input }],
    showPricingAction: [{ type: Input }],
    loaded: [{ type: Input }],
    partnerID: [{ type: Input }],
    enableClicked: [{ type: Output }],
    addonSelected: [{ type: Output }],
    primaryPricingActionSelected: [{ type: Output }],
    pricingActionSelected: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    VaProductDetailsComponent.prototype.product;
    /** @type {?} */
    VaProductDetailsComponent.prototype.billedProduct;
    /** @type {?} */
    VaProductDetailsComponent.prototype.hasVerifiedContract;
    /** @type {?} */
    VaProductDetailsComponent.prototype.canAccessContractPricing;
    /** @type {?} */
    VaProductDetailsComponent.prototype.showActionButton;
    /** @type {?} */
    VaProductDetailsComponent.prototype.showPricing;
    /** @type {?} */
    VaProductDetailsComponent.prototype.primaryPricingActionLabel;
    /** @type {?} */
    VaProductDetailsComponent.prototype.pricingActionLabel;
    /** @type {?} */
    VaProductDetailsComponent.prototype.showPricingAction;
    /** @type {?} */
    VaProductDetailsComponent.prototype.loaded;
    /** @type {?} */
    VaProductDetailsComponent.prototype.partnerID;
    /** @type {?} */
    VaProductDetailsComponent.prototype.enableClicked;
    /** @type {?} */
    VaProductDetailsComponent.prototype.addonSelected;
    /** @type {?} */
    VaProductDetailsComponent.prototype.primaryPricingActionSelected;
    /** @type {?} */
    VaProductDetailsComponent.prototype.pricingActionSelected;
    /**
     * @type {?}
     * @private
     */
    VaProductDetailsComponent.prototype._addons;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class VaProductDetailsModule {
}
VaProductDetailsModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    VaImageGalleryModule, CommonModule, VaIconModule,
                    VaPricingModule, VaFilesModule, VaFaqsModule, VaSellingInfoModule,
                    VaHeaderContainerModule, VaSafeHtmlModule, VaAddonListModule, RestrictionsModule
                ],
                declarations: [VaProductDetailsComponent],
                exports: [VaProductDetailsComponent],
                entryComponents: [VaProductDetailsComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ResellerItem {
    /**
     * @param {?=} data
     */
    constructor(data) {
        this.quantity = 1;
        data = data || {};
        Object.assign(this, data);
    }
}
if (false) {
    /** @type {?} */
    ResellerItem.prototype.appId;
    /** @type {?} */
    ResellerItem.prototype.addonId;
    /** @type {?} */
    ResellerItem.prototype.name;
    /** @type {?} */
    ResellerItem.prototype.icon;
    /** @type {?} */
    ResellerItem.prototype.tagline;
    /** @type {?} */
    ResellerItem.prototype.headerImage;
    /** @type {?} */
    ResellerItem.prototype.currency;
    /** @type {?} */
    ResellerItem.prototype.price;
    /** @type {?} */
    ResellerItem.prototype.billingFrequency;
    /** @type {?} */
    ResellerItem.prototype.lmiCategories;
    /** @type {?} */
    ResellerItem.prototype.enabled;
    /** @type {?} */
    ResellerItem.prototype.isCustom;
    /** @type {?} */
    ResellerItem.prototype.orderForm;
    /** @type {?} */
    ResellerItem.prototype.quantity;
    /** @type {?} */
    ResellerItem.prototype.allowMultipleActivations;
    /** @type {?} */
    ResellerItem.prototype.usesCustomizationForm;
    /** @type {?} */
    ResellerItem.prototype.usesActivationSpecificEntryUrl;
    /** @type {?} */
    ResellerItem.prototype.entryUrl;
    /** @type {?} */
    ResellerItem.prototype.restrictions;
    /** @type {?} */
    ResellerItem.prototype.activationRequiresApproval;
    /** @type {?} */
    ResellerItem.prototype.billingId;
    /** @type {?} */
    ResellerItem.prototype.usesEditions;
    /** @type {?} */
    ResellerItem.prototype.editionIds;
    /** @type {?} */
    ResellerItem.prototype.suggestedRetailPrice;
    /** @type {?} */
    ResellerItem.prototype.editionId;
    /** @type {?} */
    ResellerItem.prototype.trialConfiguration;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CheckboxField extends FieldBase {
    constructor() {
        super(...arguments);
        this.controlType = 'checkbox';
    }
}
if (false) {
    /** @type {?} */
    CheckboxField.prototype.controlType;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function Option() { }
if (false) {
    /** @type {?} */
    Option.prototype.value;
    /** @type {?} */
    Option.prototype.label;
    /** @type {?|undefined} */
    Option.prototype.disabled;
}
/**
 * @record
 */
function DropDownFieldOptions() { }
if (false) {
    /** @type {?} */
    DropDownFieldOptions.prototype.options;
    /** @type {?|undefined} */
    DropDownFieldOptions.prototype.allowMultiples;
    /** @type {?|undefined} */
    DropDownFieldOptions.prototype.allowDuplicates;
    /** @type {?|undefined} */
    DropDownFieldOptions.prototype.maxChoices;
}
class DropdownField extends FieldBase {
    /**
     * @param {?} options
     */
    constructor(options) {
        super(options);
        this.controlType = 'dropdown';
        this.options = [];
        if (!!options.options && options.options.length > 0) {
            // Because this typeof guard is on the element and not the array as a whole typescript doesn't recognize it as a valid type assertion
            // The ts-ignore's are required because of this
            if (typeof options.options[0] === 'string') {
                if (options.allowMultiples) {
                    // @ts-ignore
                    this.options = options.options.map((/**
                     * @param {?} o
                     * @return {?}
                     */
                    (o) => ({ value: o, name: o })));
                }
                else {
                    // @ts-ignore
                    this.options = options.options.map((/**
                     * @param {?} o
                     * @return {?}
                     */
                    (o) => ({ value: o, label: o })));
                }
            }
            else {
                if (options.allowMultiples) {
                    // @ts-ignore
                    this.options = options.options.map((/**
                     * @param {?} o
                     * @return {?}
                     */
                    (o) => ({ value: o.value, name: o.label })));
                }
                else {
                    // @ts-ignore
                    this.options = options.options;
                }
            }
        }
        this.allowMultiples = !!options.allowMultiples;
        this.allowDuplicates = !!options.allowDuplicates;
        this.maxChoices = options.maxChoices ? options.maxChoices : 1;
        this.validator = this.validatorBuilder();
    }
    /**
     * @protected
     * @return {?}
     */
    validatorBuilder() {
        /** @type {?} */
        const maxChoices = this.maxChoices;
        return (/**
         * @param {?} control
         * @return {?}
         */
        (control) => {
            if (Array.isArray(control.value) && maxChoices && control.value.length > maxChoices) {
                return { overMaxChoices: true };
            }
        });
    }
}
if (false) {
    /** @type {?} */
    DropdownField.prototype.controlType;
    /** @type {?} */
    DropdownField.prototype.options;
    /** @type {?} */
    DropdownField.prototype.allowMultiples;
    /** @type {?} */
    DropdownField.prototype.allowDuplicates;
    /** @type {?} */
    DropdownField.prototype.maxChoices;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const DEFAULT_NUM_FILES = 5;
/**
 * @record
 */
function FileUploadGroupFieldOptions() { }
if (false) {
    /** @type {?} */
    FileUploadGroupFieldOptions.prototype.fileType;
    /** @type {?} */
    FileUploadGroupFieldOptions.prototype.uploadUrl;
    /** @type {?} */
    FileUploadGroupFieldOptions.prototype.numFiles;
}
class FileUploadGroupField extends FieldBase {
    /**
     * @param {?} options
     */
    constructor(options) {
        super(options);
        this.controlType = 'file';
        if (!options.uploadUrl) {
            throw new Error('uploadUrl is required.');
        }
        this.fileType = options.fileType || 'image';
        this.numFiles = options.numFiles || DEFAULT_NUM_FILES;
        this.uploadUrl = options.uploadUrl;
        this.value = [];
    }
}
if (false) {
    /** @type {?} */
    FileUploadGroupField.prototype.controlType;
    /** @type {?} */
    FileUploadGroupField.prototype.fileType;
    /** @type {?} */
    FileUploadGroupField.prototype.uploadUrl;
    /** @type {?} */
    FileUploadGroupField.prototype.numFiles;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TextareaField extends FieldBase {
    constructor() {
        super(...arguments);
        this.controlType = 'textarea';
    }
}
if (false) {
    /** @type {?} */
    TextareaField.prototype.controlType;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function TextBoxFieldOptions() { }
if (false) {
    /** @type {?} */
    TextBoxFieldOptions.prototype.textboxType;
    /** @type {?|undefined} */
    TextBoxFieldOptions.prototype.prefix;
    /** @type {?|undefined} */
    TextBoxFieldOptions.prototype.suffix;
    /** @type {?|undefined} */
    TextBoxFieldOptions.prototype.displayOnly;
}
class TextboxField extends FieldBase {
    /**
     * @param {?} options
     */
    constructor(options) {
        super(options);
        this.controlType = 'textbox';
        this.textboxType = options.textboxType || 'text';
        this.prefix = options.prefix || '';
        this.suffix = options.suffix || '';
        this.regexValidator = options.regexValidator || '';
        this.regexErrorMessage = options.regexErrorMessage || '';
        this.displayOnly = options.displayOnly || false;
    }
}
if (false) {
    /** @type {?} */
    TextboxField.prototype.controlType;
    /** @type {?} */
    TextboxField.prototype.textboxType;
    /** @type {?} */
    TextboxField.prototype.prefix;
    /** @type {?} */
    TextboxField.prototype.suffix;
    /** @type {?} */
    TextboxField.prototype.regexValidator;
    /** @type {?} */
    TextboxField.prototype.regexErrorMessage;
    /** @type {?} */
    TextboxField.prototype.displayOnly;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function User() { }
if (false) {
    /** @type {?} */
    User.prototype.userId;
    /** @type {?} */
    User.prototype.email;
    /** @type {?|undefined} */
    User.prototype.firstName;
    /** @type {?|undefined} */
    User.prototype.lastName;
}
/**
 * @record
 */
function VBCUserFieldOptions() { }
if (false) {
    /** @type {?} */
    VBCUserFieldOptions.prototype.users;
}
class VBCUserField extends DropdownField {
    /**
     * @param {?} options
     */
    constructor(options) {
        super({
            id: options.id,
            label: options.label,
            required: options.required,
            description: options.description,
            options: getOptions(options.users),
            disabled: options.disabled,
            forOfficeUseOnly: options.forOfficeUseOnly
        });
        this.controlType = 'vbcuser';
    }
}
if (false) {
    /** @type {?} */
    VBCUserField.prototype.controlType;
}
/**
 * @param {?} vbcUsers
 * @return {?}
 */
function getOptions(vbcUsers) {
    if (vbcUsers && vbcUsers.length > 0) {
        vbcUsers.sort(compareUsersByEmail);
        return vbcUsers.map((/**
         * @param {?} user
         * @return {?}
         */
        user => {
            /** @type {?} */
            const labelString = createLabelString(user.firstName, user.lastName, user.email);
            if (user.userId && user.email && user.firstName && user.lastName) {
                return {
                    label: labelString,
                    value: JSON.stringify({ firstName: user.firstName, lastName: user.lastName, email: user.email, id: user.userId })
                };
            }
            return { label: labelString, value: '', disabled: true };
        }));
    }
    return [{ label: 'No Users — Please add one to this account', value: '', disabled: true }];
}
/**
 * @param {?} a
 * @param {?} b
 * @return {?}
 */
function compareUsersByEmail(a, b) {
    if (a == null) {
        return -1;
    }
    if (b == null) {
        return 1;
    }
    return a.email.localeCompare(b.email);
}
/**
 * @param {?} firstName
 * @param {?} lastName
 * @param {?} email
 * @return {?}
 */
function createLabelString(firstName, lastName, email) {
    /** @type {?} */
    let returnString = '';
    returnString += firstName ? firstName + ' ' : '';
    returnString += lastName ? lastName + ' ' : '';
    returnString += email ? `(${email})` : '';
    return returnString;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { ActivationStatus, AddonDetailsComponent, AddonDropDownFormSectionData, AddonModule, BUSINESS_USER, CHECK_BOX, CONTACT_SALES, CardListStencilComponent, CardStencilComponent, CaseTransform, CheckboxField, DROP_DOWN, DetailsStencilComponent, DropDownFormSectionComponent, DropDownFormSectionData, DropdownField, FILES, FORM_FIELDS, FieldBase, FieldBuilderComponent, FieldComponent, FieldService, File, FileUploadGroupField, HeimdallServiceToken, LMI_CATEGORIES, LMI_CATEGORIES_BY_NAME, LMI_CATEGORY_MAP, ListStencilComponent, OrderFormComponent, OrderFormSectionComponent, OrderFormSectionData, Package, PackageDetails, Product, ProductOrderFormSectionData, ProductWithParent, ProductsNavV2Component, ResellerItem, RestrictionsModule, STOREFRONT_FILTER_NAME, SearchBarStencilComponent, StencilsModule, StoreCardComponent, StoreCardModule, StoreComponent, StoreModule, StoreService, StorefrontComponent, TEXT_AREA, TEXT_BOX, TextareaField, TextboxField, VBCUserField, VaAddonListComponent, VaAddonListModule, VaFaqsComponent, VaFaqsModule, VaFilesComponent, VaFilesModule, VaHeaderContainerComponent, VaHeaderContainerModule, VaOrderFormModule, VaPackageDetailsComponent, VaPackageDetailsModule, VaPackageDetailsV2Component, VaPackageDetailsV2Module, VaPackageDropdownComponent, VaPackageDropdownModule, VaPricingComponent, VaPricingModule, VaProductDetailsComponent, VaProductDetailsModule, VaProductsNavComponent, VaProductsNavModule, VaSalespersonDetailsComponent, VaSalespersonDetailsModule, VaSellingInfoComponent, VaSellingInfoModule, combineProductOrderWithContainedProducts, convertToPackageDetails, getUniqueProductAddonId, orderProductsAndAddons, HeimdallClient as ɵb, HeimdallClientModule as ɵc, HighlightPricingComponent as ɵd, TablePricingComponent as ɵe, OrderItemListComponent as ɵf, PricePipe as ɵg, FormatBillingFrequencyPipe as ɵh, OrderFormService as ɵi, OrderItemListService as ɵj, SupportedCountriesComponent as ɵk, VaPackageDetailsV2Component as ɵl, Sellable as ɵm, VaPackageDropdownItemComponent as ɵn };
//# sourceMappingURL=vendasta-store.js.map