[{"__symbolic":"module","version":3,"metadata":{"VaPricingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"va-pricing","template":"\n    <div *ngIf=\"pricing\">\n        <div class=\"no-price\" *ngIf=\"shouldContactSales\">\n            Contact sales for pricing\n        </div>\n        <div class=\"no-price\" *ngIf=\"!shouldContactSales && isFree\">\n            <b>Free</b>\n        </div>\n        <ng-container *ngIf=\"!shouldContactSales && !isFree && !isAddon\">\n            <div *ngIf= \"pricing && pricing.prices[0] as price\" class=\"price-box\">\n                <b class=\"price-number\">{{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}} </b>\n                <span *ngIf=\"price.frequency as frequency\" class=\"billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n                  {{ frequency }}</span>\n            </div>\n            <div *ngIf=\"pricing && pricing.prices[1] as price\" class=\"price-box\">\n                <b class=\"price-number\">+ {{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}}</b>\n                <span *ngIf=\"price.frequency as frequency\" class=\"billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n                  {{ frequency }}</span>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!shouldContactSales && !isFree && isAddon\">\n          <div *ngIf= \"pricing && pricing.prices[0] as price\" class=\"price-box\">\n            <span *ngIf=\"price.frequency\" class=\"addon-billing-freq\">\n                    {{ price.frequency }}</span>\n            <b class=\"price-number\">{{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}} </b>\n          </div>\n        </ng-container>\n    </div>\n    <div *ngIf=\"!pricing\">\n      <div class=\"stencil-pricing-title stencil-shimmer\"></div>\n      <div class=\"stencil-pricing stencil-shimmer\"></div>\n    </div>\n    ","styles":[":host { color: #9e9e9e; } .price-box { display: flex; align-items: baseline; flex-direction: row-reverse; } @media screen and (max-width: 600px) { .price-box { font-size: 16px; } } .no-price { text-align: center; } @media screen and (max-width: 600px) { .no-price { font-size: 16px; } } b { color: #212121; font-size: 20px; } @media screen and (max-width: 600px) { b { font-size: 16px; } } .billing-freq { text-transform: capitalize; flex: 1; } .addon-billing-freq { padding-left: 5px; } .va-wrap { display: block; } .stencil-pricing-title { height: 32px; margin-bottom: 10px; } .stencil-pricing { height: 75px; } "]}]}],"members":{"pricing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"wrapFrequency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isAddon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getCurrencySymbol":[{"__symbolic":"method"}],"getDisplayPrice":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"VaPricingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"va-pricing","template":"\n    <div *ngIf=\"pricing\">\n        <div class=\"no-price\" *ngIf=\"shouldContactSales\">\n            Contact sales for pricing\n        </div>\n        <div class=\"no-price\" *ngIf=\"!shouldContactSales && isFree\">\n            <b>Free</b>\n        </div>\n        <ng-container *ngIf=\"!shouldContactSales && !isFree && !isAddon\">\n            <div *ngIf= \"pricing && pricing.prices[0] as price\" class=\"price-box\">\n                <b class=\"price-number\">{{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}} </b>\n                <span *ngIf=\"price.frequency as frequency\" class=\"billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n                  {{ frequency }}</span>\n            </div>\n            <div *ngIf=\"pricing && pricing.prices[1] as price\" class=\"price-box\">\n                <b class=\"price-number\">+ {{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}}</b>\n                <span *ngIf=\"price.frequency as frequency\" class=\"billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n                  {{ frequency }}</span>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!shouldContactSales && !isFree && isAddon\">\n          <div *ngIf= \"pricing && pricing.prices[0] as price\" class=\"price-box\">\n            <span *ngIf=\"price.frequency\" class=\"addon-billing-freq\">\n                    {{ price.frequency }}</span>\n            <b class=\"price-number\">{{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}} </b>\n          </div>\n        </ng-container>\n    </div>\n    <div *ngIf=\"!pricing\">\n      <div class=\"stencil-pricing-title stencil-shimmer\"></div>\n      <div class=\"stencil-pricing stencil-shimmer\"></div>\n    </div>\n    ","styles":[":host { color: #9e9e9e; } .price-box { display: flex; align-items: baseline; flex-direction: row-reverse; } @media screen and (max-width: 600px) { .price-box { font-size: 16px; } } .no-price { text-align: center; } @media screen and (max-width: 600px) { .no-price { font-size: 16px; } } b { color: #212121; font-size: 20px; } @media screen and (max-width: 600px) { b { font-size: 16px; } } .billing-freq { text-transform: capitalize; flex: 1; } .addon-billing-freq { padding-left: 5px; } .va-wrap { display: block; } .stencil-pricing-title { height: 32px; margin-bottom: 10px; } .stencil-pricing { height: 75px; } "]}]}],"members":{"pricing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"wrapFrequency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isAddon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getCurrencySymbol":[{"__symbolic":"method"}],"getDisplayPrice":[{"__symbolic":"method"}]}}}}]