{"version":3,"file":"search-autocomplete.js","mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,gBAAgB;AAC1E,iBAAiB;AACjB;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA,iBAAiB;AACjB,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B;AAC1B;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,gBAAgB;AAC1E,iBAAiB;AACjB;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA,iBAAiB;AACjB,SAAS;AACT;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B;AAC1B;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA,C","sources":["webpack://nv-base-template/./src/js/search-autocomplete.js"],"sourcesContent":["/**\r\n * Search Autocomplete\r\n * @description : Search Autocomplete feature\r\n */\r\n\r\n// The main Vue instance to be used in the Header\r\nvar searchApp = new Vue({\r\n    el: '#search-app',\r\n\r\n    data: {\r\n        loading: false, // Initial loading state\r\n        refSearchField: '',\r\n        searchTerm: '',\r\n        searchResults: [],\r\n        displayResultList: false,\r\n        displayClearBtn: false,\r\n        formActionUrl: ''\r\n    },\r\n    methods: {\r\n        onKeyUpSearch: _.debounce(function (ref, event) {\r\n            // console.log(event.target.value);\r\n            this.searchTerm = event.target.value;\r\n            this.fetchSearchSuggestion();\r\n        }, 500),\r\n\r\n        fetchSearchSuggestion: function () {\r\n            this.searchResults = [];\r\n            // console.log('request data', this.searchTerm);\r\n\r\n            axios({\r\n                    method: 'get',\r\n                    url: `/api/autocomplete/get?letters=${this.searchTerm}`\r\n                })\r\n                .then(response => {\r\n                    this.searchResults = response.data;\r\n                    this.loading = false;\r\n                    // console.log('results data', response.data);\r\n                })\r\n                .catch(error => {\r\n                    this.errored = true;\r\n                });\r\n        },\r\n        updateInputValue: function (value, event) {\r\n            event.stopPropagation();\r\n            this.searchTerm = value;\r\n            this.displayResultList = false;\r\n            document.getElementById('query').value = value;\r\n            document.getElementById('searchform').submit();\r\n        },\r\n        clearSearchField: function (event) {\r\n            event.stopPropagation();\r\n            this.searchTerm = '';\r\n            this.fetchSearchSuggestion();\r\n        }\r\n    },\r\n    beforeMount: function () {\r\n        var _self = this;\r\n        _self.formActionUrl = _self.$el.getAttribute('data-search-page-url');\r\n    },\r\n    mounted: function () {\r\n        var _self = this;\r\n\r\n        setTimeout(() => {\r\n            _self.$el.classList.add('is-loaded');\r\n            _self.refSearchField = _self.$refs.search_field;\r\n        }, 1000);\r\n    },\r\n    watch: {\r\n        searchResults: function (newValue) {\r\n            if (newValue.length > 0) {\r\n                this.displayResultList = true;\r\n            } else {\r\n                this.displayResultList = false;\r\n            }\r\n        },\r\n        searchTerm: function (newValue) {\r\n            if (newValue !== '') {\r\n                this.displayClearBtn = true;\r\n            } else {\r\n                this.displayClearBtn = false;\r\n            }\r\n        }\r\n    },\r\n    template: `\r\n        <div>\r\n            <form class=\"c-mini-form  c-mini-form--solid  c-mini-form--lg\" id=\"searchform\" method=\"get\" v-bind:action=\"formActionUrl\">\r\n                <div class=\"c-mini-form__textbox-wrap\" id=\"js-search-autocomplete\">\r\n                    <input class=\"c-mini-form__textbox  js-search-tray__textbox\" type=\"search\" v-on:keyup=\"onKeyUpSearch(refSearchField, $event)\" v-model=\"searchTerm\" ref=\"search_field\" name=\"query\" id=\"query\" placeholder=\"Search\" aria-label=\"Search\" autocomplete=\"off\">\r\n                </div>\r\n                <div class=\"c-mini-form__submit-wrap\">\r\n                    <div class=\"c-mini-form__submit-icon-button  c-icon-button  c-icon-button--encircled  u-bg-vrt-purple-to-pink\">\r\n                        <button class=\"c-icon-button__button\" type=\"submit\" title=\"Submit\">\r\n                            <span class=\"u-visually-hidden\">Submit</span>\r\n                            <svg class=\"c-icon  c-icon--search  c-icon-button__icon\" width=\"19.036\" height=\"18.996\" viewBox=\"0 0 19.036 18.996\">\r\n                                <path d=\"M18.4 5.029a8.134 8.134 0 0 0-1.765-2.62A8.436 8.436 0 0 0 14.007.648a8.28 8.28 0 0 0-6.422 0 8.473 8.473 0 0 0-2.624 1.76 8.271 8.271 0 0 0-1.773 2.618 8.234 8.234 0 0 0-.135 6.083 8.693 8.693 0 0 0 1.121 2.059L.318 17.079a1.135 1.135 0 0 0 0 1.579 1.111 1.111 0 0 0 1.6 0l3.825-3.88a8.4 8.4 0 0 0 2.108 1.184 8.3 8.3 0 0 0 6.153-.113 8.487 8.487 0 0 0 2.625-1.761 8.179 8.179 0 0 0 2.4-5.838 8.2 8.2 0 0 0-.629-3.221Zm-1.585 3.217a5.83 5.83 0 0 1-.472 2.339 6.248 6.248 0 0 1-1.291 1.921 5.994 5.994 0 0 1-8.511 0 6.26 6.26 0 0 1-1.293-1.921 6.029 6.029 0 0 1 0-4.677A6.287 6.287 0 0 1 6.54 3.987a6.055 6.055 0 0 1 1.916-1.3 6.033 6.033 0 0 1 4.681 0 6.027 6.027 0 0 1 1.915 1.3 6.275 6.275 0 0 1 1.292 1.921 5.841 5.841 0 0 1 .471 2.338Z\"></path>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"c-mini-form__line  u-bg-hrz-green-to-teal\"></div>\r\n            </form>\r\n\r\n            <ul class=\"c-autocomplete-list  u-mt-4\" v-if=\"displayResultList\">\r\n                <li class=\"c-autocomplete-list__item\" v-for=\"item in searchResults\" :item=\"item\" :key=\"item\">\r\n                    <button class=\"c-autocomplete-list__button\" type=\"button\" v-on:click=\"updateInputValue(item, $event)\">\r\n                        {{item}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    `\r\n});\r\n\r\nif (document.querySelector('#search-page-app')) {\r\n    \r\n// The secondary Vue instance to be used in the Search Page\r\nvar searchPageApp = new Vue({\r\n    el: '#search-page-app',\r\n\r\n    data: {\r\n        loading: false, // Initial loading state\r\n        refSearchField: \"\",\r\n        searchTerm: '',\r\n        searchResults: [],\r\n        displayResultList: false,\r\n        displayClearBtn: false,\r\n        formActionUrl: ''\r\n    },\r\n    beforeMount: function () {\r\n        var _self = this;\r\n        _self.formActionUrl = _self.$el.getAttribute('data-search-page-url');\r\n    },\r\n    methods: {\r\n        onKeyUpSearch: _.debounce(function (ref, event) {\r\n            // console.log(event.target.value);\r\n            this.searchTerm = event.target.value;\r\n            this.fetchSearchSuggestion();\r\n        }, 500),\r\n\r\n        fetchSearchSuggestion: function () {\r\n            this.searchResults = [];\r\n            // console.log('request data', this.searchTerm);\r\n            axios({\r\n                    method: 'get',\r\n                    url: `/api/autocomplete/get?letters=${this.searchTerm}`\r\n                })\r\n                .then(response => {\r\n                    this.searchResults = response.data;\r\n                    this.loading = false;\r\n                    // console.log('results data', response.data);\r\n                })\r\n                .catch(error => {\r\n                    this.errored = true;\r\n                });\r\n        },\r\n        updateInputValue: function (value, event) {\r\n            event.stopPropagation();\r\n            this.searchTerm = value;\r\n            this.displayResultList = false;\r\n        },\r\n        clearSearchField: function (event) {\r\n            event.stopPropagation();\r\n            this.searchTerm = '';\r\n            this.fetchSearchSuggestion();\r\n        }\r\n    },\r\n    mounted: function () {\r\n        var _self = this;\r\n\r\n        setTimeout(() => {\r\n            _self.$el.classList.add('is-loaded');\r\n            _self.refSearchField = _self.$refs.search_field;\r\n        }, 1000);\r\n    },\r\n    watch: {\r\n        searchResults: function (newValue) {\r\n            if (newValue.length > 0) {\r\n                this.displayResultList = true;\r\n            } else {\r\n                this.displayResultList = false;\r\n            }\r\n        },\r\n        searchTerm: function (newValue) {\r\n            if (newValue !== '') {\r\n                this.displayClearBtn = true;\r\n            } else {\r\n                this.displayClearBtn = false;\r\n            }\r\n        }\r\n    },\r\n    template: `\r\n        <div class=\"u-mw-7\">\r\n            <form class=\"c-mini-form\" id=\"searchform\" method=\"get\" v-bind:action=\"formActionUrl\">\r\n                <div class=\"c-mini-form__textbox-wrap\" id=\"js-search-autocomplete\">\r\n                    <input class=\"c-mini-form__textbox  js-search-tray__textbox\" type=\"search\" v-on:keyup=\"onKeyUpSearch(refSearchField, $event)\" v-model=\"searchTerm\" ref=\"search_field\" name=\"query\" id=\"query\" placeholder=\"Search\" aria-label=\"Search\" autocomplete=\"off\">\r\n                </div>\r\n                <div class=\"c-mini-form__submit-wrap\">\r\n                    <button class=\"c-mini-form__submit\" type=\"submit\" title=\"Submit\">\r\n                        <span class=\"c-mini-form__submit-text\">\r\n                            <span class=\"u-font-neue-machina-nudge-up\">Search</span>\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n            </form>\r\n\r\n            <ul class=\"c-autocomplete-list  u-mt-4\" v-if=\"displayResultList\">\r\n                <li class=\"c-autocomplete-list__item\" v-for=\"item in searchResults\" :item=\"item\" :key=\"item\">\r\n                    <button class=\"c-autocomplete-list__button\" type=\"button\" v-on:click=\"updateInputValue(item, $event)\">\r\n                        {{item}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n`\r\n});\r\n\r\n}"],"names":[],"sourceRoot":""}