{"version":3,"sources":["webpack:///./src/views/Product.vue?40db","webpack:///./node_modules/core-js/modules/es.array.find.js","webpack:///./src/views/Product.vue?2b34","webpack:///src/views/Product.vue","webpack:///./src/views/Product.vue?880b","webpack:///./src/views/Product.vue"],"names":["$","$find","find","addToUnscopables","arrayMethodUsesToLength","FIND","SKIPS_HOLES","USES_TO_LENGTH","Array","target","proto","forced","callbackfn","this","arguments","length","undefined","render","_vm","_h","$createElement","_c","_self","staticClass","staticStyle","ref","attrs","currentImage","_l","product","image","i","key","on","$event","changeImage","_v","_s","title","_f","price","description","brand","size","camera","cpu","memory","display","battery","addProductToCart","staticRenderFns","name","data","$store","state","products","id","methods","images","n","component"],"mappings":"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","file":"js/chunk-09e15c7e.0a217898.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Product.vue?vue&type=style&index=0&id=b9a631b0&scoped=true&lang=css&\"","'use strict';\nvar $ = require('../internals/export');\nvar $find = require('../internals/array-iteration').find;\nvar addToUnscopables = require('../internals/add-to-unscopables');\nvar arrayMethodUsesToLength = require('../internals/array-method-uses-to-length');\n\nvar FIND = 'find';\nvar SKIPS_HOLES = true;\n\nvar USES_TO_LENGTH = arrayMethodUsesToLength(FIND);\n\n// Shouldn't skip holes\nif (FIND in []) Array(1)[FIND](function () { SKIPS_HOLES = false; });\n\n// `Array.prototype.find` method\n// https://tc39.github.io/ecma262/#sec-array.prototype.find\n$({ target: 'Array', proto: true, forced: SKIPS_HOLES || !USES_TO_LENGTH }, {\n  find: function find(callbackfn /* , that = undefined */) {\n    return $find(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);\n  }\n});\n\n// https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables(FIND);\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\",staticStyle:{\"padding\":\"6rem 0px\"}},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-sm-5 border-right\"},[_c('aside',[_c('article',{staticClass:\"gallery-wrap\"},[_c('div',{staticClass:\"img-big-wrap\"},[_c('div',{ref:\"imageContainer\",staticStyle:{\"padding\":\"2rem\"}},[_c('a',{attrs:{\"href\":\"#\"}},[_c('img',{staticStyle:{\"width\":\"100%\",\"height\":\"100%\"},attrs:{\"src\":_vm.currentImage}})])])]),_c('div',{staticClass:\"img-small-wrap\"},_vm._l((_vm.product.images),function(image,i){return _c('div',{key:i,staticClass:\"item-gallery\",on:{\"click\":function($event){return _vm.changeImage(i)}}},[_c('img',{attrs:{\"src\":image}})])}),0)])])]),_c('div',{staticClass:\"col-sm-7\"},[_c('aside',[_c('article',{staticClass:\"card-body p-5\"},[_c('h3',{staticClass:\"title mb-3\"},[_vm._v(_vm._s(_vm.product.title))]),_c('p',{staticClass:\"price-detail-wrap\"},[_c('span',{staticClass:\"price h3 text-warning\"},[_c('span',{staticClass:\"currency\"}),_c('span',{staticClass:\"num\"},[_vm._v(_vm._s(_vm._f(\"priceFormatter\")(_vm.product.price)))])])]),_c('dl',{staticClass:\"item-property\"},[_c('dt',[_vm._v(\"Description\")]),_c('dd',[_c('p',{staticClass:\"text-capitalize\"},[_vm._v(_vm._s(_vm.product.description))])])]),_c('dl',{staticClass:\"param param-feature\"},[_c('dt',[_vm._v(\"Brand\")]),_c('dd',{staticClass:\"text-capitalize\"},[_vm._v(_vm._s(_vm.product.brand))])]),_c('dl',{staticClass:\"param param-feature\"},[_c('dt',[_vm._v(\"Size\")]),_c('dd',[_vm._v(_vm._s(_vm.product.size))])]),_c('dl',{staticClass:\"param param-feature\"},[_c('dt',[_vm._v(\"Camera\")]),_c('dd',[_vm._v(_vm._s(_vm.product.camera))])]),_c('dl',{staticClass:\"param param-feature\"},[_c('dt',[_vm._v(\"CPU\")]),_c('dd',[_vm._v(_vm._s(_vm.product.cpu))])]),_c('dl',{staticClass:\"param param-feature\"},[_c('dt',[_vm._v(\"Memory\")]),_c('dd',[_vm._v(_vm._s(_vm.product.memory))])]),_c('dl',{staticClass:\"param param-feature\"},[_c('dt',[_vm._v(\"Display\")]),_c('dd',[_vm._v(_vm._s(_vm.product.display))])]),_c('dl',{staticClass:\"param param-feature\"},[_c('dt',[_vm._v(\"Battery\")]),_c('dd',[_vm._v(_vm._s(_vm.product.battery))])]),_c('hr'),_c('button',{staticClass:\"btn btn-lg btn-outline-primary text-uppercase\",on:{\"click\":function($event){return _vm.addProductToCart(_vm.product)}}},[_c('i',{staticClass:\"fa fa-shopping-cart\"}),_vm._v(\" Add to cart \")])])])])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"container\" style=\"padding: 6rem 0px;\">\r\n    <div class=\"card\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-5 border-right\">\r\n          <aside>\r\n            <article class=\"gallery-wrap\">\r\n              <div class=\"img-big-wrap\">\r\n                <div style=\"padding: 2rem\" ref=\"imageContainer\">\r\n                  <a href=\"#\"\r\n                    ><img :src=\"currentImage\" style=\"width: 100%; height: 100%\"\r\n                  /></a>\r\n                </div>\r\n              </div>\r\n              <div class=\"img-small-wrap\">\r\n                <div\r\n                  v-for=\"(image, i) in product.images\"\r\n                  :key=\"i\"\r\n                  class=\"item-gallery\"\r\n                  @click=\"changeImage(i)\"\r\n                >\r\n                  <img :src=\"image\" />\r\n                </div>\r\n              </div>\r\n            </article>\r\n          </aside>\r\n        </div>\r\n        <div class=\"col-sm-7\">\r\n          <aside>\r\n            <article class=\"card-body p-5\">\r\n              <h3 class=\"title mb-3\">{{ product.title }}</h3>\r\n              <p class=\"price-detail-wrap\">\r\n                <span class=\"price h3 text-warning\">\r\n                  <span class=\"currency\"></span\r\n                  ><span class=\"num\">{{ product.price | priceFormatter }}</span>\r\n                </span>\r\n              </p>\r\n              <dl class=\"item-property\">\r\n                <dt>Description</dt>\r\n                <dd>\r\n                  <p class=\"text-capitalize\">{{ product.description }}</p>\r\n                </dd>\r\n              </dl>\r\n              <dl class=\"param param-feature\">\r\n                <dt>Brand</dt>\r\n                <dd class=\"text-capitalize\">{{ product.brand }}</dd>\r\n              </dl>\r\n              <dl class=\"param param-feature\">\r\n                <dt>Size</dt>\r\n                <dd>{{ product.size }}</dd>\r\n              </dl>\r\n              <dl class=\"param param-feature\">\r\n                <dt>Camera</dt>\r\n                <dd>{{ product.camera }}</dd>\r\n              </dl>\r\n              <dl class=\"param param-feature\">\r\n                <dt>CPU</dt>\r\n                <dd>{{ product.cpu }}</dd>\r\n              </dl>\r\n              <dl class=\"param param-feature\">\r\n                <dt>Memory</dt>\r\n                <dd>{{ product.memory }}</dd>\r\n              </dl>\r\n              <dl class=\"param param-feature\">\r\n                <dt>Display</dt>\r\n                <dd>{{ product.display }}</dd>\r\n              </dl>\r\n              <dl class=\"param param-feature\">\r\n                <dt>Battery</dt>\r\n                <dd>{{ product.battery }}</dd>\r\n              </dl>\r\n              <hr />\r\n              <button\r\n                @click=\"addProductToCart(product)\"\r\n                class=\"btn btn-lg btn-outline-primary text-uppercase\"\r\n              >\r\n                <i class=\"fa fa-shopping-cart\"></i> Add to cart\r\n              </button>\r\n            </article>\r\n          </aside>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapActions } from \"vuex\";\r\n\r\nexport default {\r\n  name: \"ProductDetail\",\r\n  data() {\r\n    return {\r\n      product: this.$store.state.products.find(\r\n        p => p.id === +this.$route.params.id\r\n      ),\r\n      id: 0,\r\n      currentImage: this.$store.state.products.find(\r\n        p => p.id === +this.$route.params.id\r\n      ).images[0]\r\n    };\r\n  },\r\n  methods: {\r\n    ...mapActions([\"addProductToCart\"]),\r\n    changeImage(n) {\r\n      this.currentImage = this.product.images[n];\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.gallery-wrap .img-big-wrap img {\r\n  height: 450px;\r\n  width: auto;\r\n  display: inline-block;\r\n}\r\n.gallery-wrap .img-small-wrap .item-gallery {\r\n  width: 60px;\r\n  height: 60px;\r\n  border: 1px solid #ddd;\r\n  margin: 7px 2px;\r\n  display: inline-block;\r\n  overflow: hidden;\r\n}\r\n.gallery-wrap .img-small-wrap {\r\n  text-align: center;\r\n}\r\n.gallery-wrap .img-small-wrap img {\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Product.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Product.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Product.vue?vue&type=template&id=b9a631b0&scoped=true&\"\nimport script from \"./Product.vue?vue&type=script&lang=js&\"\nexport * from \"./Product.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Product.vue?vue&type=style&index=0&id=b9a631b0&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"b9a631b0\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}