import { __decorate, __extends } from "tslib";
import { Component } from '@angular/core';
import { VaPricingComponent } from '../pricing.component';
var TablePricingComponent = /** @class */ (function (_super) {
    __extends(TablePricingComponent, _super);
    function TablePricingComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    TablePricingComponent = __decorate([
        Component({
            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                  <ng-container *ngIf=\"priceData$ | async as priceDatas\">\n                    <ng-container *ngIf=\"showAllPrices\">\n                      <ng-container *ngFor=\"let priceData of priceDatas; let first = first\">\n                        <span *ngIf=\"first\" [ngClass]=\"{'first': priceDatas.length > 1}\">\n                          {{ priceData.priceStringForPricingWithFrequency }}\n                        </span>\n                        <span *ngIf=\"!first\">\n                          + {{ priceData.priceStringForPricingWithFrequency }}\n                        </span>\n                      </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!showAllPrices\">\n                      {{ priceDatas[0].priceStringForPricingWithFrequency }}\n                    </ng-container>\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        </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;flex-direction:column;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: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;flex:1}.stencil-pricing{height:1em}.commitment{color:#9e9e9e;font-size:12px;font-style:italic}.first{padding-left:10px}"]
        })
    ], TablePricingComponent);
    return TablePricingComponent;
}(VaPricingComponent));
export { TablePricingComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtcHJpY2luZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdmVuZGFzdGEvc3RvcmUvIiwic291cmNlcyI6WyJsaWIvcHJpY2luZy90YWJsZS1wcmljaW5nL3RhYmxlLXByaWNpbmcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hDLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBT3hEO0lBQTJDLHlDQUFrQjtJQUE3RDs7SUFDQSxDQUFDO0lBRFkscUJBQXFCO1FBTGpDLFNBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSxlQUFlO1lBQ3pCLHkxRkFBNkM7O1NBRWhELENBQUM7T0FDVyxxQkFBcUIsQ0FDakM7SUFBRCw0QkFBQztDQUFBLEFBREQsQ0FBMkMsa0JBQWtCLEdBQzVEO1NBRFkscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtWYVByaWNpbmdDb21wb25lbnR9IGZyb20gJy4uL3ByaWNpbmcuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0YWJsZS1wcmljaW5nJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGFibGUtcHJpY2luZy5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdGFibGUtcHJpY2luZy5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUYWJsZVByaWNpbmdDb21wb25lbnQgZXh0ZW5kcyBWYVByaWNpbmdDb21wb25lbnQge1xufVxuIl19