[{"__symbolic":"module","version":3,"metadata":{"PlanDetailsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"plan-details","template":"\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-offset-4 col-sm-8\">\n            <div class=\"row\">\n                <div class=\"col-xs-4 my_planHeader\" [class.my-plan1]=\"i==0\" [class.my-plan2]=\"i==1\" [class.my-plan3]=\"i==2\" *ngFor=\"let plan of plans;let i=index\">\n                    <div class=\"my-planTitle\">{{plan.name}}</div>\n                    <div class=\"my-planPrice\">{{plan.pricing | currency:'USD':true}}</div>\n                    <div class=\"my-planDuration\">{{plan.billing === 'monthly' ? 'per month':'annual'}}</div>\n                    <a type=\"button\" class=\"btn btn-default\" (click)=\"selectedPlan(plan)\">Buy</a>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"row my-featureRow\" *ngFor=\"let feature of features\">\n        <div class=\"col-xs-12 col-sm-4 my-feature\">\n            {{feature.description}}\n        </div>\n        <div class=\"col-xs-12 col-sm-8\">\n            <div class=\"row\">\n                <div class=\"col-xs-4 col-sm-4 my-planFeature\" [class.my-plan1]=\"j==0\" [class.my-plan2]=\"j==1\" [class.my-plan3]=\"j==2\" *ngFor=\"let item of feature?.availability;let j=index\">\n                    <i class=\"fa\" [class.fa-check]=\"item.availability==1\" [class.my-check]=\"item.availability==1\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n  ","styles":["\n    .my_planHeader{text-align:center;color:black;padding-top:0.2em;padding-bottom:0.2em}.my-planTitle{font-size:2em;font-weight:bold}.my-planPrice{font-size:1.4em;font-weight:bold}.my-planDuration{margin-top:-0.6em}@media (max-width: 768px){.my-planTitle{font-size:small}}.my-feature{line-height:2.8em}@media (max-width: 768px){.my-feature{text-align:center}}.my-featureRow{margin-top:0.2em;margin-bottom:0.2em;border:0.1em solid #a3a3a3}.my-plan1{background:#e0eaf2}.my_planHeader.my-plan1 a{background:#3a5a73;color:white}.my_planHeader.my-plan1{background:#6999c1;border-bottom:thick solid #3a5a73}.my-plan2{background:#e6ebda}.my_planHeader.my-plan2 a{background:#30642b;color:white}.my_planHeader.my-plan2{background:#86a24d;border-bottom:thick solid #30642b}.my-plan3{background:#feebd4}.my_planHeader.my-plan3 a{background:#854000;color:white}.my_planHeader.my-plan3{background:#fda131;border-bottom:thick solid #854000}.my-planFeature{text-align:center;font-size:2em}.my-planFeature i.my-check{color:green}\n  "]}]}],"members":{"plans":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"features":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectionEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedPlan":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PlanDetailsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"plan-details","template":"\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-offset-4 col-sm-8\">\n            <div class=\"row\">\n                <div class=\"col-xs-4 my_planHeader\" [class.my-plan1]=\"i==0\" [class.my-plan2]=\"i==1\" [class.my-plan3]=\"i==2\" *ngFor=\"let plan of plans;let i=index\">\n                    <div class=\"my-planTitle\">{{plan.name}}</div>\n                    <div class=\"my-planPrice\">{{plan.pricing | currency:'USD':true}}</div>\n                    <div class=\"my-planDuration\">{{plan.billing === 'monthly' ? 'per month':'annual'}}</div>\n                    <a type=\"button\" class=\"btn btn-default\" (click)=\"selectedPlan(plan)\">Buy</a>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"row my-featureRow\" *ngFor=\"let feature of features\">\n        <div class=\"col-xs-12 col-sm-4 my-feature\">\n            {{feature.description}}\n        </div>\n        <div class=\"col-xs-12 col-sm-8\">\n            <div class=\"row\">\n                <div class=\"col-xs-4 col-sm-4 my-planFeature\" [class.my-plan1]=\"j==0\" [class.my-plan2]=\"j==1\" [class.my-plan3]=\"j==2\" *ngFor=\"let item of feature?.availability;let j=index\">\n                    <i class=\"fa\" [class.fa-check]=\"item.availability==1\" [class.my-check]=\"item.availability==1\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n  ","styles":["\n    .my_planHeader{text-align:center;color:black;padding-top:0.2em;padding-bottom:0.2em}.my-planTitle{font-size:2em;font-weight:bold}.my-planPrice{font-size:1.4em;font-weight:bold}.my-planDuration{margin-top:-0.6em}@media (max-width: 768px){.my-planTitle{font-size:small}}.my-feature{line-height:2.8em}@media (max-width: 768px){.my-feature{text-align:center}}.my-featureRow{margin-top:0.2em;margin-bottom:0.2em;border:0.1em solid #a3a3a3}.my-plan1{background:#e0eaf2}.my_planHeader.my-plan1 a{background:#3a5a73;color:white}.my_planHeader.my-plan1{background:#6999c1;border-bottom:thick solid #3a5a73}.my-plan2{background:#e6ebda}.my_planHeader.my-plan2 a{background:#30642b;color:white}.my_planHeader.my-plan2{background:#86a24d;border-bottom:thick solid #30642b}.my-plan3{background:#feebd4}.my_planHeader.my-plan3 a{background:#854000;color:white}.my_planHeader.my-plan3{background:#fda131;border-bottom:thick solid #854000}.my-planFeature{text-align:center;font-size:2em}.my-planFeature i.my-check{color:green}\n  "]}]}],"members":{"plans":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"features":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectionEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedPlan":[{"__symbolic":"method"}]}}}}]