{"version":3,"sources":["webpack://multicontent-widget/resources/js/src/components/ItemList/CustomItemSearch.vue","webpack://multicontent-widget/./resources/js/src/helper/debounce.js","webpack://multicontent-widget/./resources/js/src/components/ItemList/CustomItemSearch.vue","webpack://multicontent-widget/./resources/js/src/components/ItemList/CustomItemSearch.vue?7873","webpack://multicontent-widget/./resources/js/src/components/ItemList/CustomItemSearch.vue?49d9"],"names":["debounce","callback","timeout","defaultValue","args","arguments","isNullOrUndefined","__timeout","window","clearTimeout","setTimeout","apply","_toConsumableArray"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;AACA;AACA;AACA;AACA;AAEA;EAEA;EAEA;IACA;MAAA;MAAA;MAAA;IAAA;IACA;MAAA;MAAA;MAAA;IAAA;IACA,gBACA;MACA;IACA;IACA,qBACA;MACA;MACA;IACA;IACA,SACA;MACA;MACA;IACA;IACA,iBACA;MACA;MACA;IACA;IACA;MACA;MACA;IACA;EACA;EAEA;IACA;MACA;MACA;MACA;MACA;IACA;EACA;EAEA;IAEA,0DACA;MACA;MACA;MACA;MAEA;IACA;IAEA,wCACA;MACA;IACA;EAAA,GAEA;IACA;MAAA;IAAA;IACA;MAAA;IAAA;IACA;MAAA;IAAA;EACA,GACA;EAGA,4BACA;IAAA;IACA,0GACA;MACA;IACA;IAEA,2BACA;MACA;MAEA;MAEA;IACA;EACA;EAEA,SACA;IACA,0BACA;MACA,yCACA;QACA,mFACA;UACA;QACA,OAEA;UACA;QACA;MACA;IACA;IAEA,kDACA;MACA,iDACA;QACA;MACA,OAEA;QACA;UAAA;UAAA;UAAA;QAAA;;QAEA;QACA;MACA;IACA;IAEA;IACA,qDACA;MACA;MAEA,2LACA;QACA;MACA;IACA;EACA;EACA,OACA;IACA;IACA,wDACA;MACA,6BACA;QACA;MACA;IACA;IAEA;MACA;MACA;QACA;MACA;IACA;EACA;AACA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/L0D;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,QAAQA,CAACC,QAAQ,EAAEC,OAAO,EAC1C;EACEA,OAAO,GAAGC,qDAAY,CAACD,OAAO,EAAE,CAAC,CAAC;EAClC,IAAIA,OAAO,GAAG,CAAC,EACf;IACE,OAAO,YACP;MACE,IAAME,IAAI,GAAGC,SAAS;MAEtB,IAAI,CAACC,0DAAiB,CAACL,QAAQ,CAACM,SAAS,CAAC,EAC1C;QACEC,MAAM,CAACC,YAAY,CAACR,QAAQ,CAACM,SAAS,CAAC;MACzC;MACAN,QAAQ,CAACM,SAAS,GAAGC,MAAM,CAACE,UAAU,CAAC,YACvC;QACET,QAAQ,CAAAU,KAAA,SAAAC,kBAAA,CAAIR,IAAI,EAAC;MACnB,CAAC,EAAEF,OAAO,CAAC;IACb,CAAC;EACH;EAEA,OAAOD,QAAQ;AACjB,C;;;;;;;;;;;;;;;AC/B+F;AAC3B;AACL;;;AAG/D;AACA,CAAmG;AACnG,gBAAgB,oGAAU;AAC1B,EAAE,mFAAM;AACR,EAAE,wFAAM;AACR,EAAE,iGAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,+DAAe,iB;;;;;;;;;;;;;ACtCmL,CAAC,+DAAe,kLAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAtN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,kCAAkC;AAChD,KAAK;AACL;AACA;AACA;AACA,SAAS,mCAAmC;AAC5C;AACA;AACA;AACA,aAAa,2DAA2D;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB,2BAA2B,0BAA0B;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA,mBAAmB;AACnB;AACA;AACA,mBAAmB;AACnB,iBAAiB;AACjB,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA,uBAAuB;AACvB,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B;AAC3B,yBAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B;AAC3B,yBAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB;AACzB;AACA;AACA;AACA;AACA;AACA,6BAA6B;AAC7B,2BAA2B;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"chunks/multicontent-23.js","sourcesContent":["<template>\n  <div class=\"container-max\" :class=\"{'p-0' : $ceres.isShopBuilder}\">\n    <div class=\"position-relative\">\n      <div class=\"d-flex flex-grow-1 position-relative my-2\">\n        <input type=\"search\"\n               class=\"search-input flex-grow-1 px-3 py-2 min-width-none\"\n               :class=\"[ enableBorder ? 'border ' : '']\"\n               ref=\"searchInput\"\n               v-model=\"searchString\"\n               @input=\"onValueChanged($event.target.value)\"\n               @keyup.enter=\"search()\"\n               @focus=\"isSearchFocused = true\"\n               @blur=\"onBlurSearchField($event)\"\n               :autofocus=\"isShopBuilder\"\n               :placeholder=\"$translate('Ceres::Template.headerSearchPlaceholder')\"\n               :aria-label=\"$translate('Ceres::Template.headerSearchTerm')\">\n\n        <slot name=\"search-button\">\n          <button class=\"search-submit px-3 min-width-none\" :class=\"[loginLogo.length > 0 ? 'd-flex align-items-center' : '']\" type=\"submit\" :aria-label=\"$translate('Ceres::Template.headerSearch')\" @click=\"search()\">\n            <span v-if=\"loginLogo.length > 0\" class=\"logo-search\" :style=\"{ 'background-image' : `url('${loginLogo}')` }\"></span>\n            <icon v-else class=\"fa-fw\" icon=\"search\"  :class=\"logoClass\" :loading=\"autocompleteIsLoading\"></icon>\n          </button>\n        </slot>\n      </div>\n\n      <template v-if=\"isSearchFocused\">\n          <div v-show=\"(searchString.length >= searchMinLength && hasInitialInput) || $ceres.isShopBuilder\">\n              <slot name=\"autocomplete-suggestions\">\n                  <div class=\"autocomplete-suggestions shadow bg-white w-100\">\n                      <search-suggestion-item\n                          :show-images=\"showItemImages\"\n                          suggestion-type=\"item\">\n                      </search-suggestion-item>\n                  </div>\n              </slot>\n          </div>\n        </template>\n    </div>\n  </div>\n</template>\n\n<script>\nimport UrlService from '../../services/UrlService'\nimport { isNullOrUndefined, defaultValue } from '../../helper/utils'\nimport { pathnameEquals } from '../../helper/url'\nimport { mapState } from 'vuex'\nimport { debounce } from '../../helper/debounce'\n\nexport default {\n\n  name: 'custom-item-search',\n\n  props: {\n    logoClass: {type: String, default: \"\", required: false},\n    loginLogo: {type: String, default: \"\", required: false},\n    showItemImages:\n                {\n                  type: Boolean\n                },\n    forwardToSingleItem:\n                {\n                  type: Boolean,\n                  default: App.config.search.forwardToSingleItem\n                },\n    timeout:\n                {\n                  type: Number,\n                  default: 200\n                },\n    searchMinLength:\n        {\n          type: Number,\n          default: 2\n        },\n    enableBorder: {\n      type: Boolean,\n      default: false\n    }\n  },\n\n  data () {\n    return {\n      isSearchFocused: App.isShopBuilder,\n      onValueChanged: null,\n      searchString: '',\n      hasInitialInput: false\n    }\n  },\n\n  computed:\n    {\n        hasAutocompleteResults()\n        {\n            const item       = this.autocompleteResult.item;\n            const category   = this.autocompleteResult.category;\n            const suggestion = this.autocompleteResult.suggestion;\n\n            return App.isShopBuilder || (item && item.length) || (category && category.length) || (suggestion && suggestion.length);\n        },\n\n        isShopBuilder()\n        {\n            return App.isShopBuilder;\n        },\n\n        ...mapState({\n            autocompleteResult: state => state.itemSearch.autocompleteResult,\n            moduleSearchString: state => state.itemList.searchString,\n            autocompleteIsLoading: state => state.itemSearch.autocompleteIsLoading\n        })\n    },\n\n    \n      mounted()\n    {\n        this.onValueChanged = debounce(searchString =>\n        {\n            this.autocomplete(searchString);\n        }, defaultValue(this.timeout, 200));\n\n        this.$nextTick(() =>\n        {\n            const urlParams = UrlService.getUrlParams(document.location.search);\n\n            this.$store.commit(\"setItemListSearchString\", urlParams.query);\n\n            this.$refs.searchInput.value = !isNullOrUndefined(urlParams.query) ? urlParams.query : \"\";\n        });\n    },\n\n  methods:\n    {\n        search()\n        {\n            if (this.$refs.searchInput.value.length)\n            {\n                if (pathnameEquals(App.urls.search))\n                {\n                    this.$store.dispatch(\"searchItems\", this.$refs.searchInput.value);\n                }\n                else\n                {\n                    window.open(`${App.urls.search}?query=${ this.searchString }`, \"_self\", false);\n                }\n            }\n        },\n\n        autocomplete(searchString)\n        {\n            if (searchString.length >= this.searchMinLength)\n            {\n                this.$store.dispatch(\"loadItemSearchAutocomplete\", searchString);\n            }\n            else\n            {\n                this.$store.commit(\"setAutocompleteResult\", { item: [], category: [], suggestion: [] });\n\n                // hide the autocomplete box\n                this.hasInitialInput = false;\n            }\n        },\n\n        // hide search, if targetElement of the blur event is not a child of components' root element\n        onBlurSearchField(event)\n        {\n            const target = event.relatedTarget;\n\n            if (isNullOrUndefined(target) || !isNullOrUndefined(target) && !this.$el.contains(target))\n            {\n                this.isSearchFocused = false;\n            }\n        }\n    },\n  watch:\n    {\n        // set the current search string, after clicking on a suggestion\n        moduleSearchString(newVal)\n        {\n            if (newVal && newVal.length)\n            {\n                this.searchString = newVal;\n            }\n        },\n\n        autocompleteIsLoading(newVal, oldVal) {\n            // when client was loading and has stopped now, the autocomplete box should be shown\n            if (oldVal && !newVal) {\n                this.hasInitialInput = true;\n            }\n        }\n    },\n}\n</script>\n","import { defaultValue, isNullOrUndefined } from \"./utils\";\n\n/**\n * Makes a function executed after defined timeout.\n *\n * @param {function}    callback  The function to be executed after timeout\n * @param {number}      timeout   The timeout in milliseconds\n *\n * @returns {function}\n */\nexport function debounce(callback, timeout)\n{\n  timeout = defaultValue(timeout, 0);\n  if (timeout > 0)\n  {\n    return function()\n    {\n      const args = arguments;\n\n      if (!isNullOrUndefined(callback.__timeout))\n      {\n        window.clearTimeout(callback.__timeout);\n      }\n      callback.__timeout = window.setTimeout(() =>\n      {\n        callback(...args);\n      }, timeout);\n    };\n  }\n\n  return callback;\n}\n","import { render, staticRenderFns } from \"./CustomItemSearch.vue?vue&type=template&id=ea9cf60c&\"\nimport script from \"./CustomItemSearch.vue?vue&type=script&lang=js&\"\nexport * from \"./CustomItemSearch.vue?vue&type=script&lang=js&\"\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  null,\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/Users/nsierrar/Projects/PlentyMarkets/Repo-GitHub/MultiContentWidget/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('ea9cf60c')) {\n      api.createRecord('ea9cf60c', component.options)\n    } else {\n      api.reload('ea9cf60c', component.options)\n    }\n    module.hot.accept(\"./CustomItemSearch.vue?vue&type=template&id=ea9cf60c&\", function () {\n      api.rerender('ea9cf60c', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"resources/js/src/components/ItemList/CustomItemSearch.vue\"\nexport default component.exports","import mod from \"-!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomItemSearch.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomItemSearch.vue?vue&type=script&lang=js&\"","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    {\n      staticClass: \"container-max\",\n      class: { \"p-0\": _vm.$ceres.isShopBuilder },\n    },\n    [\n      _c(\n        \"div\",\n        { staticClass: \"position-relative\" },\n        [\n          _c(\n            \"div\",\n            { staticClass: \"d-flex flex-grow-1 position-relative my-2\" },\n            [\n              _c(\"input\", {\n                directives: [\n                  {\n                    name: \"model\",\n                    rawName: \"v-model\",\n                    value: _vm.searchString,\n                    expression: \"searchString\",\n                  },\n                ],\n                ref: \"searchInput\",\n                staticClass:\n                  \"search-input flex-grow-1 px-3 py-2 min-width-none\",\n                class: [_vm.enableBorder ? \"border \" : \"\"],\n                attrs: {\n                  type: \"search\",\n                  autofocus: _vm.isShopBuilder,\n                  placeholder: _vm.$translate(\n                    \"Ceres::Template.headerSearchPlaceholder\"\n                  ),\n                  \"aria-label\": _vm.$translate(\n                    \"Ceres::Template.headerSearchTerm\"\n                  ),\n                },\n                domProps: { value: _vm.searchString },\n                on: {\n                  input: [\n                    function ($event) {\n                      if ($event.target.composing) {\n                        return\n                      }\n                      _vm.searchString = $event.target.value\n                    },\n                    function ($event) {\n                      return _vm.onValueChanged($event.target.value)\n                    },\n                  ],\n                  keyup: function ($event) {\n                    if (\n                      !$event.type.indexOf(\"key\") &&\n                      _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n                    ) {\n                      return null\n                    }\n                    return _vm.search()\n                  },\n                  focus: function ($event) {\n                    _vm.isSearchFocused = true\n                  },\n                  blur: function ($event) {\n                    return _vm.onBlurSearchField($event)\n                  },\n                },\n              }),\n              _vm._v(\" \"),\n              _vm._t(\"search-button\", [\n                _c(\n                  \"button\",\n                  {\n                    staticClass: \"search-submit px-3 min-width-none\",\n                    class: [\n                      _vm.loginLogo.length > 0\n                        ? \"d-flex align-items-center\"\n                        : \"\",\n                    ],\n                    attrs: {\n                      type: \"submit\",\n                      \"aria-label\": _vm.$translate(\n                        \"Ceres::Template.headerSearch\"\n                      ),\n                    },\n                    on: {\n                      click: function ($event) {\n                        return _vm.search()\n                      },\n                    },\n                  },\n                  [\n                    _vm.loginLogo.length > 0\n                      ? _c(\"span\", {\n                          staticClass: \"logo-search\",\n                          style: {\n                            \"background-image\": \"url('\" + _vm.loginLogo + \"')\",\n                          },\n                        })\n                      : _c(\"icon\", {\n                          staticClass: \"fa-fw\",\n                          class: _vm.logoClass,\n                          attrs: {\n                            icon: \"search\",\n                            loading: _vm.autocompleteIsLoading,\n                          },\n                        }),\n                  ],\n                  1\n                ),\n              ]),\n            ],\n            2\n          ),\n          _vm._v(\" \"),\n          _vm.isSearchFocused\n            ? [\n                _c(\n                  \"div\",\n                  {\n                    directives: [\n                      {\n                        name: \"show\",\n                        rawName: \"v-show\",\n                        value:\n                          (_vm.searchString.length >= _vm.searchMinLength &&\n                            _vm.hasInitialInput) ||\n                          _vm.$ceres.isShopBuilder,\n                        expression:\n                          \"(searchString.length >= searchMinLength && hasInitialInput) || $ceres.isShopBuilder\",\n                      },\n                    ],\n                  },\n                  [\n                    _vm._t(\"autocomplete-suggestions\", [\n                      _c(\n                        \"div\",\n                        {\n                          staticClass:\n                            \"autocomplete-suggestions shadow bg-white w-100\",\n                        },\n                        [\n                          _c(\"search-suggestion-item\", {\n                            attrs: {\n                              \"show-images\": _vm.showItemImages,\n                              \"suggestion-type\": \"item\",\n                            },\n                          }),\n                        ],\n                        1\n                      ),\n                    ]),\n                  ],\n                  2\n                ),\n              ]\n            : _vm._e(),\n        ],\n        2\n      ),\n    ]\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"],"sourceRoot":""}