[{"__symbolic":"module","version":3,"metadata":{"CartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"shopping-cart","styles":["\n      .table>tbody>tr>td,.table>tfoot>tr>td{vertical-align:middle}@media screen and (max-width: 600px){table#cart tbody td .form-control{width:20%;display:inline !important}.actions .btn{width:36%;margin:1.5em 0}.actions .btn-info{float:left}.actions .btn-danger{float:right}table#cart thead{display:none}table#cart tbody td{display:block;padding:.6rem;min-width:320px}table#cart tbody tr td:first-child{background:#6999c1;color:#fff}table#cart tbody td:before{content:attr(data-th);font-weight:bold;display:inline-block;width:8rem}table#cart tfoot td{display:block}table#cart tfoot td .btn{display:block}}\n    "],"template":"\n      <div class=\"container\">\n      \t<table id=\"cart\" class=\"table table-hover table-condensed\">\n      \t\t<thead>\n      \t\t\t<tr>\n      \t\t\t\t<th style=\"width:50%\">Product</th>\n      \t\t\t\t<th style=\"width:10%\">Price</th>\n      \t\t\t\t<th style=\"width:8%\">Quantity</th>\n      \t\t\t\t<th style=\"width:22%\" class=\"text-center\">Subtotal</th>\n      \t\t\t\t<th style=\"width:10%\"></th>\n      \t\t\t</tr>\n      \t\t</thead>\n      \t\t<tbody>\n      \t\t\t<tr *ngFor=\"let lineItem of shoppingCart?.lineItems\">\n      \t\t\t\t<td data-th=\"Product\">\n      \t\t\t\t\t<div class=\"row\">\n      \t\t\t\t\t\t<div class=\"col-sm-2 hidden-xs\"><img src=\"https://placeimg.com/100/100/any\" alt=\"...\" class=\"img-responsive\" /></div>\n      \t\t\t\t\t\t<div class=\"col-sm-10\">\n      \t\t\t\t\t\t\t<h4 class=\"nomargin\">{{lineItem.productName}}</h4>\n      \t\t\t\t\t\t\t<p>{{lineItem.description}}</p>\n      \t\t\t\t\t\t</div>\n      \t\t\t\t\t</div>\n      \t\t\t\t</td>\n      \t\t\t\t<td data-th=\"Price\">{{lineItem.unitPrice | currency:'USD':true}}</td>\n      \t\t\t\t<td data-th=\"Quantity\">\n      \t\t\t\t\t<input type=\"number\" class=\"form-control text-center\" value=\"1\" readonly>\n      \t\t\t\t</td>\n      \t\t\t\t<td data-th=\"Subtotal\" class=\"text-center\">{{lineItem.unitPrice}}</td>\n      \t\t\t\t<td class=\"actions\" data-th=\"\">\n      \t\t\t\t\t<button class=\"btn btn-danger btn-sm\" (click)=\"deleteItem(lineItem)\"><i class=\"fa fa-trash-o\"></i></button>\n      \t\t\t\t</td>\n      \t\t\t</tr>\n      \t\t</tbody>\n      \t\t<tfoot>\n      \t\t\t<cart-total [items]=\"shoppingCart?.lineItems\" (checkOutEvent)=\"onCheckOut()\">\n      \t\t\t</cart-total>\n      \t\t</tfoot>\n      \t</table>\n      </div>\n    "}]}],"members":{"shoppingCart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"checkOutEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deleteEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deleteItem":[{"__symbolic":"method"}],"onCheckOut":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"shopping-cart","styles":["\n      .table>tbody>tr>td,.table>tfoot>tr>td{vertical-align:middle}@media screen and (max-width: 600px){table#cart tbody td .form-control{width:20%;display:inline !important}.actions .btn{width:36%;margin:1.5em 0}.actions .btn-info{float:left}.actions .btn-danger{float:right}table#cart thead{display:none}table#cart tbody td{display:block;padding:.6rem;min-width:320px}table#cart tbody tr td:first-child{background:#6999c1;color:#fff}table#cart tbody td:before{content:attr(data-th);font-weight:bold;display:inline-block;width:8rem}table#cart tfoot td{display:block}table#cart tfoot td .btn{display:block}}\n    "],"template":"\n      <div class=\"container\">\n      \t<table id=\"cart\" class=\"table table-hover table-condensed\">\n      \t\t<thead>\n      \t\t\t<tr>\n      \t\t\t\t<th style=\"width:50%\">Product</th>\n      \t\t\t\t<th style=\"width:10%\">Price</th>\n      \t\t\t\t<th style=\"width:8%\">Quantity</th>\n      \t\t\t\t<th style=\"width:22%\" class=\"text-center\">Subtotal</th>\n      \t\t\t\t<th style=\"width:10%\"></th>\n      \t\t\t</tr>\n      \t\t</thead>\n      \t\t<tbody>\n      \t\t\t<tr *ngFor=\"let lineItem of shoppingCart?.lineItems\">\n      \t\t\t\t<td data-th=\"Product\">\n      \t\t\t\t\t<div class=\"row\">\n      \t\t\t\t\t\t<div class=\"col-sm-2 hidden-xs\"><img src=\"https://placeimg.com/100/100/any\" alt=\"...\" class=\"img-responsive\" /></div>\n      \t\t\t\t\t\t<div class=\"col-sm-10\">\n      \t\t\t\t\t\t\t<h4 class=\"nomargin\">{{lineItem.productName}}</h4>\n      \t\t\t\t\t\t\t<p>{{lineItem.description}}</p>\n      \t\t\t\t\t\t</div>\n      \t\t\t\t\t</div>\n      \t\t\t\t</td>\n      \t\t\t\t<td data-th=\"Price\">{{lineItem.unitPrice | currency:'USD':true}}</td>\n      \t\t\t\t<td data-th=\"Quantity\">\n      \t\t\t\t\t<input type=\"number\" class=\"form-control text-center\" value=\"1\" readonly>\n      \t\t\t\t</td>\n      \t\t\t\t<td data-th=\"Subtotal\" class=\"text-center\">{{lineItem.unitPrice}}</td>\n      \t\t\t\t<td class=\"actions\" data-th=\"\">\n      \t\t\t\t\t<button class=\"btn btn-danger btn-sm\" (click)=\"deleteItem(lineItem)\"><i class=\"fa fa-trash-o\"></i></button>\n      \t\t\t\t</td>\n      \t\t\t</tr>\n      \t\t</tbody>\n      \t\t<tfoot>\n      \t\t\t<cart-total [items]=\"shoppingCart?.lineItems\" (checkOutEvent)=\"onCheckOut()\">\n      \t\t\t</cart-total>\n      \t\t</tfoot>\n      \t</table>\n      </div>\n    "}]}],"members":{"shoppingCart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"checkOutEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deleteEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deleteItem":[{"__symbolic":"method"}],"onCheckOut":[{"__symbolic":"method"}]}}}}]