[{"__symbolic":"module","version":3,"metadata":{"PlanOptionsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"plan-options","template":"\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-xs-12 col-md-3\" *ngFor=\"let plan of plans;let i=index\">\n                <div class=\"panel\" [class.panel-primary]=\"i==0\" [class.panel-success]=\"i==1\" [class.panel-info]=\"i==2\">\n                    <div class=\"cnrflash\" *ngIf=\"i==1\">\n                        <div class=\"cnrflash-inner\">\n                            <span class=\"cnrflash-label\">MOST\n                                <br>\n                                POPULAR</span>\n                        </div>\n                    </div>\n                    <div class=\"panel-heading\">\n                        <h3 class=\"panel-title\">\n                            {{plan.name}}</h3>\n                    </div>\n                    <div class=\"panel-body\">\n                        <div class=\"the-price\">\n                            <h1>\n                                {{plan.pricing | currency:'USD':true}}<span class=\"subscript\">{{plan.billing === 'monthly' ? '/mo':'annual'}}</span></h1>\n                            <small>{{plan.offer}}</small>\n                        </div>\n                        <table class=\"table table-striped\" >\n                            <tr *ngFor=\"let feature of plan.features\">\n                                <td>\n                                    <i class=\"fa fa-times\" aria-hidden=\"true\" *ngIf=\"feature.available === '0'\"></i>\n                                    <i class=\"fa fa-check\" aria-hidden=\"true\" *ngIf=\"feature.available !== '0' && feature.description === 'Custom Cloud Service'\"></i>\n                                     {{feature.value}} {{feature.description}}\n                                </td>\n                            </tr>\n                        </table>\n                    </div>\n                    <div class=\"panel-footer\">\n                        <a (click)=\"selectedPlan(plan)\" class=\"btn\" [class.btn-primary]=\"i==0\" [class.btn-success]=\"i==1\" [class.btn-info]=\"i==2\" role=\"button\">Add to Cart <i class=\"fa fa-shopping-cart\" aria-hidden=\"true\"></i>\n    </a></div>\n                </div>\n            </div>\n        </div>\n    </div>\n  ","styles":["\n    body{margin-top:20px}.panel{text-align:center;font-weight:bold}.panel:hover{box-shadow:0 1px 5px rgba(0,0,0,0.4),0 1px 5px rgba(130,130,130,0.35)}.panel-body{padding:0px;text-align:center}.panel-title{color:black;font-weight:bold}.panel-primary>.panel-heading{background:#3a5a73;color:black;background-color:#6999c1;border-color:#6999c1}.panel-primary{border-color:#6999c1}.panel-success>.panel-heading{background:#86a24d;color:black;background-color:#86a24d;border-color:#86a24d}.panel-success{border-color:#86a24d}.panel-info{border-color:#fda131}.panel-info>.panel-heading{background:#fda131;color:black;background-color:#fda131;border-color:#fda131}.panel-footer>.btn-info{background:#854000;border-color:#854000}.panel-footer>.btn-success{background:#30642b;border-color:#30642b}.panel-footer>.btn-primary{background:#3a5a73;border-color:#3a5a73}.the-price{background-color:rgba(220,220,220,0.17);box-shadow:0 1px 0 #dcdcdc, inset 0 1px 0 #fff;padding:20px;margin:0}.the-price h1{line-height:1em;padding:0;margin:0}.subscript{font-size:25px}.cnrflash{position:absolute;top:-9px;right:4px;z-index:1;overflow:hidden;width:100px;height:100px;border-radius:3px 5px 3px 0}.cnrflash-inner{position:absolute;bottom:0;right:0;width:145px;height:145px;-ms-transform:rotate(45deg);-o-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;-moz-transform-origin:100% 100%;background-image:linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.1) 50%),linear-gradient(0deg, transparent 0%, rgba(1,1,1,0.2) 50%);background-size:4px,auto, auto,auto;background-color:#aa0101;box-shadow:0 3px 3px 0 rgba(1,1,1,0.5),0 1px 0 0 rgba(1,1,1,0.5),inset 0 -1px 8px 0 rgba(255,255,255,0.3),inset 0 -1px 0 0 rgba(255,255,255,0.2)}.cnrflash-inner:before,.cnrflash-inner:after{content:\" \";display:block;position:absolute;bottom:-16px;width:0;height:0;border:8px solid #800000}.cnrflash-inner:before{left:1px;border-bottom-color:transparent;border-right-color:transparent}.cnrflash-inner:after{right:0;border-bottom-color:transparent;border-left-color:transparent}.cnrflash-label{position:absolute;bottom:0;left:0;display:block;width:100%;padding-bottom:5px;color:#fff;text-shadow:0 1px 1px rgba(1,1,1,0.8);font-size:0.95em;font-weight:bold;text-align:center}\n  "]}]}],"members":{"plans":[{"__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":{"PlanOptionsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"plan-options","template":"\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-xs-12 col-md-3\" *ngFor=\"let plan of plans;let i=index\">\n                <div class=\"panel\" [class.panel-primary]=\"i==0\" [class.panel-success]=\"i==1\" [class.panel-info]=\"i==2\">\n                    <div class=\"cnrflash\" *ngIf=\"i==1\">\n                        <div class=\"cnrflash-inner\">\n                            <span class=\"cnrflash-label\">MOST\n                                <br>\n                                POPULAR</span>\n                        </div>\n                    </div>\n                    <div class=\"panel-heading\">\n                        <h3 class=\"panel-title\">\n                            {{plan.name}}</h3>\n                    </div>\n                    <div class=\"panel-body\">\n                        <div class=\"the-price\">\n                            <h1>\n                                {{plan.pricing | currency:'USD':true}}<span class=\"subscript\">{{plan.billing === 'monthly' ? '/mo':'annual'}}</span></h1>\n                            <small>{{plan.offer}}</small>\n                        </div>\n                        <table class=\"table table-striped\" >\n                            <tr *ngFor=\"let feature of plan.features\">\n                                <td>\n                                    <i class=\"fa fa-times\" aria-hidden=\"true\" *ngIf=\"feature.available === '0'\"></i>\n                                    <i class=\"fa fa-check\" aria-hidden=\"true\" *ngIf=\"feature.available !== '0' && feature.description === 'Custom Cloud Service'\"></i>\n                                     {{feature.value}} {{feature.description}}\n                                </td>\n                            </tr>\n                        </table>\n                    </div>\n                    <div class=\"panel-footer\">\n                        <a (click)=\"selectedPlan(plan)\" class=\"btn\" [class.btn-primary]=\"i==0\" [class.btn-success]=\"i==1\" [class.btn-info]=\"i==2\" role=\"button\">Add to Cart <i class=\"fa fa-shopping-cart\" aria-hidden=\"true\"></i>\n    </a></div>\n                </div>\n            </div>\n        </div>\n    </div>\n  ","styles":["\n    body{margin-top:20px}.panel{text-align:center;font-weight:bold}.panel:hover{box-shadow:0 1px 5px rgba(0,0,0,0.4),0 1px 5px rgba(130,130,130,0.35)}.panel-body{padding:0px;text-align:center}.panel-title{color:black;font-weight:bold}.panel-primary>.panel-heading{background:#3a5a73;color:black;background-color:#6999c1;border-color:#6999c1}.panel-primary{border-color:#6999c1}.panel-success>.panel-heading{background:#86a24d;color:black;background-color:#86a24d;border-color:#86a24d}.panel-success{border-color:#86a24d}.panel-info{border-color:#fda131}.panel-info>.panel-heading{background:#fda131;color:black;background-color:#fda131;border-color:#fda131}.panel-footer>.btn-info{background:#854000;border-color:#854000}.panel-footer>.btn-success{background:#30642b;border-color:#30642b}.panel-footer>.btn-primary{background:#3a5a73;border-color:#3a5a73}.the-price{background-color:rgba(220,220,220,0.17);box-shadow:0 1px 0 #dcdcdc, inset 0 1px 0 #fff;padding:20px;margin:0}.the-price h1{line-height:1em;padding:0;margin:0}.subscript{font-size:25px}.cnrflash{position:absolute;top:-9px;right:4px;z-index:1;overflow:hidden;width:100px;height:100px;border-radius:3px 5px 3px 0}.cnrflash-inner{position:absolute;bottom:0;right:0;width:145px;height:145px;-ms-transform:rotate(45deg);-o-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;-moz-transform-origin:100% 100%;background-image:linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.1) 50%),linear-gradient(0deg, transparent 0%, rgba(1,1,1,0.2) 50%);background-size:4px,auto, auto,auto;background-color:#aa0101;box-shadow:0 3px 3px 0 rgba(1,1,1,0.5),0 1px 0 0 rgba(1,1,1,0.5),inset 0 -1px 8px 0 rgba(255,255,255,0.3),inset 0 -1px 0 0 rgba(255,255,255,0.2)}.cnrflash-inner:before,.cnrflash-inner:after{content:\" \";display:block;position:absolute;bottom:-16px;width:0;height:0;border:8px solid #800000}.cnrflash-inner:before{left:1px;border-bottom-color:transparent;border-right-color:transparent}.cnrflash-inner:after{right:0;border-bottom-color:transparent;border-left-color:transparent}.cnrflash-label{position:absolute;bottom:0;left:0;display:block;width:100%;padding-bottom:5px;color:#fff;text-shadow:0 1px 1px rgba(1,1,1,0.8);font-size:0.95em;font-weight:bold;text-align:center}\n  "]}]}],"members":{"plans":[{"__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"}]}}}}]