autocomplete.min.js

"use strict";function _instanceof(e,t){return null!=t&&"undefined"!=typeof Symbol&&t[Symbol.hasInstance]?!!t[Symbol.hasInstance](e):e instanceof t}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _classCallCheck(e,t){if(!_instanceof(e,t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _createSuper(e){var t=_isNativeReflectConstruct();return function(){var r,n=_getPrototypeOf(e);if(t){var i=_getPrototypeOf(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return _possibleConstructorReturn(this,r)}}function _possibleConstructorReturn(e,t){return!t||"object"!==_typeof(t)&&"function"!=typeof t?_assertThisInitialized(e):t}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _wrapNativeSuper(e){var t="function"==typeof Map?new Map:void 0;return(_wrapNativeSuper=function(e){if(null===e||!_isNativeFunction(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return _construct(e,arguments,_getPrototypeOf(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(r,e)})(e)}function _construct(e,t,r){return(_construct=_isNativeReflectConstruct()?Reflect.construct:function(e,t,r){var n=[null];n.push.apply(n,t);var i=new(Function.bind.apply(e,n));return r&&_setPrototypeOf(i,r.prototype),i}).apply(null,arguments)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(e){return!1}}function _isNativeFunction(e){return-1!==Function.toString.call(e).indexOf("[native code]")}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function _iterableToArrayLimit(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var r=[],n=!0,i=!1,o=void 0;try{for(var s,a=e[Symbol.iterator]();!(n=(s=a.next()).done)&&(r.push(s.value),!t||r.length!==t);n=!0);}catch(e){i=!0,o=e}finally{try{n||null==a.return||a.return()}finally{if(i)throw o}}return r}}function _arrayWithHoles(e){if(Array.isArray(e))return e}var c2k=function(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()},applyStyles=function(e,t){for(var r=0,n=Object.entries(t);r<n.length;r++){var i=_slicedToArray(n[r],2),o=i[0],s=i[1];e.style[c2k(o)]=s}return e},_v=function e(t,r){if(!r)return t;try{var n=r.split(".").filter(function(e){return!!e}).reverse();return e(t[n.pop()],n.join("."))}catch(r){return t}},Autocomplete=function(e){_inherits(r,_wrapNativeSuper(HTMLElement));var t=_createSuper(r);function r(){var e;return _classCallCheck(this,r),(e=t.call(this)).items=[],e.filteredItems=[],e.renderQueue=[],e.query="",e.params={itemTitle:null,itemId:null,filterStart:3,placeholder:"",oneLine:!1,elementsWhenFirstRender:50,elementsToAddAfter:25,keepOpened:!1},e.refs={input:null,dropdown:null,container:null,style:null},e.value=null,e}return _createClass(r,[{key:"_clearChosen",value:function(){var e=document.querySelectorAll(".dropdown > .list-item.chosen");Array.from(e).forEach(function(e){return e.classList.remove("chosen")})}},{key:"clear",value:function(){var e=this.value;this.value=null,this._updateQuery(""),this._clearChosen(),this._dispatchEvent(this.refs.input,"value-input",{valueBefore:e,value:this.value})}},{key:"setValue",value:function(e){var t=this,r=this.items.find(function(r){return _v(r,t.params.itemId)===e});if(r){var n=this.value;this.value=e,this._updateQuery(this._getItemTitle(r)),this._dispatchEvent(this.refs.input,"value-input",{valueBefore:n,value:this.value,itemOfValue:r})}else console.warn("Item not found in presented items array")}},{key:"_shiftRenderQueue",value:function(){return this.renderQueue.splice(0,this.params.elementsToAddAfter)}},{key:"setItems",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];Array.isArray(e)?(this.items=e,t&&this.clear(),this._rerenderList()):console.warn("Presented items array is not Array")}},{key:"_rerenderList",value:function(){this.filteredItems=this._filterItemsBy(this.query),this.renderQueue=_toConsumableArray(this.filteredItems),this._renderList(this.renderQueue.splice(0,this.params.elementsWhenFirstRender))}},{key:"setItemTitleComputer",value:function(e){["string","function"].includes(_typeof(e))?this.params.itemTitle=e:console.warn("Title must be a function or string")}},{key:"_getItemTitle",value:function(e){if("string"==typeof this.params.itemTitle)return String(_v(e,this.params.itemTitle));try{return String(this.params.itemTitle(e))}catch(t){return String(e)}}},{key:"_initStyles",value:function(){var e="\n      * {\n        box-sizing: border-box;\n      }\n\n      .hoverable:hover {\n        background-color: #1E90FF !important;\n        color: white !important;\n      }\n\n      .dropdown {\n        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);\n        border: 1px solid #737373;\n        max-height: 200px;\n      }\n\n      .dropdown > .list-item {\n        cursor: default;\n      }\n\n      .dropdown > .list-item.one-line {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .dropdown > .list-item.chosen {\n        color: #1E90FF;\n      }\n\n      .dropdown.hidden {\n        display: none;\n      }\n    ",t=document.createElement("style");return t.type="text/css",t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),t}},{key:"_createContainer",value:function(){var e=document.createElement("div");return e.classList.add("container"),applyStyles(e,{position:"relative"})}},{key:"_createDropdown",value:function(){var e=document.createElement("div");return e.classList.add("dropdown"),e.classList.add("hidden"),applyStyles(e,{overflowY:"auto",position:"absolute",top:"100%",left:"0px",width:"100%"})}},{key:"_createInput",value:function(){var e=document.createElement("input");return this.params.placeholder&&e.setAttribute("placeholder",this.params.placeholder),e.classList.add("input"),applyStyles(e,{width:"100%"})}},{key:"_filterItemsBy",value:function(e){var t=this;return e.length<this.params.filterStart?this.items:this.items.filter(function(r){return-1!==t._getItemTitle(r).toLowerCase().indexOf(e.toLowerCase())})}},{key:"_getParams",value:function(){this.params.itemTitle=this.getAttribute("item-title"),this.params.itemId=this.getAttribute("item-id"),this.params.filterStart=this.getAttribute("item-id")||3,this.params.placeholder=this.getAttribute("placeholder")||"",this.params.elementsWhenFirstRender=Number(this.getAttribute("els-when-first-render"))||50,this.params.elementsToAddAfter=Number(this.getAttribute("els-to-add-after"))||25;var e=this.getAttribute("one-line");this.params.oneLine=""===e||Boolean(e);var t=this.getAttribute("keep-opened");this.params.keepOpened=""===t||Boolean(t)}},{key:"_listItemHandleClick",value:function(e,t){var r=this;return function(){r._clearChosen(),t.classList.add("chosen"),r.setValue(_v(e,r.params.itemId)),!r.params.keepOpened&&r.closeDropdown()}}},{key:"_updateQuery",value:function(e){this.refs.input.value=e,this.query=e,this._rerenderList()}},{key:"_generateList",value:function(e){var t=this;return e.map(function(e){var r=document.createElement("div");return r.setAttribute("class","list-item hoverable"),t.value===_v(e,t.params.itemId)&&r.classList.add("chosen"),t.params.oneLine&&r.classList.add("one-line"),r.innerHTML=t._getItemTitle(e),r.addEventListener("click",t._listItemHandleClick(e,r)),r})}},{key:"_renderList",value:function(e){var t=this;this.refs.dropdown.innerHTML="",this._generateList(e).map(function(e){return t.refs.dropdown.append(e)})}},{key:"_addRenderList",value:function(e){var t=this;this._generateList(e).map(function(e){return t.refs.dropdown.append(e)})}},{key:"_clickOutsideHandler",value:function(){this.closeDropdown()}},{key:"setCustomStyles",value:function(e){this.refs.style.innerHTML=e}},{key:"openDropdown",value:function(){this.refs.dropdown.classList.remove("hidden")}},{key:"closeDropdown",value:function(){this.refs.dropdown.classList.add("hidden")}},{key:"isDropdownOpened",value:function(){return!this.refs.dropdown.classList.contains("hidden")}},{key:"_dispatchEvent",value:function(e,t,r){e.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:r}))}},{key:"_scrollReachesBottomHandler",value:function(){this.renderQueue.length>0&&(this._addRenderList(this._shiftRenderQueue()),this._dispatchEvent(this.refs.dropdown,"render-queue-shift",{renderQueue:this.renderQueue,parent:this.refs.dropdown}))}},{key:"connectedCallback",value:function(){var e=this;this._getParams();var t=this.attachShadow({mode:"closed"});this.refs.style=this._initStyles(),this.refs.container=this._createContainer(),this.refs.dropdown=this._createDropdown(),this.refs.input=this._createInput(),this.refs.container.addEventListener("click",function(t){t.stopPropagation(),e.isDropdownOpened()||(e.openDropdown(),window.addEventListener("click",e._clickOutsideHandler.bind(e),{once:!0}))}),this.refs.dropdown.addEventListener("click",function(e){return e.stopPropagation()}),this.refs.input.addEventListener("input",function(t){var r=e.query;e._updateQuery(t.target.value),e._dispatchEvent(e.refs.input,"query-input",{nativeEvent:t,valueBefore:r,value:e.query,items:e.items,filteredItems:e.filteredItems})}),this.refs.dropdown.addEventListener("scroll",function(){e.refs.dropdown.clientHeight===e.refs.dropdown.scrollHeight-e.refs.dropdown.scrollTop&&e._scrollReachesBottomHandler()}),this.refs.container.append(this.refs.input,this.refs.dropdown),t.append(this.refs.style,this.refs.container)}}]),r}();customElements.define("auto-complete",Autocomplete);