import { __decorate } from "tslib";
import { Component } from '@angular/core';
import { VaPricingComponent } from '../pricing.component';
let HighlightPricingComponent = class HighlightPricingComponent extends VaPricingComponent {
};
HighlightPricingComponent = __decorate([
    Component({
        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:flex;align-items:baseline;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;flex:1;padding-right:5px}.tier-billing-freq{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}"]
    })
], HighlightPricingComponent);
export { HighlightPricingComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0LXByaWNpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHZlbmRhc3RhL3N0b3JlLyIsInNvdXJjZXMiOlsibGliL3ByaWNpbmcvaGlnaGxpZ2h0LXByaWNpbmcvaGlnaGxpZ2h0LXByaWNpbmcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hDLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBT3hELElBQWEseUJBQXlCLEdBQXRDLE1BQWEseUJBQTBCLFNBQVEsa0JBQWtCO0NBQ2hFLENBQUE7QUFEWSx5QkFBeUI7SUFMckMsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLG1CQUFtQjtRQUM3Qiwyc0lBQWlEOztLQUVwRCxDQUFDO0dBQ1cseUJBQXlCLENBQ3JDO1NBRFkseUJBQXlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtWYVByaWNpbmdDb21wb25lbnR9IGZyb20gJy4uL3ByaWNpbmcuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdoaWdobGlnaHQtcHJpY2luZycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2hpZ2hsaWdodC1wcmljaW5nLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9oaWdobGlnaHQtcHJpY2luZy5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBIaWdobGlnaHRQcmljaW5nQ29tcG9uZW50IGV4dGVuZHMgVmFQcmljaW5nQ29tcG9uZW50IHtcbn1cbiJdfQ==