{"version":3,"sources":["webpack:///./src/@core/libs/i18n/utils.js","webpack:///./src/@core/libs/i18n/index.js","webpack:///./src/views/website/pages/products/product-details.vue?bede","webpack:///src/views/website/pages/products/product-details.vue","webpack:///./src/views/website/pages/products/product-details.vue?395a","webpack:///./src/views/website/pages/products/product-details.vue?8b62","webpack:///./src/views/website/pages/products/product-details.vue?f4a5"],"names":["t","key","vm","getCurrentInstance","proxy","$t","_","useUtils","utils","render","_vm","this","_h","$createElement","_c","_self","staticClass","class","isImageExpand","on","$event","attrs","productDetailsForWebsite","imagePath","replace","$store","getters","_v","_s","name","products","clickImg","allProducts","mainCategory","subCategory","productsDetails","domProps","description","settings","price","_e","_l","product","i","id","imageDto","path","staticRenderFns","component"],"mappings":"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","file":"js/chunk-4350338e.3b40b7cb.js","sourcesContent":["import { getCurrentInstance } from '@vue/composition-api'\r\n\r\n/**\r\n * Returns translated string if i18n package is available to Vue\r\n * If i18n is not configured then it will simply return what is being passed\r\n * Useful if you don't know if i18n is configured or not\r\n * Used in @core files to handle absence of i18n without errors\r\n * @param {String} key i18n key to use for translation\r\n */\r\nexport const t = key => {\r\n  const vm = getCurrentInstance().proxy\r\n  return vm.$t ? vm.$t(key) : key\r\n}\r\n\r\nexport const _ = null\r\n","import * as utils from './utils'\r\n\r\nexport const useUtils = () => ({\r\n  ...utils,\r\n})\r\n\r\nexport const _ = null\r\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"product-details\"},[_c('header',{staticClass:\"products-header border-bottom\",class:{ isImageExpand: _vm.isImageExpand },on:{\"click\":function($event){_vm.isImageExpand = !_vm.isImageExpand}}},[_c('img',{attrs:{\"src\":_vm.productDetailsForWebsite.imagePath\n          ? _vm.productDetailsForWebsite.imagePath.replace(\n              '~',\n              _vm.$store.getters['app/domainHost']\n            )\n          : ''}}),_c('div',{staticClass:\"product-title\"},[_c('h1',[_vm._v(_vm._s(_vm.productDetailsForWebsite.name))]),_c('small',[_vm._v(_vm._s(_vm.t('website').products.clickImg))])])]),_c('b-container',[_c('div',{staticClass:\"product-content pt-2 px-lg-5\"},[_c('div',{staticClass:\"product-content-container\"},[_c('b-breadcrumb',{staticClass:\"px-0 pb-3\"},[_c('b-breadcrumb-item',{attrs:{\"active\":\"\"}},[_vm._v(_vm._s(_vm.t('website').products.allProducts))]),_c('b-breadcrumb-item',{attrs:{\"active\":\"\"}},[_vm._v(_vm._s(_vm.productDetailsForWebsite.mainCategory))]),_c('b-breadcrumb-item',{attrs:{\"active\":\"\"}},[_vm._v(_vm._s(_vm.productDetailsForWebsite.subCategory))])],1),_c('h4',{staticClass:\"mb-2\"},[_vm._v(_vm._s(_vm.t('website').products.productsDetails))]),_c('div',{staticClass:\"product-desc\",domProps:{\"innerHTML\":_vm._s(_vm.productDetailsForWebsite.description)}}),(_vm.settings.showPrices)?_c('span',{staticClass:\"price\"},[_c('strong',[_vm._v(_vm._s(_vm.t(\"price\"))+\" : \")]),_vm._v(_vm._s(_vm.productDetailsForWebsite.price ? _vm.productDetailsForWebsite.price : 0)+\" \"+_vm._s(_vm.t(\"syPond\")))]):_vm._e()],1),_c('div',{staticClass:\"products-cards-container pt-5\"},[_c('h2',{staticClass:\"mb-3\"},[_vm._v(_vm._s(_vm.t(\"otherProducts\")))]),_c('b-row',_vm._l((_vm.productsListOther),function(product,i){return _c('b-col',{key:i,staticClass:\"products-card-parent\",attrs:{\"cols\":\"12\",\"md\":\"6\",\"lg\":\"4\"}},[_c('div',{staticClass:\"products-card\"},[_c('router-link',{attrs:{\"to\":'/products/' + product.id}},[_c('h4',{staticClass:\"products-card-title\"},[_vm._v(_vm._s(product.name))]),_c('div',{staticClass:\"products-card-image-desc-container\"},[_c('img',{staticClass:\"products-card-image\",attrs:{\"src\":product.imageDto.path\n                        ? product.imageDto.path.replace(\n                            '~',\n                            _vm.$store.getters['app/domainHost']\n                          )\n                        : ''}}),_c('div',{staticClass:\"products-card-desc\",domProps:{\"innerHTML\":_vm._s(product.description)}}),_c('span',{staticClass:\"product-logo-title\"},[_vm._v(\"ALFAISAL \"),_c('span',{staticClass:\"line-border\"})])])])],1)])}),1)],1)])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"product-details\">\r\n    <header\r\n      class=\"products-header border-bottom\"\r\n      :class=\"{ isImageExpand }\"\r\n      @click=\"isImageExpand = !isImageExpand\"\r\n    >\r\n      <img\r\n        :src=\"\r\n          productDetailsForWebsite.imagePath\r\n            ? productDetailsForWebsite.imagePath.replace(\r\n                '~',\r\n                $store.getters['app/domainHost']\r\n              )\r\n            : ''\r\n        \"\r\n      />\r\n      <div class=\"product-title\">\r\n        <h1>{{ productDetailsForWebsite.name }}</h1>\r\n        <small>{{t('website').products.clickImg}}</small>\r\n      </div>\r\n    </header>\r\n    <b-container>\r\n      <div class=\"product-content pt-2 px-lg-5\">\r\n        <div class=\"product-content-container\">\r\n          <b-breadcrumb class=\"px-0 pb-3\">\r\n            <b-breadcrumb-item active>{{t('website').products.allProducts}}</b-breadcrumb-item>\r\n            <b-breadcrumb-item active>{{productDetailsForWebsite.mainCategory}}</b-breadcrumb-item>\r\n            <b-breadcrumb-item active>{{productDetailsForWebsite.subCategory}}</b-breadcrumb-item>\r\n          </b-breadcrumb>\r\n          <h4 class=\"mb-2\">{{t('website').products.productsDetails}}</h4>\r\n          <div\r\n            class=\"product-desc\"\r\n            v-html=\"productDetailsForWebsite.description\"\r\n          ></div>\r\n          <span class=\"price\" v-if=\"settings.showPrices\"\r\n            ><strong>{{ t(\"price\") }} : </strong\r\n            >{{\r\n              productDetailsForWebsite.price\r\n                ? productDetailsForWebsite.price\r\n                : 0\r\n            }}\r\n            {{ t(\"syPond\") }}</span\r\n          >\r\n        </div>\r\n        <div class=\"products-cards-container pt-5\">\r\n          <h2 class=\"mb-3\">{{ t(\"otherProducts\") }}</h2>\r\n          <b-row>\r\n            <b-col\r\n              cols=\"12\"\r\n              md=\"6\"\r\n              lg=\"4\"\r\n              v-for=\"(product, i) in productsListOther\"\r\n              :key=\"i\"\r\n              class=\"products-card-parent\"\r\n            >\r\n              <div class=\"products-card\">\r\n                <router-link :to=\"'/products/' + product.id\">\r\n                  <h4 class=\"products-card-title\">{{ product.name }}</h4>\r\n                  <div class=\"products-card-image-desc-container\">\r\n                    <img\r\n                      class=\"products-card-image\"\r\n                      :src=\"\r\n                        product.imageDto.path\r\n                          ? product.imageDto.path.replace(\r\n                              '~',\r\n                              $store.getters['app/domainHost']\r\n                            )\r\n                          : ''\r\n                      \"\r\n                    />\r\n                    <div\r\n                      class=\"products-card-desc\"\r\n                      v-html=\"product.description\"\r\n                    ></div>\r\n                    <span class=\"product-logo-title\"\r\n                      >ALFAISAL <span class=\"line-border\"></span\r\n                    ></span>\r\n                  </div>\r\n                </router-link>\r\n              </div>\r\n            </b-col>\r\n          </b-row>\r\n        </div>\r\n      </div>\r\n    </b-container>\r\n  </div>\r\n</template>\r\n<script>\r\n  import { useUtils as useI18nUtils } from \"@core/libs/i18n\";\r\n  import { mapGetters, mapActions, mapState } from \"vuex\";\r\n  export default {\r\n    setup() {\r\n      const { t } = useI18nUtils();\r\n      return { t };\r\n    },\r\n    props: {\r\n      id: String,\r\n    },\r\n    data: () => ({\r\n      isImageExpand: true,\r\n    }),\r\n    metaInfo() {\r\n      return {\r\n        titleTemplate: \"Al Faisal - \" + this.$t(\"title.products\") + ' - ' + this.productDetailsForWebsite.name,\r\n        htmlAttrs: {\r\n          lang: this.$i18n.locale,\r\n        },\r\n        meta: [\r\n          {\r\n            name: \"description\",\r\n            content: this.productDetailsForWebsite.description,\r\n          },\r\n          {\r\n            name: \"keywords\",\r\n            content: \"keywords, keywords, keywords, ...\",\r\n          },\r\n        ],\r\n      };\r\n    },\r\n    created() {\r\n      this.getProductsByIdForWebsite(+this.id);\r\n    },\r\n    computed: {\r\n      ...mapState({\r\n        settings: (state) => state.setting.settings,\r\n      }),\r\n      ...mapGetters([\"productDetailsForWebsite\", \"productsListOther\"]),\r\n    },\r\n    methods: {\r\n      ...mapActions([\"getProductsByIdForWebsite\"]),\r\n    },\r\n    watch: {\r\n      id(id) {\r\n        this.getProductsByIdForWebsite(+id);\r\n      },\r\n    },\r\n    beforeDestroy() {\r\n      this.$store.dispatch(\"app/setLoadingWebsite\", true);\r\n    },\r\n  };\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n  @import \"src/assets/scss/variables/variables.scss\";\r\n  .product-details {\r\n    .products-header {\r\n      cursor: pointer;\r\n      transition: 0.4s;\r\n      position: relative;\r\n      img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: 0.4s;\r\n      }\r\n      .product-title {\r\n        transition: 0.4s;\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100%;\r\n        width: 100%;\r\n        color: #fff;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        flex-direction: column;\r\n        opacity: 0;\r\n        h1 {\r\n          color: #fff;\r\n        }\r\n      }\r\n      &.isImageExpand {\r\n        height: 400px;\r\n        .product-title {\r\n          opacity: 1;\r\n          background: rgba($color: #000000, $alpha: 0.6);\r\n        }\r\n      }\r\n    }\r\n    .product-content {\r\n      .product-content-container {\r\n        position: relative;\r\n        p {\r\n          line-height: 1.7;\r\n        }\r\n        .price {\r\n          display: inline-block;\r\n          border-bottom: solid 2px $secondaryPrimary;\r\n          padding: 6px 8px;\r\n          position: absolute;\r\n          right: 0;\r\n          color: $primary;\r\n          font-size: 18px;\r\n        }\r\n      }\r\n      .products-cards-container {\r\n        position: relative;\r\n        h2 {\r\n          color: $primary;\r\n        }\r\n        .products-card-parent {\r\n          margin-bottom: 2rem;\r\n          .products-card {\r\n            padding: 10px 0;\r\n            width: 300px;\r\n            margin: auto;\r\n            position: relative;\r\n            &:after {\r\n              content: \"\";\r\n              position: absolute;\r\n              left: 0;\r\n              height: 3px;\r\n              background: $secondaryPrimary;\r\n              top: 0;\r\n              width: 100%;\r\n            }\r\n            .products-card-title {\r\n              transition: all 0.4s linear;\r\n              margin: 0;\r\n              position: absolute;\r\n              top: 50%;\r\n              left: 50%;\r\n              transform: translate(-50%, -50%);\r\n              z-index: 2;\r\n              color: #fff;\r\n            }\r\n            .products-card-image-desc-container {\r\n              position: relative;\r\n              &:after {\r\n                content: \"\";\r\n                position: absolute;\r\n                left: 0;\r\n                top: 0;\r\n                bottom: 16px;\r\n                width: 100%;\r\n                background: rgba(0, 0, 0, 0.5);\r\n                z-index: 1;\r\n              }\r\n              .products-card-image {\r\n                height: 340px;\r\n                width: 100%;\r\n                z-index: 0;\r\n              }\r\n              .products-card-desc {\r\n                pointer-events: none;\r\n                transition: all 0.4s linear;\r\n                position: absolute;\r\n                left: -100%;\r\n                bottom: 40px;\r\n                z-index: -1;\r\n                width: calc(100% + 14px);\r\n                color: #fff;\r\n                background: $secondaryPrimary;\r\n                padding: 30px 1rem;\r\n                padding-right: calc(1rem + 15px);\r\n                text-align: center;\r\n                line-height: 2;\r\n                opacity: 0;\r\n                visibility: hidden;\r\n                &:after {\r\n                  content: \"\";\r\n                  position: absolute;\r\n                  bottom: -15px;\r\n                  width: 15px;\r\n                  height: 15px;\r\n                  right: 0;\r\n                  background: #a97216;\r\n                  clip-path: polygon(0 0, 100% 0, 100% 100%);\r\n                }\r\n              }\r\n            }\r\n            .product-logo-title {\r\n              display: flex;\r\n              align-items: center;\r\n              letter-spacing: 12px;\r\n              font-size: 12px;\r\n              color: $primary;\r\n              .line-border {\r\n                margin-left: 12px;\r\n                flex-grow: 1;\r\n                height: 2px;\r\n                background: $secondaryPrimary;\r\n              }\r\n            }\r\n            &:hover {\r\n              .products-card-title {\r\n                top: 20%;\r\n              }\r\n              .products-card-image-desc-container {\r\n                .products-card-desc {\r\n                  left: 0;\r\n                  z-index: 2;\r\n                  opacity: 1;\r\n                  visibility: visible;\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  [dir=\"ltr\"] {\r\n    .product-details {\r\n      .product-content {\r\n        .products-cards-container {\r\n          .products-card-parent {\r\n            .products-card {\r\n              .products-card-image-desc-container {\r\n                .products-card-desc {\r\n                  &:after {\r\n                    clip-path: polygon(0 0, 100% 0, 0 100%);\r\n                  }\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\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-details.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-details.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./product-details.vue?vue&type=template&id=f0473a74&scoped=true&\"\nimport script from \"./product-details.vue?vue&type=script&lang=js&\"\nexport * from \"./product-details.vue?vue&type=script&lang=js&\"\nimport style0 from \"./product-details.vue?vue&type=style&index=0&id=f0473a74&lang=scss&scoped=true&\"\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  \"f0473a74\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./product-details.vue?vue&type=style&index=0&id=f0473a74&lang=scss&scoped=true&\""],"sourceRoot":""}