diff --git a/demo/index.html b/demo/index.html
index 88c7052..4c780c2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -12,7 +12,6 @@
     <![endif]-->
 
     <link href='https://fonts.googleapis.com/css?family=Lato|Open+Sans|Montserrat' rel='stylesheet' type='text/css' />
-    <link href="css/kompletr.demo.min.css" rel="stylesheet" type="text/css" media="screen" />
 
     <!--[if lt IE 9]>
       <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -25,7 +24,11 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
 
+    <link href="css/kompletr.demo.min.css" rel="stylesheet" type="text/css" media="screen" />
     <script type="module" src="./js/kompletr.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
   </head>
   
   <body>
@@ -106,7 +109,19 @@
                 done(d);
               },*/
               onSelect: (selected) => {
-                console.log('cb.onSelect', selected);
+                Toastify({
+                  text: `Hey, I'm your callback! There is something for you 👀 : "${selected.Name}"`,
+                  duration: 5000,
+                  newWindow: true,
+                  close: false,
+                  gravity: "bottom", // `top` or `bottom`
+                  position: "center", // `left`, `center` or `right`
+                  stopOnFocus: true, // Prevents dismissing of toast on hover
+                  style: {
+                    background: "#4cb56b",
+                    color: '#fff'
+                  },
+                }).showToast();
               },
               onError: (error) => {
                 console.log('cb.onError ', error);
diff --git a/dist/main.js b/dist/main.js
index ffda0cb..7391e8f 100644
--- a/dist/main.js
+++ b/dist/main.js
@@ -12,9 +12,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Animation: function() { return /* binding */ Animation; }
 /* harmony export */ });
-/* harmony import */ var _enums_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./enums.js */ "./src/js/enums.js");
-
-
 /**
  * Represents an Animation class that provides various animation effects.
  */
@@ -61,93 +58,6 @@ class Animation {
       }
     })();
   }
-
-  /**
-   * Apply a slideUp animation effect to the target HTML element.
-   * 
-   * @param {HTMLElement} element - The target HTML element.
-   * @param {Number} duration - The duration of the animation in milliseconds.
-   * 
-   * @returns {Void}
-   */
-  static slideUp(element, duration = 500) {
-    element.style.transitionProperty = 'height, margin, padding';
-    element.style.transitionDuration = duration + 'ms';
-    element.style.boxSizing = 'border-box';
-    element.style.height = element.offsetHeight + 'px';
-    element.offsetHeight;
-    element.style.overflow = 'hidden';
-    element.style.height = 0;
-    element.style.paddingTop = 0;
-    element.style.paddingBottom = 0;
-    element.style.marginTop = 0;
-    element.style.marginBottom = 0;
-    window.setTimeout( () => {
-      element.style.display = 'none';
-      element.style.removeProperty('height');
-      element.style.removeProperty('padding-top');
-      element.style.removeProperty('padding-bottom');
-      element.style.removeProperty('margin-top');
-      element.style.removeProperty('margin-bottom');
-      element.style.removeProperty('overflow');
-      element.style.removeProperty('transition-duration');
-      element.style.removeProperty('transition-property');
-    }, duration);
-  }
-
-  /**
-   * Apply a slideDown animation effect to the target HTML element.
-   * 
-   * @param {HTMLElement} element - The target HTML element.
-   * @param {Number} duration - The duration of the animation in milliseconds.
-   * 
-   * @returns {Void}
-   */
-  static slideDown(element, duration = 500) {
-    element.style.removeProperty('display');
-    let display = window.getComputedStyle(element).display;
-    if (display === 'none') display = 'block';
-    element.style.display = display;
-    let height = element.offsetHeight;
-    element.style.overflow = 'hidden';
-    element.style.height = 0;
-    element.style.paddingTop = 0;
-    element.style.paddingBottom = 0;
-    element.style.marginTop = 0;
-    element.style.marginBottom = 0;
-    element.offsetHeight;
-    element.style.boxSizing = 'border-box';
-    element.style.transitionProperty = 'height, margin, padding';
-    element.style.transitionDuration = duration + 'ms';
-    element.style.height = height + 'px';
-    element.style.removeProperty('padding-top');
-    element.style.removeProperty('padding-bottom');
-    element.style.removeProperty('margin-top');
-    element.style.removeProperty('margin-bottom');
-    window.setTimeout( () => {
-      element.style.removeProperty('height');
-      element.style.removeProperty('overflow');
-      element.style.removeProperty('transition-duration');
-      element.style.removeProperty('transition-property');
-    },duration);
-  }
-
-  /**
-   * Apply the opposite animation effect to a given element.
-   * 
-   * @param {HTMLElement} element - The element to animate.
-   * @param {string} [type=animation.fadeIn] - The animation to apply. By default, it's 'fadeIn'.
-   * @param {number} [duration=500] - The duration of the animation in milliseconds. By default, it's 500.
-   * 
-   * @return {Object} Returns the result of the Animation function with the opposite animation, the element, and the duration as parameters.
-   */
-  static animateBack(element, type = _enums_js__WEBPACK_IMPORTED_MODULE_0__.animation.fadeIn , duration = 500) {
-    const animations = {
-      fadeIn: 'fadeOut',
-      slideDown: 'slideUp'
-    };
-    return Animation[animations[type]](element, duration);
-  }
 }
 
 /***/ }),
@@ -351,18 +261,6 @@ __webpack_require__.r(__webpack_exports__);
  * @description Represents the configuration for the Kompleter library.
  */
 class Configuration {
-  /**
-   * The type of animation for the element.
-   * @type {string}
-   */
-  _animationType = _enums_js__WEBPACK_IMPORTED_MODULE_0__.animation.fadeIn;
-  
-  /**
-   * The duration of the animation in milliseconds.
-   * @type {number}
-   */
-  _animationDuration = 500;
-
   /**
    * Indicates whether multiple selections are allowed.
    * @type {boolean}
@@ -416,35 +314,6 @@ class Configuration {
    */
   _cache = 0;
 
-  /**
-   * @description Type of animation between valid types
-   */
-  get animationType() {
-    return this._animationType;
-  }
-
-  set animationType(value) {
-    const valid = Object.keys(_enums_js__WEBPACK_IMPORTED_MODULE_0__.animation);
-    if (!valid.includes(value)) {
-      throw new Error(`animation.type should be one of ${valid.toString()}`);
-    }
-    this._animationType = value;
-  }
-
-  /**
-   * @description Duration of some animation in ms. Default 500
-   */
-  get animationDuration() {
-    return this._animationDuration;
-  }
-
-  set animationDuration(value) {
-    if (isNaN(parseInt(value, 10))) {
-      throw new Error('animation.duration should be an integer');
-    }
-    this._animationDuration = value;
-  }
-
   /**
    * @description Enable / disable multiple choices
    */
@@ -550,8 +419,6 @@ class Configuration {
       throw new Error('options should be an object');
     }
     this.theme = options?.theme || this._theme;
-    this.animationType = options?.animationType || this._animationType;
-    this.animationDuration = options?.animationDuration || this._animationDuration;
     this.multiple = options?.multiple || this._multiple;
     this.fieldsToDisplay = options?.fieldsToDisplay || this._fieldsToDisplay;
     this.maxResults = options?.maxResults || this._maxResults;
@@ -767,24 +634,11 @@ class DOM {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   animation: function() { return /* binding */ animation; },
 /* harmony export */   event: function() { return /* binding */ event; },
 /* harmony export */   origin: function() { return /* binding */ origin; },
 /* harmony export */   searchExpression: function() { return /* binding */ searchExpression; },
 /* harmony export */   theme: function() { return /* binding */ theme; }
 /* harmony export */ });
-/**
- * Enum representing different animation types.
- * 
- * @enum {string}
- * @readonly
- */
-const animation = Object.freeze({
-  fadeIn: 'fadeIn',
-  slideDown: 'slideDown',
-});
-
-
 /**
  * Enum representing different custom events.
  * 
@@ -900,7 +754,7 @@ class Kompletr {
 
       this.broadcaster.subscribe(_enums_js__WEBPACK_IMPORTED_MODULE_1__.event.error, this.error);
       this.broadcaster.subscribe(_enums_js__WEBPACK_IMPORTED_MODULE_1__.event.dataDone, this.showResults);
-      this.broadcaster.subscribe(_enums_js__WEBPACK_IMPORTED_MODULE_1__.event.domDone, _animation_js__WEBPACK_IMPORTED_MODULE_0__.Animation[this.configuration.animationType]);
+      this.broadcaster.subscribe(_enums_js__WEBPACK_IMPORTED_MODULE_1__.event.domDone, _animation_js__WEBPACK_IMPORTED_MODULE_0__.Animation.fadeIn.bind(null, this.dom.result));
       this.broadcaster.subscribe(_enums_js__WEBPACK_IMPORTED_MODULE_1__.event.domDone, this.bindResults);
       this.broadcaster.subscribe(_enums_js__WEBPACK_IMPORTED_MODULE_1__.event.selectDone, this.closeTheShop);
 
@@ -919,7 +773,7 @@ class Kompletr {
     if (e.srcElement === this.dom.input) {
       return true;
     }
-    _animation_js__WEBPACK_IMPORTED_MODULE_0__.Animation.animateBack(this.dom.result, this.configuration.animationType, this.configuration.animationDuration);
+    _animation_js__WEBPACK_IMPORTED_MODULE_0__.Animation.fadeOut(this.dom.result);
     this.resetPointer();
   };
 
@@ -929,7 +783,7 @@ class Kompletr {
 
   error = (e) => {
     console.error(`[kompletr] An error has occured -> ${e.stack}`);
-    _animation_js__WEBPACK_IMPORTED_MODULE_0__.Animation.fadeIn(this.dom.result);
+    _animation_js__WEBPACK_IMPORTED_MODULE_0__.Animation.fadeOut(this.dom.result);
     this.callbacks.onError && this.callbacks.onError(e);
   };
 
@@ -953,12 +807,11 @@ class Kompletr {
 
     data = this.props.data.map((record, idx) => ({ idx, data: record }) ); // TODO: Check to avoid this
 
-    // TODO: really when data comes from the cache ?
     if (!this.callbacks.onKeyup) {
       data = this.filter(data, this.dom.input.value);
     }
 
-    if (this.cache && from !== _enums_js__WEBPACK_IMPORTED_MODULE_1__.origin.cache) {
+    if (this.configuration.cache && from !== _enums_js__WEBPACK_IMPORTED_MODULE_1__.origin.cache) {
       this.cache.set({ string: this.dom.input.value, data });
     }
 
@@ -986,18 +839,16 @@ class Kompletr {
    */
   suggest = (e) => {
     if (this.dom.input.value.length < this.configuration.startQueryingFromChar) {
-      return;
+      return _animation_js__WEBPACK_IMPORTED_MODULE_0__.Animation.fadeOut(this.dom.result);
     }
     
-    const keyCode = e.keyCode;
-
-    switch (keyCode) {
+    switch (e.keyCode) {
     case 13:  // Enter
       this.select(this.dom.focused.id);
       break;
     case 38: // Up
     case 40: // Down
-      this.navigate(keyCode);
+      this.navigate(e.keyCode);
       break;
     default:
       if (this.dom.input.value !== this.props.previousValue) {
@@ -1022,7 +873,7 @@ class Kompletr {
    */
   hydrate = async (value) => {
     try {
-      if (this.cache && await this.cache.isValid(value)) {
+      if (this.configuration.cache && await this.cache.isValid(value)) {
         this.cache.get(value, (data) => {
           this.broadcaster.trigger(_enums_js__WEBPACK_IMPORTED_MODULE_1__.event.dataDone, { from: _enums_js__WEBPACK_IMPORTED_MODULE_1__.origin.cache, data: data });  
         });
@@ -1253,15 +1104,22 @@ __webpack_require__.r(__webpack_exports__);
  * @returns {void}
  */
 const kompletr = function({ input, data, options, onKeyup, onSelect, onError }) {
-  const broadcaster = new _broadcaster_js__WEBPACK_IMPORTED_MODULE_3__.Broadcaster();
-
-  const configuration = new _configuration_js__WEBPACK_IMPORTED_MODULE_1__.Configuration(options);
-  const properties = new _properties_js__WEBPACK_IMPORTED_MODULE_4__.Properties(data);
-
-  const dom = new _dom_js__WEBPACK_IMPORTED_MODULE_5__.DOM(input, broadcaster, configuration);
-  const cache = configuration.cache ? new _cache_js__WEBPACK_IMPORTED_MODULE_2__.Cache(broadcaster, configuration.cache) : null;
+  try {
+    const [broadcaster, configuration, properties] = [
+      new _broadcaster_js__WEBPACK_IMPORTED_MODULE_3__.Broadcaster(),
+      new _configuration_js__WEBPACK_IMPORTED_MODULE_1__.Configuration(options),
+      new _properties_js__WEBPACK_IMPORTED_MODULE_4__.Properties(data),
+    ];
   
-  new _kompletr_js__WEBPACK_IMPORTED_MODULE_0__["default"]({ configuration, properties, dom, cache, broadcaster, onKeyup, onSelect, onError });
+    const [dom, cache] = [
+      new _dom_js__WEBPACK_IMPORTED_MODULE_5__.DOM(input, broadcaster, configuration),
+      configuration.cache ? new _cache_js__WEBPACK_IMPORTED_MODULE_2__.Cache(broadcaster, configuration.cache) : null,
+    ];
+   
+    new _kompletr_js__WEBPACK_IMPORTED_MODULE_0__["default"]({ configuration, properties, dom, cache, broadcaster, onKeyup, onSelect, onError });
+  } catch(e) {
+    console.error(`[kompletr] An error has occured -> ${e.stack}`);
+  }
 };
 
 window.kompletr = kompletr;
diff --git a/dist/main.js.map b/dist/main.js.map
index 6bbc418..5ff11d5 100644
--- a/dist/main.js.map
+++ b/dist/main.js.map
@@ -1 +1 @@
-{"version":3,"file":"main.js","mappings":";;;;;;;;;;;;;;;AAAuC;;AAEvC;AACA;AACA;AACO;AACP;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB;AACA,cAAc,QAAQ;AACtB;AACA,qCAAqC,gDAAS;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;ACvImC;;AAEnC;AACA;AACA;AACO;AACP;;AAEA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,aAAa,UAAU;AACvB;AACA,cAAc,OAAO;AACrB;AACA;AACA,uBAAuB,4CAAK;AAC5B,gDAAgD,YAAY,4CAAK,EAAE,IAAI,MAAM;AAC7E;AACA,4BAA4B,eAAe;AAC3C;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,UAAU;AACvB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB;AACA,cAAc,OAAO;AACrB;AACA,2BAA2B;AAC3B,uBAAuB,4CAAK;AAC5B,gDAAgD,YAAY,4CAAK,EAAE,IAAI,MAAM;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;ACrDmC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACO;;AAEP;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,aAAa,UAAU;AACvB;AACA,mDAAmD;AACnD,4CAA4C;AAC5C;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX,OAAO;AACP;AACA,kCAAkC,4CAAK;AACvC,OAAO;AACP;;AAEA;AACA;AACA;AACA,aAAa,QAAQ,OAAO;AAC5B;AACA,4CAA4C;AAC5C;AACA,eAAe;AACf;AACA,QAAQ,cAAc;AACtB;AACA;AACA;AACA;AACA,gDAAgD,eAAe;AAC/D,sBAAsB,OAAO,wCAAwC,SAAS;AAC9E,OAAO;AACP;AACA,kCAAkC,4CAAK;AACvC,OAAO;AACP;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA,6CAA6C,OAAO;AACpD;AACA;AACA;AACA;AACA,MAAM;AACN,gCAAgC,4CAAK;AACrC;AACA;AACA;;;;;;;;;;;;;;;ACnGgE;;AAEhE;AACA;AACA;AACO;AACP;AACA;AACA,YAAY;AACZ;AACA,mBAAmB,gDAAS;AAC5B;AACA;AACA;AACA,YAAY;AACZ;AACA;;AAEA;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA,WAAW,4CAAK;;AAEhB;AACA;AACA,YAAY;AACZ;AACA;AACA;;AAEA;AACA;AACA,YAAY;AACZ;AACA;;AAEA;AACA;AACA,YAAY;AACZ;AACA;;AAEA;AACA;AACA,YAAY;AACZ;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAY;AACZ;AACA,cAAc,uDAAgB;;AAE9B;AACA;AACA,YAAY;AACZ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8BAA8B,gDAAS;AACvC;AACA,yDAAyD,iBAAiB;AAC1E;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8BAA8B,4CAAK;AACnC;AACA,gDAAgD,iBAAiB,IAAI,OAAO;AAC5E;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8BAA8B,uDAAgB;AAC9C;AACA,mDAAmD,iBAAiB,IAAI,OAAO;AAC/E;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;ACvNmC;;AAE5B;AACP;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uEAAuE,OAAO;AAC9E;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,yBAAyB;AACtC,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA,8CAA8C,gBAAgB;AAC9D;;AAEA;AACA;AACA,6FAA6F;AAC7F,wCAAwC,mCAAmC,EAAE,oBAAoB;AACjG;AACA,wCAAwC,+BAA+B,IAAI,+BAA+B;;AAE1G,sDAAsD,iDAAiD,EAAE,oBAAoB,EAAE,cAAc;AAC7I;AACA;;AAEA;AACA;AACA;AACA,YAAY,QAAQ;AACpB,YAAY,UAAU;AACtB;AACA,cAAc;AACd;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP,KAAK;;AAEL;AACA,mDAAmD,oBAAoB;AACvE;;AAEA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;;AAEA;AACA;AACA;AACA,8BAA8B,YAAY,WAAW,qBAAqB;AAC1E;AACA;AACA,oCAAoC,mBAAmB,IAAI,aAAa;AACxE;AACA;AACA;AACA,2BAA2B,uBAAuB;AAClD,sCAAsC,mBAAmB,IAAI,4BAA4B;AACzF;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA,MAAM;AACN,4BAA4B,qBAAqB;AACjD;;AAEA;;AAEA,8BAA8B,4CAAK,wBAAwB;AAC3D;AACA;;;;;;;;;;;;;;;;;;ACpLA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA,CAAC;;;AAGD;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA,CAAC;;;;;;;;;;;;;;;;;;;ACxD0C;AACkB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACf;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,gBAAgB,gFAAgF;AAChG;AACA;AACA;AACA;AACA;AACA;;AAEA,iCAAiC,4CAAK;AACtC,iCAAiC,4CAAK;AACtC,iCAAiC,4CAAK,UAAU,oDAAS;AACzD,iCAAiC,4CAAK;AACtC,iCAAiC,4CAAK;;AAEtC;AACA;;AAEA;AACA,yDAAyD,4BAA4B;AACrF;AACA,MAAM;AACN,wCAAwC,4CAAK,iEAAiE,QAAQ;AACtH;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI,oDAAS;AACb;AACA;;AAEA;AACA;AACA;;AAEA;AACA,wDAAwD,QAAQ;AAChE,IAAI,oDAAS;AACb;AACA;;AAEA;AACA;AACA;AACA,0CAA0C,uDAAgB;AAC1D;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA,yBAAyB,YAAY;AACrC;;AAEA,mDAAmD,mBAAmB,KAAK;;AAE3E;AACA;AACA;AACA;;AAEA,+BAA+B,6CAAM;AACrC,uBAAuB,oCAAoC;AAC3D;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,qBAAqB,qCAAqC;AAC1D;AACA;AACA;AACA;AACA,WAAW;AACX,SAAS;AACT;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,8CAA8C;AAC9C,uCAAuC;AACvC;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC,4CAAK,aAAa,MAAM,6CAAM,oBAAoB;AACrF,SAAS;AACT,QAAQ;AACR;AACA,mCAAmC,4CAAK,aAAa,MAAM,6CAAM,uBAAuB;AACxF,SAAS;AACT,QAAQ;AACR,iCAAiC,4CAAK,aAAa,MAAM,6CAAM,+BAA+B;AAC9F;AACA,MAAM;AACN,+BAA+B,4CAAK;AACpC;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA,MAAM;AACN,+BAA+B,4CAAK;AACpC;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA,+BAA+B,4CAAK;AACpC,MAAM;AACN,+BAA+B,4CAAK;AACpC;AACA;AACA;;;;;;;;;;;;;;ACjPA;AACA;AACA;AACO;;AAEP;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,gDAAgD,kBAAkB;AAClE;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,qDAAqD,kBAAkB;AACvE;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;UCrDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;;;;;;;;;;;;ACNqC;;AAEc;AAChB;AACY;AACF;AACd;;AAE/B;AACA;AACA;AACA,WAAW,yBAAyB;AACpC,WAAW,QAAQ;AACnB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB,WAAW,UAAU;AACrB,WAAW,UAAU;AACrB;AACA,aAAa;AACb;AACA,4BAA4B,kDAAkD;AAC9E,0BAA0B,wDAAW;;AAErC,4BAA4B,4DAAa;AACzC,yBAAyB,sDAAU;;AAEnC,kBAAkB,wCAAG;AACrB,0CAA0C,4CAAK;AAC/C;AACA,MAAM,oDAAQ,GAAG,gFAAgF;AACjG;;AAEA","sources":["webpack://kompletr/./src/js/animation.js","webpack://kompletr/./src/js/broadcaster.js","webpack://kompletr/./src/js/cache.js","webpack://kompletr/./src/js/configuration.js","webpack://kompletr/./src/js/dom.js","webpack://kompletr/./src/js/enums.js","webpack://kompletr/./src/js/kompletr.js","webpack://kompletr/./src/js/properties.js","webpack://kompletr/webpack/bootstrap","webpack://kompletr/webpack/runtime/define property getters","webpack://kompletr/webpack/runtime/hasOwnProperty shorthand","webpack://kompletr/webpack/runtime/make namespace object","webpack://kompletr/./src/js/index.js"],"sourcesContent":["import { animation } from './enums.js';\n\n/**\n * Represents an Animation class that provides various animation effects.\n */\nexport class Animation {\n  constructor() {}\n\n  /**\n   * Apply a fadeIn animation effect to the target HTML element.\n   * \n   * @param {HTMLElement} element - The target HTML element.\n   * \n   * @returns {Void}\n   * \n   * @todo Manage duration\n   */\n  static fadeIn(element) {\n    element.style.opacity = 0;\n    element.style.display = 'block';\n    (function fade(){\n      let value = parseFloat(element.style.opacity);\n      if (!((value += .1) > 1)) {\n        element.style.opacity = value;\n        requestAnimationFrame(fade);\n      }\n    })();\n  }\n\n  /**\n   * Apply a fadeOut animation effect to the target HTML element.\n   * \n   * @param {HTMLElement} element - The target HTML element.\n   * \n   * @returns {Void}\n   * \n   * @todo Manage duration\n   */\n  static fadeOut(element) {\n    element.style.opacity = 1;\n    (function fade() {\n      if ((element.style.opacity -= .1) < 0) {\n        element.style.display = 'none';\n      } else {\n        requestAnimationFrame(fade);\n      }\n    })();\n  }\n\n  /**\n   * Apply a slideUp animation effect to the target HTML element.\n   * \n   * @param {HTMLElement} element - The target HTML element.\n   * @param {Number} duration - The duration of the animation in milliseconds.\n   * \n   * @returns {Void}\n   */\n  static slideUp(element, duration = 500) {\n    element.style.transitionProperty = 'height, margin, padding';\n    element.style.transitionDuration = duration + 'ms';\n    element.style.boxSizing = 'border-box';\n    element.style.height = element.offsetHeight + 'px';\n    element.offsetHeight;\n    element.style.overflow = 'hidden';\n    element.style.height = 0;\n    element.style.paddingTop = 0;\n    element.style.paddingBottom = 0;\n    element.style.marginTop = 0;\n    element.style.marginBottom = 0;\n    window.setTimeout( () => {\n      element.style.display = 'none';\n      element.style.removeProperty('height');\n      element.style.removeProperty('padding-top');\n      element.style.removeProperty('padding-bottom');\n      element.style.removeProperty('margin-top');\n      element.style.removeProperty('margin-bottom');\n      element.style.removeProperty('overflow');\n      element.style.removeProperty('transition-duration');\n      element.style.removeProperty('transition-property');\n    }, duration);\n  }\n\n  /**\n   * Apply a slideDown animation effect to the target HTML element.\n   * \n   * @param {HTMLElement} element - The target HTML element.\n   * @param {Number} duration - The duration of the animation in milliseconds.\n   * \n   * @returns {Void}\n   */\n  static slideDown(element, duration = 500) {\n    element.style.removeProperty('display');\n    let display = window.getComputedStyle(element).display;\n    if (display === 'none') display = 'block';\n    element.style.display = display;\n    let height = element.offsetHeight;\n    element.style.overflow = 'hidden';\n    element.style.height = 0;\n    element.style.paddingTop = 0;\n    element.style.paddingBottom = 0;\n    element.style.marginTop = 0;\n    element.style.marginBottom = 0;\n    element.offsetHeight;\n    element.style.boxSizing = 'border-box';\n    element.style.transitionProperty = 'height, margin, padding';\n    element.style.transitionDuration = duration + 'ms';\n    element.style.height = height + 'px';\n    element.style.removeProperty('padding-top');\n    element.style.removeProperty('padding-bottom');\n    element.style.removeProperty('margin-top');\n    element.style.removeProperty('margin-bottom');\n    window.setTimeout( () => {\n      element.style.removeProperty('height');\n      element.style.removeProperty('overflow');\n      element.style.removeProperty('transition-duration');\n      element.style.removeProperty('transition-property');\n    },duration);\n  }\n\n  /**\n   * Apply the opposite animation effect to a given element.\n   * \n   * @param {HTMLElement} element - The element to animate.\n   * @param {string} [type=animation.fadeIn] - The animation to apply. By default, it's 'fadeIn'.\n   * @param {number} [duration=500] - The duration of the animation in milliseconds. By default, it's 500.\n   * \n   * @return {Object} Returns the result of the Animation function with the opposite animation, the element, and the duration as parameters.\n   */\n  static animateBack(element, type = animation.fadeIn , duration = 500) {\n    const animations = {\n      fadeIn: 'fadeOut',\n      slideDown: 'slideUp'\n    };\n    return Animation[animations[type]](element, duration);\n  }\n}","import { event } from './enums.js';\n\n/**\n * Represents a Broadcaster that allows subscribing to and triggering events.\n */\nexport class Broadcaster {\n  subscribers = [];\n\n  constructor() {}\n\n  /**\n   * Subscribes to an event.\n   * \n   * @param {string} type - The type of event to subscribe to.\n   * @param {Function} handler - The event handler function.\n   * \n   * @throws {Error} If the event type is not valid.\n   */\n  subscribe(type, handler) {\n    if (!Object.values(event).includes(type)) {\n      throw new Error(`Event should be one of ${Object.keys(event)}: ${type} given.`);\n    }\n    this.subscribers.push({ type, handler });\n  }\n\n  /**\n   * Listens for an event on a specified element.\n   * \n   * @param {HTMLElement} element - The element to listen on.\n   * @param {string} type - The type of event to listen for.\n   * @param {Function} handler - The event handler function.\n   */\n  listen(element, type, handler) {\n    element.addEventListener(type, handler);\n  }\n\n  /**\n   * Triggers an event.\n   * \n   * @param {string} type - The type of event to trigger.\n   * @param {Object} detail - Additional details to pass to the event handler.\n   * \n   * @throws {Error} If the event type is not valid.\n   */\n  trigger(type, detail = {}) {\n    if (!Object.values(event).includes(type)) {\n      throw new Error(`Event should be one of ${Object.keys(event)}: ${type} given.`);\n    }\n    \n    this.subscribers\n      .filter(subscriber => subscriber.type === type)\n      .forEach(subscriber => subscriber.handler(detail));\n  }\n}","import { event } from './enums.js';\n\n/**\n * @description Kompletr simple caching mechanism implementation.\n * \n * @see https://developer.mozilla.org/en-US/docs/Web/API/Cache\n * @see https://web.dev/articles/cache-api-quick-guide\n */\nexport class Cache {\n\n  /**\n   * @description Cache name value\n   */\n  _name = null;\n\n  /**\n   * @description Cache timelife duration\n   */\n  _duration = null;\n  \n  /**\n   * @description Broadcaster instance\n   */\n  _braodcaster = null;\n  \n  constructor(broadcaster, duration = 0, name = 'kompletr.cache') {\n    if (!window.caches) {\n      return false;\n    }\n    this._broadcaster = broadcaster;\n    this._name = name;\n    this._duration = duration;\n  }\n\n  /**\n   * @description Retrieve the data stored in cache and dispatch event with\n   * \n   * @param {String} string Input value of the current request as string\n   * @param {Function} done Callback function\n   * \n   * @emits CustomEvent 'kompltetr.request.done' { from, data }\n   * @emits CustomEvent 'kompltetr.error' { error }\n   * \n   * @returns {Void}\n   */\n  get(string, done) {\n    window.caches.open(this._name)\n      .then(cache => {\n        cache.match(string)\n          .then(async (data) => {\n            done(await data.json());\n          });\n      })\n      .catch(e => {\n        this._broadcaster.trigger(event.error, e);\n      });\n  }\n\n  /**\n   * @description Push data into the cache\n   * \n   * @param {Object} args { string, data }\n   * \n   * @emits CustomEvent 'kompltetr.error' { error }\n   * \n   * @returns {Void}\n   */\n  set({ string, data }) {\n    window.caches.open(this._name)\n      .then(cache => {\n        const headers = new Headers();\n        headers.set('Content-Type', 'application/json');\n        headers.set('Cache-Control', `max-age=${this._duration}`);\n        cache.put(`/${string}`, new Response(JSON.stringify(data), { headers }));\n      })\n      .catch(e => {\n        this._broadcaster.trigger(event.error, e);\n      });\n  }\n\n  /**\n   * @description Check the cache validity regarding the current request and the cache timelife\n   * \n   * @param {String} string The current request value\n   *\n   * @returns {Promise<Boolean>}\n   */\n  async isValid(string) {\n    try {\n      const cache = await window.caches.open(this._name);\n      const response = await cache.match(`/${string}`);\n      if (!response) {\n        return false;\n      }\n      return true;\n    } catch(e) {\n      this._broadcaster.trigger(event.error, e);\n    }\n  }\n}","import { animation, searchExpression, theme } from './enums.js';\n\n/**\n * @description Represents the configuration for the Kompleter library.\n */\nexport class Configuration {\n  /**\n   * The type of animation for the element.\n   * @type {string}\n   */\n  _animationType = animation.fadeIn;\n  \n  /**\n   * The duration of the animation in milliseconds.\n   * @type {number}\n   */\n  _animationDuration = 500;\n\n  /**\n   * Indicates whether multiple selections are allowed.\n   * @type {boolean}\n   * @private\n   */\n  _multiple = false;\n  \n  /**\n   * The theme for the kompletr options.\n   * @type {string}\n   */\n  _theme = theme.light;\n\n  /**\n   * Array containing the fields to be displayed.\n   * @type {Array}\n   * @private\n   */\n  _fieldsToDisplay = [];\n\n  /**\n   * The maximum number of results to display.\n   * @type {number}\n   */\n  _maxResults = 10;\n\n  /**\n   * The character index from which querying should start.\n   * @type {number}\n   */\n  _startQueryingFromChar = 2;\n\n  /**\n   * Represents the value of a property to be mapped.\n   * @type {string}\n   * @private\n   */\n  _propToMapAsValue = '';\n\n  /**\n   * The filter option used for filtering data.\n   * Possible values are 'prefix', 'expression'.\n   * @type {string}\n   */\n  _filterOn = searchExpression.prefix;\n\n  /**\n   * Represents the cache value.\n   * @type {number}\n   * @private\n   */\n  _cache = 0;\n\n  /**\n   * @description Type of animation between valid types\n   */\n  get animationType() {\n    return this._animationType;\n  }\n\n  set animationType(value) {\n    const valid = Object.keys(animation);\n    if (!valid.includes(value)) {\n      throw new Error(`animation.type should be one of ${valid.toString()}`);\n    }\n    this._animationType = value;\n  }\n\n  /**\n   * @description Duration of some animation in ms. Default 500\n   */\n  get animationDuration() {\n    return this._animationDuration;\n  }\n\n  set animationDuration(value) {\n    if (isNaN(parseInt(value, 10))) {\n      throw new Error('animation.duration should be an integer');\n    }\n    this._animationDuration = value;\n  }\n\n  /**\n   * @description Enable / disable multiple choices\n   */\n  get multiple() {\n    return this._multiple;\n  }\n\n  set multiple(value) {\n    this._multiple = value;\n  }\n\n  /**\n   * @description Display theme between light | dark\n   */\n  get theme() {\n    return this._theme;\n  }\n\n  set theme(value) {\n    const valid = Object.keys(theme);\n    if (!valid.includes(value)) {\n      throw new Error(`theme should be one of ${valid.toString()}, ${value} given`);\n    }\n    this._theme = value;\n  }\n\n  /**\n   * @description Fields to display in each suggestion item\n   */\n  get fieldsToDisplay() {\n    return this._fieldsToDisplay;\n  }\n\n  set fieldsToDisplay(value) {\n    this._fieldsToDisplay = value;\n  }\n  \n  /**\n   * @description Maximum number of results to display as suggestions (can be different thant the number of results availables)\n   */\n  get maxResults() {\n    return this._maxResults;\n  }\n\n  set maxResults(value) {\n    this._maxResults = value;\n  }\n\n  /**\n   * @description Input minimal value length before to fire research\n   */\n  get startQueryingFromChar() {\n    return this._startQueryingFromChar;\n  }\n\n  set startQueryingFromChar(value) {\n    this._startQueryingFromChar = value;\n  }\n\n  /**\n   * @description Property to map as value\n   */\n  get propToMapAsValue() {\n    return this._propToMapAsValue;\n  }\n\n  set propToMapAsValue(value) {\n    this._propToMapAsValue = value;\n  }\n\n  /**\n   * @description Apply filtering from the beginning of the word (prefix) or on the entire expression (expression)\n   */\n  get filterOn() {\n    return this._filterOn;\n  }\n\n  set filterOn(value) {\n    const valid = Object.keys(searchExpression);\n    if (!valid.includes(value)) {\n      throw new Error(`filterOn should be one of ${valid.toString()}, ${value} given`);\n    }\n    this._filterOn = value;\n  }\n\n  /**\n   * @description Time life of the cache when data is retrieved from an API call\n   */\n  get cache() {\n    return this._cache;\n  }\n\n  set cache(value) {\n    if (isNaN(parseInt(value, 10))) {\n      throw new Error('cache should be an integer');\n    }\n    this._cache = value;\n  }\n\n  constructor(options) {\n    if (options === undefined) return;\n    if (typeof options !== 'object') {\n      throw new Error('options should be an object');\n    }\n    this.theme = options?.theme || this._theme;\n    this.animationType = options?.animationType || this._animationType;\n    this.animationDuration = options?.animationDuration || this._animationDuration;\n    this.multiple = options?.multiple || this._multiple;\n    this.fieldsToDisplay = options?.fieldsToDisplay || this._fieldsToDisplay;\n    this.maxResults = options?.maxResults || this._maxResults;\n    this.startQueryingFromChar = options?.startQueryingFromChar || this._startQueryingFromChar;\n    this.propToMapAsValue = options?.propToMapAsValue || this._propToMapAsValue;\n    this.filterOn = options?.filterOn || this._filterOn;\n    this.cache = options?.cache || this._cache;\n  }\n}","import { event } from './enums.js';\n\nexport class DOM {\n  /**\n   * @description Identifiers for the DOM elements\n   */\n  _identifiers = {\n    results: 'kpl-result',\n  };\n\n  /**\n   * @description Classes for the DOM elements\n   */\n  _classes = {\n    main: 'kompletr',\n    input: 'input--search',\n    results: 'form--search__result',\n    result: 'item--result',\n    data: 'item--data',\n    focus: 'focus',\n  };\n\n  /**\n   * @description Body tag\n   */\n  _body = null;\n\n  get body() {\n    return this._body;\n  }\n\n  set body(value) {\n    this._body = value;\n  }\n\n  /**\n   * @description Main input text\n   */\n  _input = null;\n\n  get input() {\n    return this._input;\n  }\n\n  set input(value) {\n    if (value instanceof HTMLInputElement === false) {\n      throw new Error(`input should be an HTMLInputElement instance: ${value} given.`);\n    }\n    this._input = value;\n  }\n\n  /**\n   * @description HTMLElement in suggestions who's have the focus\n   */\n  _focused = null;\n\n  get focused() {\n    return this._focused;\n  }\n\n  set focused(value) {\n    this._focused = value;\n  }\n\n  /**\n   * @description HTMLElement results container\n   */\n  _result = null;\n\n  get result() {\n    return this._result;\n  }\n\n  set result(value) {\n    this._result = value;\n  }\n  \n  /**\n   * @description Broadcaster instance\n   */\n  _broadcaster = null;\n\n  /**\n   * Represents a Kompletr DOM container.\n   * \n   * @param {string|HTMLInputElement} input - The input element or its ID.\n   * @param {object} broadcaster - The broadcaster object.\n   * @param {object} [options] - The options for the DOM object.\n   * @param {string} [options.theme='light'] - The theme for the DOM object.\n   * \n   * @returns {void}\n   */\n  constructor(input, broadcaster, options = { theme: 'light' }) {\n    this._broadcaster = broadcaster;\n\n    this.body = document.getElementsByTagName('body')[0];\n    \n    this.input = input instanceof HTMLInputElement ? input : document.getElementById(input); // TODO: if the input is in the DOM, don't set class here but directly in the HTML\n    this.input.setAttribute('class', `${this._input.getAttribute('class')} ${this._classes.input}`);\n    \n    this.result = this.build('div', [ { id: this._identifiers.results }, { class: this._classes.results } ]);\n\n    this.input.parentElement.setAttribute('class', `${this._input.parentElement.getAttribute('class')} ${this._classes.main} ${options.theme}`);\n    this.input.parentElement.appendChild(this._result);\n  }\n\n  /**\n  * @description Build an HTML element and set his attributes\n  * \n  * @param {String} element HTML tag to build\n  * @param {Object[]} attributes Key / values pairs\n  * \n  * @returns {HTMLElement}\n  */\n  build(element, attributes = []) {\n    const htmlElement = document.createElement(element);\n    attributes.forEach(attribute => {\n      htmlElement.setAttribute(Object.keys(attribute)[0], Object.values(attribute)[0]);\n    });\n    return htmlElement;\n  }\n\n  /**\n   * @description Add / remove the focus on a HTMLElement\n   * \n   * @param {String} action add|remove\n   *\n   * @returns {Void}\n   */\n  focus(pointer) {\n    if (isNaN(parseInt(pointer, 10)) || pointer < 0 || pointer > this.result.children.length - 1) {\n      throw new Error('pointer should be a valid integer in the result lenght range: ' + pointer + ' given.');\n    }\n\n    this.focused = null;\n    Array.from(this.result.children).forEach(result => {\n      ((result) => {\n        result.className = this._classes.result;\n      })(result);\n    });\n\n    this.focused = this.result.children[pointer];\n    this.result.children[pointer].className += ` ${this._classes.focus}`;\n  }\n\n  /**\n   * @description Display results according to the current input value / setup\n   * \n   * @returns {Void}\n   */\n  buildResults(data, fieldsToDisplay) {\n    let html = '';\n\n    if(data && data.length) {\n      html = data\n        .reduce((html, current) => {\n          html += `<div id=\"${current.idx}\" class=\"${this._classes.result}\">`;\n          switch (typeof current.data) {\n          case 'string':\n            html += `<span class=\"${this._classes.data}\">${current.data}</span>`;\n            break;\n          case 'object': {\n            let properties = Array.isArray(fieldsToDisplay) && fieldsToDisplay.length ? fieldsToDisplay: Object.keys(current.data);\n            for(let j = 0; j < properties.length; j++) {\n              html += `<span class=\"${this._classes.data}\">${current.data[properties[j]]}</span>`;\n            }\n            break;\n          }}\n          html += '</div>';\n          return html;\n        }, '');\n      \n    } else {\n      html = `<div class=\"${this._classes.result}\">Not found</div>`;\n    }\n\n    this.result.innerHTML = html;\n\n    this._broadcaster.trigger(event.domDone, this.result); // TODO: to be validated\n  }\n}","/**\n * Enum representing different animation types.\n * \n * @enum {string}\n * @readonly\n */\nconst animation = Object.freeze({\n  fadeIn: 'fadeIn',\n  slideDown: 'slideDown',\n});\n\n\n/**\n * Enum representing different custom events.\n * \n * @enum {string}\n * @readonly\n */\nconst event = Object.freeze({\n  error: 'kompletr.error',\n  domDone: 'kompletr.dom.done',\n  dataDone: 'kompletr.data.done',\n  selectDone: 'kompletr.select.done'\n});\n\n/**\n * Enum representing the origin of a value.\n * \n * @enum {string}\n * @readonly\n */\nconst origin = Object.freeze({\n  cache: 'cache',\n  callback: 'callback',\n  local: 'local',\n});\n\n/**\n * Enum representing the search expression options.\n * \n * @enum {string}\n * @readonly\n */\nconst searchExpression = Object.freeze({\n  prefix: 'prefix',\n  expression: 'expression',\n});\n\n/**\n * Enum representing the theme options.\n *\n * @enum {string}\n * @readonly\n */\nconst theme = Object.freeze({\n  light: 'light',\n  dark: 'dark',\n});\n\nexport { animation, event, origin, searchExpression, theme };","\nimport { Animation } from './animation.js';\nimport { event, origin, searchExpression } from './enums.js';\n\n/**\n * @summary Kømpletr.js is a library providing features dedicated to autocomplete fields.\n * \n * @author Steve Lebleu <ping@steve-lebleu.dev>\n * \n * @see https://github.com/steve-lebleu/kompletr\n */\nexport default class Kompletr {\n  /**\n   * \n   */\n  broadcaster = null;\n\n  /**\n   * \n   */\n  cache = null;\n\n  /**\n   * \n   */\n  callbacks = {};\n\n  /**\n   * \n   */\n  configuration = null;\n\n  /**\n   * \n   */\n  dom = null;\n\n  /**\n   * \n   */\n  props = null;\n\n  constructor({ configuration, properties, dom, cache, broadcaster, onKeyup, onSelect, onError }) {\n    try {\n      this.configuration = configuration;\n      this.broadcaster = broadcaster;\n      this.props = properties;\n      this.dom = dom;\n      this.cache = cache;\n\n      this.broadcaster.subscribe(event.error, this.error);\n      this.broadcaster.subscribe(event.dataDone, this.showResults);\n      this.broadcaster.subscribe(event.domDone, Animation[this.configuration.animationType]);\n      this.broadcaster.subscribe(event.domDone, this.bindResults);\n      this.broadcaster.subscribe(event.selectDone, this.closeTheShop);\n\n      this.broadcaster.listen(this.dom.input, 'keyup', this.suggest);\n      this.broadcaster.listen(this.dom.body, 'click', this.closeTheShop);\n\n      if(onKeyup || onSelect || onError) {\n        this.callbacks = Object.assign(this.callbacks, { onKeyup, onSelect, onError });\n      }\n    } catch(e) {\n      broadcaster ? broadcaster.trigger(event.error, e) : console.error(`[kompletr] An error has occured -> ${e.stack}`);\n    }\n  }\n\n  closeTheShop = (e) => {\n    if (e.srcElement === this.dom.input) {\n      return true;\n    }\n    Animation.animateBack(this.dom.result, this.configuration.animationType, this.configuration.animationDuration);\n    this.resetPointer();\n  };\n\n  resetPointer = () => {\n    this.props.pointer = -1;\n  };\n\n  error = (e) => {\n    console.error(`[kompletr] An error has occured -> ${e.stack}`);\n    Animation.fadeIn(this.dom.result);\n    this.callbacks.onError && this.callbacks.onError(e);\n  };\n\n  filter = (data, pattern) => {\n    return data.filter((record) => {\n      const value = typeof record.data === 'string' ? record.data : record.data[this.configuration.propToMapAsValue];\n      if (this.configuration.filterOn === searchExpression.prefix) {\n        return value.toLowerCase().lastIndexOf(pattern.toLowerCase(), 0) === 0;\n      }\n      return value.toLowerCase().lastIndexOf(pattern.toLowerCase()) !== -1;\n    });\n  };\n\n  /**\n   * @description CustomEvent 'this.request.done' listener\n   * \n   * @todo Check something else to determine if we filter or not -> currently just the presence of onKeyup callback\n   */\n  showResults = async ({ from, data }) => {\n    this.props.data = data;\n\n    data = this.props.data.map((record, idx) => ({ idx, data: record }) ); // TODO: Check to avoid this\n\n    // TODO: really when data comes from the cache ?\n    if (!this.callbacks.onKeyup) {\n      data = this.filter(data, this.dom.input.value);\n    }\n\n    if (this.cache && from !== origin.cache) {\n      this.cache.set({ string: this.dom.input.value, data });\n    }\n\n    this.dom.buildResults(data.slice(0, this.configuration.maxResults), this.configuration.fieldsToDisplay);\n  };\n\n  /**\n   * @description CustomEvent 'kompletr.dom.done' listener\n   */\n  bindResults = () => {    \n    if(this.dom.result?.children?.length) {\n      for(let i = 0; i < this.dom.result.children.length; i++) {\n        ((i) => {\n          return this.broadcaster.listen(this.dom.result.children[i], 'click', () => {\n            this.dom.focused = this.dom.result.children[i];\n            this.select(this.dom.focused.id);\n          });\n        })(i);\n      }\n    }\n  };\n\n  /**\n   * @description 'input.keyup' listener\n   */\n  suggest = (e) => {\n    if (this.dom.input.value.length < this.configuration.startQueryingFromChar) {\n      return;\n    }\n    \n    const keyCode = e.keyCode;\n\n    switch (keyCode) {\n    case 13:  // Enter\n      this.select(this.dom.focused.id);\n      break;\n    case 38: // Up\n    case 40: // Down\n      this.navigate(keyCode);\n      break;\n    default:\n      if (this.dom.input.value !== this.props.previousValue) {\n        this.hydrate(this.dom.input.value);\n      }\n      this.resetPointer();\n      break;\n    }\n  };\n\n  /**\n   * @description Manage the data hydration according to the current setup (cache, request or local data)\n   * \n   * @param {String} value Current input value\n   * \n   * @emits CustomEvent 'this.request.done' { from, data }\n   * @emits CustomEvent 'this.error' { error }\n   * \n   * @returns {Void}\n   * \n   * @todo options.data could returns Promise<Array>, and same for the onKeyup callback\n   */\n  hydrate = async (value) => {\n    try {\n      if (this.cache && await this.cache.isValid(value)) {\n        this.cache.get(value, (data) => {\n          this.broadcaster.trigger(event.dataDone, { from: origin.cache, data: data });  \n        });\n      } else if (this.callbacks.onKeyup) {\n        this.callbacks.onKeyup(value, (data) => {\n          this.broadcaster.trigger(event.dataDone, { from: origin.callback, data: data });\n        });\n      } else {\n        this.broadcaster.trigger(event.dataDone, { from: origin.local, data: this.props.data });\n      }\n    } catch(e) {\n      this.broadcaster.trigger(event.error, e);\n    }\n  };\n\n  /**\n   * @description Apply visual navigation into the suggestions set\n   * \n   * @param {Number} keyCode The current keyCode value\n   * \n   * @returns {Void}\n   */\n  navigate = (keyCode) => {\n    try {\n      if (keyCode != 38 && keyCode != 40) {\n        return false;\n      }\n  \n      if(this.props.pointer < -1 || this.props.pointer > this.dom.result.children.length - 1) {\n        return false;\n      }\n      \n      if ((keyCode === 38 && this.props.pointer === 0) || (keyCode === 40 && this.props.pointer === this.dom.result.children.length - 1)) {\n        return false;\n      }\n\n      if (keyCode === 38 && this.props.pointer >= -1) {\n        this.props.pointer--;\n      } else if (keyCode === 40 && this.props.pointer < this.dom.result.children.length - 1) {\n        this.props.pointer++;\n      } \n  \n      this.dom.focus(this.props.pointer);\n    } catch(e) {\n      this.broadcaster.trigger(event.error, e);\n    }\n  };\n\n  /**\n   * @description Select a suggested item as user choice\n   * \n   * @param {Number} idx The index of the selected suggestion\n   * \n   * @emits CustomEvent 'this.select.done'\n   * \n   * @returns {Void}\n   */\n  select = (idx = 0) => {\n    try {\n      this.dom.input.value = typeof this.props.data[idx] === 'object' ? this.props.data[idx][this.configuration.propToMapAsValue] : this.props.data[idx];\n      this.callbacks.onSelect && this.callbacks.onSelect(this.props.data[idx]);\n      this.broadcaster.trigger(event.selectDone);\n    } catch(e) {\n      this.broadcaster.trigger(event.error, e);\n    }\n  };\n}","/**\n * @description Dynamic properties of current Kompltr instance.\n */\nexport class Properties {\n\n  /**\n   * @description Data storage\n   */\n  _data = null;\n\n  get data() {\n    return this._data;\n  }\n\n  set data(value) {\n    if (!Array.isArray(value)) {\n      throw new Error(`data must be an array (${value.toString()} given)`);\n    }\n    this._data = value;\n  }\n\n  /**\n   * @description Position of the pointer inside the suggestions\n   */\n  _pointer = null;\n\n  get pointer() {\n    return this._pointer;\n  }\n\n  set pointer(value) {\n    if (isNaN(parseInt(value, 10))) {\n      throw new Error(`pointer must be an integer (${value.toString()} given)`);\n    }\n    this._pointer = value;\n  }\n\n  /**\n   * @description Previous input value\n   */\n  _previousValue = null;\n\n  get previousValue() {\n    return this._previousValue;\n  }\n\n  set previousValue(value) {\n    this._previousValue = value;\n  }\n\n  constructor(data = []) {\n    this._data = data;\n  }\n}","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Kompletr from './kompletr.js';\n\nimport { Configuration } from './configuration.js';\nimport { Cache } from './cache.js';\nimport { Broadcaster } from './broadcaster.js';\nimport { Properties } from './properties.js';\nimport { DOM } from './dom.js';\n\n/**\n * Initializes the module with the provided data and options.\n *\n * @param {string|HTMLInputElement} input - The target input as selector or instance.\n * @param {Object} data - The data used by the application.\n * @param {Object} options - The configuration options for the application.\n * @param {Function} onKeyup - The callback function to be executed on keyup event.\n * @param {Function} onSelect - The callback function to be executed on select event.\n * @param {Function} onError - The callback function to be executed on error event.\n * \n * @returns {void}\n */\nconst kompletr = function({ input, data, options, onKeyup, onSelect, onError }) {\n  const broadcaster = new Broadcaster();\n\n  const configuration = new Configuration(options);\n  const properties = new Properties(data);\n\n  const dom = new DOM(input, broadcaster, configuration);\n  const cache = configuration.cache ? new Cache(broadcaster, configuration.cache) : null;\n  \n  new Kompletr({ configuration, properties, dom, cache, broadcaster, onKeyup, onSelect, onError });\n};\n\nwindow.kompletr = kompletr;\n\nexport { kompletr };"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"main.js","mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACO;AACP;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,KAAK;AACL;AACA;;;;;;;;;;;;;;;AC9CmC;;AAEnC;AACA;AACA;AACO;AACP;;AAEA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,aAAa,UAAU;AACvB;AACA,cAAc,OAAO;AACrB;AACA;AACA,uBAAuB,4CAAK;AAC5B,gDAAgD,YAAY,4CAAK,EAAE,IAAI,MAAM;AAC7E;AACA,4BAA4B,eAAe;AAC3C;;AAEA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,UAAU;AACvB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB;AACA,cAAc,OAAO;AACrB;AACA,2BAA2B;AAC3B,uBAAuB,4CAAK;AAC5B,gDAAgD,YAAY,4CAAK,EAAE,IAAI,MAAM;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;ACrDmC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACO;;AAEP;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB,aAAa,UAAU;AACvB;AACA,mDAAmD;AACnD,4CAA4C;AAC5C;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX,OAAO;AACP;AACA,kCAAkC,4CAAK;AACvC,OAAO;AACP;;AAEA;AACA;AACA;AACA,aAAa,QAAQ,OAAO;AAC5B;AACA,4CAA4C;AAC5C;AACA,eAAe;AACf;AACA,QAAQ,cAAc;AACtB;AACA;AACA;AACA;AACA,gDAAgD,eAAe;AAC/D,sBAAsB,OAAO,wCAAwC,SAAS;AAC9E,OAAO;AACP;AACA,kCAAkC,4CAAK;AACvC,OAAO;AACP;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA,6CAA6C,OAAO;AACpD;AACA;AACA;AACA;AACA,MAAM;AACN,gCAAgC,4CAAK;AACrC;AACA;AACA;;;;;;;;;;;;;;;ACnGqD;;AAErD;AACA;AACA;AACO;AACP;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA,WAAW,4CAAK;;AAEhB;AACA;AACA,YAAY;AACZ;AACA;AACA;;AAEA;AACA;AACA,YAAY;AACZ;AACA;;AAEA;AACA;AACA,YAAY;AACZ;AACA;;AAEA;AACA;AACA,YAAY;AACZ;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAY;AACZ;AACA,cAAc,uDAAgB;;AAE9B;AACA;AACA,YAAY;AACZ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8BAA8B,4CAAK;AACnC;AACA,gDAAgD,iBAAiB,IAAI,OAAO;AAC5E;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8BAA8B,uDAAgB;AAC9C;AACA,mDAAmD,iBAAiB,IAAI,OAAO;AAC/E;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;AC5KmC;;AAE5B;AACP;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uEAAuE,OAAO;AAC9E;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,yBAAyB;AACtC,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA,8CAA8C,gBAAgB;AAC9D;;AAEA;AACA;AACA,6FAA6F;AAC7F,wCAAwC,mCAAmC,EAAE,oBAAoB;AACjG;AACA,wCAAwC,+BAA+B,IAAI,+BAA+B;;AAE1G,sDAAsD,iDAAiD,EAAE,oBAAoB,EAAE,cAAc;AAC7I;AACA;;AAEA;AACA;AACA;AACA,YAAY,QAAQ;AACpB,YAAY,UAAU;AACtB;AACA,cAAc;AACd;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP,KAAK;;AAEL;AACA,mDAAmD,oBAAoB;AACvE;;AAEA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;;AAEA;AACA;AACA;AACA,8BAA8B,YAAY,WAAW,qBAAqB;AAC1E;AACA;AACA,oCAAoC,mBAAmB,IAAI,aAAa;AACxE;AACA;AACA;AACA,2BAA2B,uBAAuB;AAClD,sCAAsC,mBAAmB,IAAI,4BAA4B;AACzF;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA,MAAM;AACN,4BAA4B,qBAAqB;AACjD;;AAEA;;AAEA,8BAA8B,4CAAK,wBAAwB;AAC3D;AACA;;;;;;;;;;;;;;;;;ACpLA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA,CAAC;;;;;;;;;;;;;;;;;;;AC5C0C;AACkB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACf;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,gBAAgB,gFAAgF;AAChG;AACA;AACA;AACA;AACA;AACA;;AAEA,iCAAiC,4CAAK;AACtC,iCAAiC,4CAAK;AACtC,iCAAiC,4CAAK,UAAU,oDAAS;AACzD,iCAAiC,4CAAK;AACtC,iCAAiC,4CAAK;;AAEtC;AACA;;AAEA;AACA,yDAAyD,4BAA4B;AACrF;AACA,MAAM;AACN,wCAAwC,4CAAK,iEAAiE,QAAQ;AACtH;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI,oDAAS;AACb;AACA;;AAEA;AACA;AACA;;AAEA;AACA,wDAAwD,QAAQ;AAChE,IAAI,oDAAS;AACb;AACA;;AAEA;AACA;AACA;AACA,0CAA0C,uDAAgB;AAC1D;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA,yBAAyB,YAAY;AACrC;;AAEA,mDAAmD,mBAAmB,KAAK;;AAE3E;AACA;AACA;;AAEA,6CAA6C,6CAAM;AACnD,uBAAuB,oCAAoC;AAC3D;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,qBAAqB,qCAAqC;AAC1D;AACA;AACA;AACA;AACA,WAAW;AACX,SAAS;AACT;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,aAAa,oDAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,8CAA8C;AAC9C,uCAAuC;AACvC;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC,4CAAK,aAAa,MAAM,6CAAM,oBAAoB;AACrF,SAAS;AACT,QAAQ;AACR;AACA,mCAAmC,4CAAK,aAAa,MAAM,6CAAM,uBAAuB;AACxF,SAAS;AACT,QAAQ;AACR,iCAAiC,4CAAK,aAAa,MAAM,6CAAM,+BAA+B;AAC9F;AACA,MAAM;AACN,+BAA+B,4CAAK;AACpC;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA,MAAM;AACN,+BAA+B,4CAAK;AACpC;AACA;;AAEA;AACA;AACA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA,+BAA+B,4CAAK;AACpC,MAAM;AACN,+BAA+B,4CAAK;AACpC;AACA;AACA;;;;;;;;;;;;;;AC9OA;AACA;AACA;AACO;;AAEP;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,gDAAgD,kBAAkB;AAClE;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,qDAAqD,kBAAkB;AACvE;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;UCrDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;;;;;;;;;;;;ACNqC;;AAEc;AAChB;AACY;AACF;AACd;;AAE/B;AACA;AACA;AACA,WAAW,yBAAyB;AACpC,WAAW,QAAQ;AACnB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB,WAAW,UAAU;AACrB,WAAW,UAAU;AACrB;AACA,aAAa;AACb;AACA,4BAA4B,kDAAkD;AAC9E;AACA;AACA,UAAU,wDAAW;AACrB,UAAU,4DAAa;AACvB,UAAU,sDAAU;AACpB;AACA;AACA;AACA,UAAU,wCAAG;AACb,gCAAgC,4CAAK;AACrC;AACA;AACA,QAAQ,oDAAQ,GAAG,gFAAgF;AACnG,IAAI;AACJ,wDAAwD,QAAQ;AAChE;AACA;;AAEA","sources":["webpack://kompletr/./src/js/animation.js","webpack://kompletr/./src/js/broadcaster.js","webpack://kompletr/./src/js/cache.js","webpack://kompletr/./src/js/configuration.js","webpack://kompletr/./src/js/dom.js","webpack://kompletr/./src/js/enums.js","webpack://kompletr/./src/js/kompletr.js","webpack://kompletr/./src/js/properties.js","webpack://kompletr/webpack/bootstrap","webpack://kompletr/webpack/runtime/define property getters","webpack://kompletr/webpack/runtime/hasOwnProperty shorthand","webpack://kompletr/webpack/runtime/make namespace object","webpack://kompletr/./src/js/index.js"],"sourcesContent":["/**\n * Represents an Animation class that provides various animation effects.\n */\nexport class Animation {\n  constructor() {}\n\n  /**\n   * Apply a fadeIn animation effect to the target HTML element.\n   * \n   * @param {HTMLElement} element - The target HTML element.\n   * \n   * @returns {Void}\n   * \n   * @todo Manage duration\n   */\n  static fadeIn(element) {\n    element.style.opacity = 0;\n    element.style.display = 'block';\n    (function fade(){\n      let value = parseFloat(element.style.opacity);\n      if (!((value += .1) > 1)) {\n        element.style.opacity = value;\n        requestAnimationFrame(fade);\n      }\n    })();\n  }\n\n  /**\n   * Apply a fadeOut animation effect to the target HTML element.\n   * \n   * @param {HTMLElement} element - The target HTML element.\n   * \n   * @returns {Void}\n   * \n   * @todo Manage duration\n   */\n  static fadeOut(element) {\n    element.style.opacity = 1;\n    (function fade() {\n      if ((element.style.opacity -= .1) < 0) {\n        element.style.display = 'none';\n      } else {\n        requestAnimationFrame(fade);\n      }\n    })();\n  }\n}","import { event } from './enums.js';\n\n/**\n * Represents a Broadcaster that allows subscribing to and triggering events.\n */\nexport class Broadcaster {\n  subscribers = [];\n\n  constructor() {}\n\n  /**\n   * Subscribes to an event.\n   * \n   * @param {string} type - The type of event to subscribe to.\n   * @param {Function} handler - The event handler function.\n   * \n   * @throws {Error} If the event type is not valid.\n   */\n  subscribe(type, handler) {\n    if (!Object.values(event).includes(type)) {\n      throw new Error(`Event should be one of ${Object.keys(event)}: ${type} given.`);\n    }\n    this.subscribers.push({ type, handler });\n  }\n\n  /**\n   * Listens for an event on a specified element.\n   * \n   * @param {HTMLElement} element - The element to listen on.\n   * @param {string} type - The type of event to listen for.\n   * @param {Function} handler - The event handler function.\n   */\n  listen(element, type, handler) {\n    element.addEventListener(type, handler);\n  }\n\n  /**\n   * Triggers an event.\n   * \n   * @param {string} type - The type of event to trigger.\n   * @param {Object} detail - Additional details to pass to the event handler.\n   * \n   * @throws {Error} If the event type is not valid.\n   */\n  trigger(type, detail = {}) {\n    if (!Object.values(event).includes(type)) {\n      throw new Error(`Event should be one of ${Object.keys(event)}: ${type} given.`);\n    }\n    \n    this.subscribers\n      .filter(subscriber => subscriber.type === type)\n      .forEach(subscriber => subscriber.handler(detail));\n  }\n}","import { event } from './enums.js';\n\n/**\n * @description Kompletr simple caching mechanism implementation.\n * \n * @see https://developer.mozilla.org/en-US/docs/Web/API/Cache\n * @see https://web.dev/articles/cache-api-quick-guide\n */\nexport class Cache {\n\n  /**\n   * @description Cache name value\n   */\n  _name = null;\n\n  /**\n   * @description Cache timelife duration\n   */\n  _duration = null;\n  \n  /**\n   * @description Broadcaster instance\n   */\n  _braodcaster = null;\n  \n  constructor(broadcaster, duration = 0, name = 'kompletr.cache') {\n    if (!window.caches) {\n      return false;\n    }\n    this._broadcaster = broadcaster;\n    this._name = name;\n    this._duration = duration;\n  }\n\n  /**\n   * @description Retrieve the data stored in cache and dispatch event with\n   * \n   * @param {String} string Input value of the current request as string\n   * @param {Function} done Callback function\n   * \n   * @emits CustomEvent 'kompltetr.request.done' { from, data }\n   * @emits CustomEvent 'kompltetr.error' { error }\n   * \n   * @returns {Void}\n   */\n  get(string, done) {\n    window.caches.open(this._name)\n      .then(cache => {\n        cache.match(string)\n          .then(async (data) => {\n            done(await data.json());\n          });\n      })\n      .catch(e => {\n        this._broadcaster.trigger(event.error, e);\n      });\n  }\n\n  /**\n   * @description Push data into the cache\n   * \n   * @param {Object} args { string, data }\n   * \n   * @emits CustomEvent 'kompltetr.error' { error }\n   * \n   * @returns {Void}\n   */\n  set({ string, data }) {\n    window.caches.open(this._name)\n      .then(cache => {\n        const headers = new Headers();\n        headers.set('Content-Type', 'application/json');\n        headers.set('Cache-Control', `max-age=${this._duration}`);\n        cache.put(`/${string}`, new Response(JSON.stringify(data), { headers }));\n      })\n      .catch(e => {\n        this._broadcaster.trigger(event.error, e);\n      });\n  }\n\n  /**\n   * @description Check the cache validity regarding the current request and the cache timelife\n   * \n   * @param {String} string The current request value\n   *\n   * @returns {Promise<Boolean>}\n   */\n  async isValid(string) {\n    try {\n      const cache = await window.caches.open(this._name);\n      const response = await cache.match(`/${string}`);\n      if (!response) {\n        return false;\n      }\n      return true;\n    } catch(e) {\n      this._broadcaster.trigger(event.error, e);\n    }\n  }\n}","import { searchExpression, theme } from './enums.js';\n\n/**\n * @description Represents the configuration for the Kompleter library.\n */\nexport class Configuration {\n  /**\n   * Indicates whether multiple selections are allowed.\n   * @type {boolean}\n   * @private\n   */\n  _multiple = false;\n  \n  /**\n   * The theme for the kompletr options.\n   * @type {string}\n   */\n  _theme = theme.light;\n\n  /**\n   * Array containing the fields to be displayed.\n   * @type {Array}\n   * @private\n   */\n  _fieldsToDisplay = [];\n\n  /**\n   * The maximum number of results to display.\n   * @type {number}\n   */\n  _maxResults = 10;\n\n  /**\n   * The character index from which querying should start.\n   * @type {number}\n   */\n  _startQueryingFromChar = 2;\n\n  /**\n   * Represents the value of a property to be mapped.\n   * @type {string}\n   * @private\n   */\n  _propToMapAsValue = '';\n\n  /**\n   * The filter option used for filtering data.\n   * Possible values are 'prefix', 'expression'.\n   * @type {string}\n   */\n  _filterOn = searchExpression.prefix;\n\n  /**\n   * Represents the cache value.\n   * @type {number}\n   * @private\n   */\n  _cache = 0;\n\n  /**\n   * @description Enable / disable multiple choices\n   */\n  get multiple() {\n    return this._multiple;\n  }\n\n  set multiple(value) {\n    this._multiple = value;\n  }\n\n  /**\n   * @description Display theme between light | dark\n   */\n  get theme() {\n    return this._theme;\n  }\n\n  set theme(value) {\n    const valid = Object.keys(theme);\n    if (!valid.includes(value)) {\n      throw new Error(`theme should be one of ${valid.toString()}, ${value} given`);\n    }\n    this._theme = value;\n  }\n\n  /**\n   * @description Fields to display in each suggestion item\n   */\n  get fieldsToDisplay() {\n    return this._fieldsToDisplay;\n  }\n\n  set fieldsToDisplay(value) {\n    this._fieldsToDisplay = value;\n  }\n  \n  /**\n   * @description Maximum number of results to display as suggestions (can be different thant the number of results availables)\n   */\n  get maxResults() {\n    return this._maxResults;\n  }\n\n  set maxResults(value) {\n    this._maxResults = value;\n  }\n\n  /**\n   * @description Input minimal value length before to fire research\n   */\n  get startQueryingFromChar() {\n    return this._startQueryingFromChar;\n  }\n\n  set startQueryingFromChar(value) {\n    this._startQueryingFromChar = value;\n  }\n\n  /**\n   * @description Property to map as value\n   */\n  get propToMapAsValue() {\n    return this._propToMapAsValue;\n  }\n\n  set propToMapAsValue(value) {\n    this._propToMapAsValue = value;\n  }\n\n  /**\n   * @description Apply filtering from the beginning of the word (prefix) or on the entire expression (expression)\n   */\n  get filterOn() {\n    return this._filterOn;\n  }\n\n  set filterOn(value) {\n    const valid = Object.keys(searchExpression);\n    if (!valid.includes(value)) {\n      throw new Error(`filterOn should be one of ${valid.toString()}, ${value} given`);\n    }\n    this._filterOn = value;\n  }\n\n  /**\n   * @description Time life of the cache when data is retrieved from an API call\n   */\n  get cache() {\n    return this._cache;\n  }\n\n  set cache(value) {\n    if (isNaN(parseInt(value, 10))) {\n      throw new Error('cache should be an integer');\n    }\n    this._cache = value;\n  }\n\n  constructor(options) {\n    if (options === undefined) return;\n    if (typeof options !== 'object') {\n      throw new Error('options should be an object');\n    }\n    this.theme = options?.theme || this._theme;\n    this.multiple = options?.multiple || this._multiple;\n    this.fieldsToDisplay = options?.fieldsToDisplay || this._fieldsToDisplay;\n    this.maxResults = options?.maxResults || this._maxResults;\n    this.startQueryingFromChar = options?.startQueryingFromChar || this._startQueryingFromChar;\n    this.propToMapAsValue = options?.propToMapAsValue || this._propToMapAsValue;\n    this.filterOn = options?.filterOn || this._filterOn;\n    this.cache = options?.cache || this._cache;\n  }\n}","import { event } from './enums.js';\n\nexport class DOM {\n  /**\n   * @description Identifiers for the DOM elements\n   */\n  _identifiers = {\n    results: 'kpl-result',\n  };\n\n  /**\n   * @description Classes for the DOM elements\n   */\n  _classes = {\n    main: 'kompletr',\n    input: 'input--search',\n    results: 'form--search__result',\n    result: 'item--result',\n    data: 'item--data',\n    focus: 'focus',\n  };\n\n  /**\n   * @description Body tag\n   */\n  _body = null;\n\n  get body() {\n    return this._body;\n  }\n\n  set body(value) {\n    this._body = value;\n  }\n\n  /**\n   * @description Main input text\n   */\n  _input = null;\n\n  get input() {\n    return this._input;\n  }\n\n  set input(value) {\n    if (value instanceof HTMLInputElement === false) {\n      throw new Error(`input should be an HTMLInputElement instance: ${value} given.`);\n    }\n    this._input = value;\n  }\n\n  /**\n   * @description HTMLElement in suggestions who's have the focus\n   */\n  _focused = null;\n\n  get focused() {\n    return this._focused;\n  }\n\n  set focused(value) {\n    this._focused = value;\n  }\n\n  /**\n   * @description HTMLElement results container\n   */\n  _result = null;\n\n  get result() {\n    return this._result;\n  }\n\n  set result(value) {\n    this._result = value;\n  }\n  \n  /**\n   * @description Broadcaster instance\n   */\n  _broadcaster = null;\n\n  /**\n   * Represents a Kompletr DOM container.\n   * \n   * @param {string|HTMLInputElement} input - The input element or its ID.\n   * @param {object} broadcaster - The broadcaster object.\n   * @param {object} [options] - The options for the DOM object.\n   * @param {string} [options.theme='light'] - The theme for the DOM object.\n   * \n   * @returns {void}\n   */\n  constructor(input, broadcaster, options = { theme: 'light' }) {\n    this._broadcaster = broadcaster;\n\n    this.body = document.getElementsByTagName('body')[0];\n    \n    this.input = input instanceof HTMLInputElement ? input : document.getElementById(input); // TODO: if the input is in the DOM, don't set class here but directly in the HTML\n    this.input.setAttribute('class', `${this._input.getAttribute('class')} ${this._classes.input}`);\n    \n    this.result = this.build('div', [ { id: this._identifiers.results }, { class: this._classes.results } ]);\n\n    this.input.parentElement.setAttribute('class', `${this._input.parentElement.getAttribute('class')} ${this._classes.main} ${options.theme}`);\n    this.input.parentElement.appendChild(this._result);\n  }\n\n  /**\n  * @description Build an HTML element and set his attributes\n  * \n  * @param {String} element HTML tag to build\n  * @param {Object[]} attributes Key / values pairs\n  * \n  * @returns {HTMLElement}\n  */\n  build(element, attributes = []) {\n    const htmlElement = document.createElement(element);\n    attributes.forEach(attribute => {\n      htmlElement.setAttribute(Object.keys(attribute)[0], Object.values(attribute)[0]);\n    });\n    return htmlElement;\n  }\n\n  /**\n   * @description Add / remove the focus on a HTMLElement\n   * \n   * @param {String} action add|remove\n   *\n   * @returns {Void}\n   */\n  focus(pointer) {\n    if (isNaN(parseInt(pointer, 10)) || pointer < 0 || pointer > this.result.children.length - 1) {\n      throw new Error('pointer should be a valid integer in the result lenght range: ' + pointer + ' given.');\n    }\n\n    this.focused = null;\n    Array.from(this.result.children).forEach(result => {\n      ((result) => {\n        result.className = this._classes.result;\n      })(result);\n    });\n\n    this.focused = this.result.children[pointer];\n    this.result.children[pointer].className += ` ${this._classes.focus}`;\n  }\n\n  /**\n   * @description Display results according to the current input value / setup\n   * \n   * @returns {Void}\n   */\n  buildResults(data, fieldsToDisplay) {\n    let html = '';\n\n    if(data && data.length) {\n      html = data\n        .reduce((html, current) => {\n          html += `<div id=\"${current.idx}\" class=\"${this._classes.result}\">`;\n          switch (typeof current.data) {\n          case 'string':\n            html += `<span class=\"${this._classes.data}\">${current.data}</span>`;\n            break;\n          case 'object': {\n            let properties = Array.isArray(fieldsToDisplay) && fieldsToDisplay.length ? fieldsToDisplay: Object.keys(current.data);\n            for(let j = 0; j < properties.length; j++) {\n              html += `<span class=\"${this._classes.data}\">${current.data[properties[j]]}</span>`;\n            }\n            break;\n          }}\n          html += '</div>';\n          return html;\n        }, '');\n      \n    } else {\n      html = `<div class=\"${this._classes.result}\">Not found</div>`;\n    }\n\n    this.result.innerHTML = html;\n\n    this._broadcaster.trigger(event.domDone, this.result); // TODO: to be validated\n  }\n}","/**\n * Enum representing different custom events.\n * \n * @enum {string}\n * @readonly\n */\nconst event = Object.freeze({\n  error: 'kompletr.error',\n  domDone: 'kompletr.dom.done',\n  dataDone: 'kompletr.data.done',\n  selectDone: 'kompletr.select.done'\n});\n\n/**\n * Enum representing the origin of a value.\n * \n * @enum {string}\n * @readonly\n */\nconst origin = Object.freeze({\n  cache: 'cache',\n  callback: 'callback',\n  local: 'local',\n});\n\n/**\n * Enum representing the search expression options.\n * \n * @enum {string}\n * @readonly\n */\nconst searchExpression = Object.freeze({\n  prefix: 'prefix',\n  expression: 'expression',\n});\n\n/**\n * Enum representing the theme options.\n *\n * @enum {string}\n * @readonly\n */\nconst theme = Object.freeze({\n  light: 'light',\n  dark: 'dark',\n});\n\nexport { event, origin, searchExpression, theme };","\nimport { Animation } from './animation.js';\nimport { event, origin, searchExpression } from './enums.js';\n\n/**\n * @summary Kømpletr.js is a library providing features dedicated to autocomplete fields.\n * \n * @author Steve Lebleu <ping@steve-lebleu.dev>\n * \n * @see https://github.com/steve-lebleu/kompletr\n */\nexport default class Kompletr {\n  /**\n   * \n   */\n  broadcaster = null;\n\n  /**\n   * \n   */\n  cache = null;\n\n  /**\n   * \n   */\n  callbacks = {};\n\n  /**\n   * \n   */\n  configuration = null;\n\n  /**\n   * \n   */\n  dom = null;\n\n  /**\n   * \n   */\n  props = null;\n\n  constructor({ configuration, properties, dom, cache, broadcaster, onKeyup, onSelect, onError }) {\n    try {\n      this.configuration = configuration;\n      this.broadcaster = broadcaster;\n      this.props = properties;\n      this.dom = dom;\n      this.cache = cache;\n\n      this.broadcaster.subscribe(event.error, this.error);\n      this.broadcaster.subscribe(event.dataDone, this.showResults);\n      this.broadcaster.subscribe(event.domDone, Animation.fadeIn.bind(null, this.dom.result));\n      this.broadcaster.subscribe(event.domDone, this.bindResults);\n      this.broadcaster.subscribe(event.selectDone, this.closeTheShop);\n\n      this.broadcaster.listen(this.dom.input, 'keyup', this.suggest);\n      this.broadcaster.listen(this.dom.body, 'click', this.closeTheShop);\n\n      if(onKeyup || onSelect || onError) {\n        this.callbacks = Object.assign(this.callbacks, { onKeyup, onSelect, onError });\n      }\n    } catch(e) {\n      broadcaster ? broadcaster.trigger(event.error, e) : console.error(`[kompletr] An error has occured -> ${e.stack}`);\n    }\n  }\n\n  closeTheShop = (e) => {\n    if (e.srcElement === this.dom.input) {\n      return true;\n    }\n    Animation.fadeOut(this.dom.result);\n    this.resetPointer();\n  };\n\n  resetPointer = () => {\n    this.props.pointer = -1;\n  };\n\n  error = (e) => {\n    console.error(`[kompletr] An error has occured -> ${e.stack}`);\n    Animation.fadeOut(this.dom.result);\n    this.callbacks.onError && this.callbacks.onError(e);\n  };\n\n  filter = (data, pattern) => {\n    return data.filter((record) => {\n      const value = typeof record.data === 'string' ? record.data : record.data[this.configuration.propToMapAsValue];\n      if (this.configuration.filterOn === searchExpression.prefix) {\n        return value.toLowerCase().lastIndexOf(pattern.toLowerCase(), 0) === 0;\n      }\n      return value.toLowerCase().lastIndexOf(pattern.toLowerCase()) !== -1;\n    });\n  };\n\n  /**\n   * @description CustomEvent 'this.request.done' listener\n   * \n   * @todo Check something else to determine if we filter or not -> currently just the presence of onKeyup callback\n   */\n  showResults = async ({ from, data }) => {\n    this.props.data = data;\n\n    data = this.props.data.map((record, idx) => ({ idx, data: record }) ); // TODO: Check to avoid this\n\n    if (!this.callbacks.onKeyup) {\n      data = this.filter(data, this.dom.input.value);\n    }\n\n    if (this.configuration.cache && from !== origin.cache) {\n      this.cache.set({ string: this.dom.input.value, data });\n    }\n\n    this.dom.buildResults(data.slice(0, this.configuration.maxResults), this.configuration.fieldsToDisplay);\n  };\n\n  /**\n   * @description CustomEvent 'kompletr.dom.done' listener\n   */\n  bindResults = () => {    \n    if(this.dom.result?.children?.length) {\n      for(let i = 0; i < this.dom.result.children.length; i++) {\n        ((i) => {\n          return this.broadcaster.listen(this.dom.result.children[i], 'click', () => {\n            this.dom.focused = this.dom.result.children[i];\n            this.select(this.dom.focused.id);\n          });\n        })(i);\n      }\n    }\n  };\n\n  /**\n   * @description 'input.keyup' listener\n   */\n  suggest = (e) => {\n    if (this.dom.input.value.length < this.configuration.startQueryingFromChar) {\n      return Animation.fadeOut(this.dom.result);\n    }\n    \n    switch (e.keyCode) {\n    case 13:  // Enter\n      this.select(this.dom.focused.id);\n      break;\n    case 38: // Up\n    case 40: // Down\n      this.navigate(e.keyCode);\n      break;\n    default:\n      if (this.dom.input.value !== this.props.previousValue) {\n        this.hydrate(this.dom.input.value);\n      }\n      this.resetPointer();\n      break;\n    }\n  };\n\n  /**\n   * @description Manage the data hydration according to the current setup (cache, request or local data)\n   * \n   * @param {String} value Current input value\n   * \n   * @emits CustomEvent 'this.request.done' { from, data }\n   * @emits CustomEvent 'this.error' { error }\n   * \n   * @returns {Void}\n   * \n   * @todo options.data could returns Promise<Array>, and same for the onKeyup callback\n   */\n  hydrate = async (value) => {\n    try {\n      if (this.configuration.cache && await this.cache.isValid(value)) {\n        this.cache.get(value, (data) => {\n          this.broadcaster.trigger(event.dataDone, { from: origin.cache, data: data });  \n        });\n      } else if (this.callbacks.onKeyup) {\n        this.callbacks.onKeyup(value, (data) => {\n          this.broadcaster.trigger(event.dataDone, { from: origin.callback, data: data });\n        });\n      } else {\n        this.broadcaster.trigger(event.dataDone, { from: origin.local, data: this.props.data });\n      }\n    } catch(e) {\n      this.broadcaster.trigger(event.error, e);\n    }\n  };\n\n  /**\n   * @description Apply visual navigation into the suggestions set\n   * \n   * @param {Number} keyCode The current keyCode value\n   * \n   * @returns {Void}\n   */\n  navigate = (keyCode) => {\n    try {\n      if (keyCode != 38 && keyCode != 40) {\n        return false;\n      }\n  \n      if(this.props.pointer < -1 || this.props.pointer > this.dom.result.children.length - 1) {\n        return false;\n      }\n      \n      if ((keyCode === 38 && this.props.pointer === 0) || (keyCode === 40 && this.props.pointer === this.dom.result.children.length - 1)) {\n        return false;\n      }\n\n      if (keyCode === 38 && this.props.pointer >= -1) {\n        this.props.pointer--;\n      } else if (keyCode === 40 && this.props.pointer < this.dom.result.children.length - 1) {\n        this.props.pointer++;\n      } \n  \n      this.dom.focus(this.props.pointer);\n    } catch(e) {\n      this.broadcaster.trigger(event.error, e);\n    }\n  };\n\n  /**\n   * @description Select a suggested item as user choice\n   * \n   * @param {Number} idx The index of the selected suggestion\n   * \n   * @emits CustomEvent 'this.select.done'\n   * \n   * @returns {Void}\n   */\n  select = (idx = 0) => {\n    try {\n      this.dom.input.value = typeof this.props.data[idx] === 'object' ? this.props.data[idx][this.configuration.propToMapAsValue] : this.props.data[idx];\n      this.callbacks.onSelect && this.callbacks.onSelect(this.props.data[idx]);\n      this.broadcaster.trigger(event.selectDone);\n    } catch(e) {\n      this.broadcaster.trigger(event.error, e);\n    }\n  };\n}","/**\n * @description Dynamic properties of current Kompltr instance.\n */\nexport class Properties {\n\n  /**\n   * @description Data storage\n   */\n  _data = null;\n\n  get data() {\n    return this._data;\n  }\n\n  set data(value) {\n    if (!Array.isArray(value)) {\n      throw new Error(`data must be an array (${value.toString()} given)`);\n    }\n    this._data = value;\n  }\n\n  /**\n   * @description Position of the pointer inside the suggestions\n   */\n  _pointer = null;\n\n  get pointer() {\n    return this._pointer;\n  }\n\n  set pointer(value) {\n    if (isNaN(parseInt(value, 10))) {\n      throw new Error(`pointer must be an integer (${value.toString()} given)`);\n    }\n    this._pointer = value;\n  }\n\n  /**\n   * @description Previous input value\n   */\n  _previousValue = null;\n\n  get previousValue() {\n    return this._previousValue;\n  }\n\n  set previousValue(value) {\n    this._previousValue = value;\n  }\n\n  constructor(data = []) {\n    this._data = data;\n  }\n}","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Kompletr from './kompletr.js';\n\nimport { Configuration } from './configuration.js';\nimport { Cache } from './cache.js';\nimport { Broadcaster } from './broadcaster.js';\nimport { Properties } from './properties.js';\nimport { DOM } from './dom.js';\n\n/**\n * Initializes the module with the provided data and options.\n *\n * @param {string|HTMLInputElement} input - The target input as selector or instance.\n * @param {Object} data - The data used by the application.\n * @param {Object} options - The configuration options for the application.\n * @param {Function} onKeyup - The callback function to be executed on keyup event.\n * @param {Function} onSelect - The callback function to be executed on select event.\n * @param {Function} onError - The callback function to be executed on error event.\n * \n * @returns {void}\n */\nconst kompletr = function({ input, data, options, onKeyup, onSelect, onError }) {\n  try {\n    const [broadcaster, configuration, properties] = [\n      new Broadcaster(),\n      new Configuration(options),\n      new Properties(data),\n    ];\n  \n    const [dom, cache] = [\n      new DOM(input, broadcaster, configuration),\n      configuration.cache ? new Cache(broadcaster, configuration.cache) : null,\n    ];\n   \n    new Kompletr({ configuration, properties, dom, cache, broadcaster, onKeyup, onSelect, onError });\n  } catch(e) {\n    console.error(`[kompletr] An error has occured -> ${e.stack}`);\n  }\n};\n\nwindow.kompletr = kompletr;\n\nexport { kompletr };"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 9d0b944..0e9c44a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -95,8 +95,20 @@
               done(d);
             },*/
             onSelect: (selected) => {
-              console.log('cb.onSelect', selected);
-            },
+                Toastify({
+                  text: `Hey, I'm your callback there is something for you ${selected.Name} 👀`,
+                  duration: 5000,
+                  newWindow: true,
+                  close: false,
+                  gravity: "bottom", // `top` or `bottom`
+                  position: "center", // `left`, `center` or `right`
+                  stopOnFocus: true, // Prevents dismissing of toast on hover
+                  style: {
+                    background: "#4cb56b",
+                    color: '#fff'
+                  },
+                }).showToast();
+              },
             onError: (error) => {
               console.log('cb.onError ', error);
             },
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 73f7076..14c6f89 100755
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -9,8 +9,10 @@ $color-1: #fff;
 $color-2: #c0c0c0;
 $color-3: #dfdfdf;
 $color-4: #9e9e9e;
-$color-5: #666;
-$color-6: #333;
+$color-5: #777;
+$color-6: #666;
+$color-7: #444;
+$color-8: #333;
 
 ////
 /// Fonts variables
diff --git a/src/sass/kompletr.demo.scss b/src/sass/kompletr.demo.scss
index fb65499..dd2049c 100644
--- a/src/sass/kompletr.demo.scss
+++ b/src/sass/kompletr.demo.scss
@@ -15,12 +15,13 @@ html {
   border-bottom: 0;
   text-decoration: none;
   z-index: 1;
+  transition: all 0.2s ease-in-out;
   & svg {
     height: 80px;
     width: 80px;
     color: #333;
-    fill: #fff;
-    fill: var(--theme-color, #fff);
+    fill: #2cc1fb;
+    fill: var(--theme-color, #2cc1fb);
   }
   &:hover {
     transform: scale(1.1);
@@ -38,7 +39,7 @@ body {
 }
 
 hgroup {
-  margin: 0 auto 60px;
+  margin: 0 auto 80px;
   text-align: center;
 
   img {
@@ -142,7 +143,7 @@ footer {
         text-align: right;
       }
 
-      &:nth-child(0) {
+      &:nth-child(n+0) {
         font-weight: 600;
       }
 
@@ -163,34 +164,37 @@ footer {
     }
 
     .item--result {
-      color: $color-6;
       border-bottom: 1px dashed $color-3;
-      @include backdrop(16px, 180%, 0.75);
+      @include backdrop(16px, 180%, 0.80);
 
-      &:hover, &.focus {
-        @include backdrop(26px, 120%, 0.50);
-        
-        & .item--data:nth-child(n+2) {
-          color: $color-6;
-        }
-      }
-
-      & .item--data {
-        &:nth-child(0) {
-          color: $color-6;
+      .item--data {
+        &:nth-child(n+0) {
+          color: $color-8;
         }
   
         &:nth-child(n+2) {
           color: $color-4;
         }
       }
+
+      &:hover,
+      &.focus {
+        @include backdrop(26px, 120%, 0.40);
+        
+        .item--data {
+          &:nth-child(n+0),
+          &:nth-child(n+2) {
+            color: $color-8;
+          }
+        }
+      }
     }
   }
 
   &.dark {
     .input--search {
       color: $color-1;
-      background: $color-6;
+      background: $color-8;
     }
 
     ::placeholder {
@@ -198,25 +202,28 @@ footer {
     }
 
     .item--result {
-      color: $color-1;
-      border-bottom: 1px dashed $color-4;
-      @include backdrop(16px, 180%, 0.75, 'dark');
+      border-bottom: 1px dashed $color-7;
+      @include backdrop(16px, 180%, 0.80, 'dark');
 
-      &:hover, &.focus {
-        @include backdrop(26px, 120%, 0.50, 'dark');
-        
-        & .item--data:nth-child(n+2) {
-          color: $color-1;
-        }
-      }
-
-      & .item--data {
-        &:nth-child(0) {
-          color: $color-1;
+      .item--data {
+        &:nth-child(n+0) {
+          color: $color-3;
         }
   
         &:nth-child(n+2) {
-          color: $color-4;
+          color: $color-5;
+        }
+      }
+
+      &:hover,
+      &.focus {
+        @include backdrop(26px, 120%, 0.40, 'dark');
+        
+        .item--data {
+          &:nth-child(n+0),
+          &:nth-child(n+2) {
+            color: $color-1;
+          }
         }
       }
     }
diff --git a/src/sass/kompletr.scss b/src/sass/kompletr.scss
index dbeb5ef..666b796 100755
--- a/src/sass/kompletr.scss
+++ b/src/sass/kompletr.scss
@@ -72,7 +72,7 @@
         text-align: right;
       }
 
-      &:nth-child(0) {
+      &:nth-child(n+0) {
         font-weight: 600;
       }
 
@@ -93,34 +93,37 @@
     }
 
     .item--result {
-      color: $color-6;
       border-bottom: 1px dashed $color-3;
-      @include backdrop(16px, 180%, 0.75);
+      @include backdrop(16px, 180%, 0.80);
 
-      &:hover, &.focus {
-        @include backdrop(26px, 120%, 0.50);
-        
-        & .item--data:nth-child(n+2) {
-          color: $color-6;
-        }
-      }
-
-      & .item--data {
-        &:nth-child(0) {
-          color: $color-6;
+      .item--data {
+        &:nth-child(n+0) {
+          color: $color-8;
         }
   
         &:nth-child(n+2) {
           color: $color-4;
         }
       }
+
+      &:hover,
+      &.focus {
+        @include backdrop(26px, 120%, 0.40);
+        
+        .item--data {
+          &:nth-child(n+0),
+          &:nth-child(n+2) {
+            color: $color-8;
+          }
+        }
+      }
     }
   }
 
   &.dark {
     .input--search {
       color: $color-1;
-      background: $color-6;
+      background: $color-8;
     }
 
     ::placeholder {
@@ -128,25 +131,28 @@
     }
 
     .item--result {
-      color: $color-1;
-      border-bottom: 1px dashed $color-4;
-      @include backdrop(16px, 180%, 0.75, 'dark');
+      border-bottom: 1px dashed $color-7;
+      @include backdrop(16px, 180%, 0.80, 'dark');
 
-      &:hover, &.focus {
-        @include backdrop(26px, 120%, 0.50, 'dark');
-        
-        & .item--data:nth-child(n+2) {
-          color: $color-1;
-        }
-      }
-
-      & .item--data {
-        &:nth-child(0) {
-          color: $color-1;
+      .item--data {
+        &:nth-child(n+0) {
+          color: $color-3;
         }
   
         &:nth-child(n+2) {
-          color: $color-4;
+          color: $color-5;
+        }
+      }
+
+      &:hover,
+      &.focus {
+        @include backdrop(26px, 120%, 0.40, 'dark');
+        
+        .item--data {
+          &:nth-child(n+0),
+          &:nth-child(n+2) {
+            color: $color-1;
+          }
         }
       }
     }
