| 1 | [{"__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 shimmer\"></div>\n <div class=\"stencil-pricing 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 shimmer\"></div>\n <div class=\"stencil-pricing 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"}]}}}}] |