@websy/websy-designs 1.3.3 → 1.3.5

package/dist/websy-designs.js

@@ -2719,7 +2719,7 @@ var WebsyLogin = /*#__PURE__*/function () {
 
   return WebsyLogin;
 }();
-/* global */
+/* global WebsyDesigns */
 
 
 var WebsyNavigationMenu = /*#__PURE__*/function () {
@@ -2731,7 +2731,11 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
       orientation: 'horizontal',
       parentMap: {},
       childIndentation: 10,
-      activeSymbol: 'none'
+      activeSymbol: 'none',
+      enableSearch: false,
+      searchProp: 'text',
+      menuIcon: "<svg viewbox=\"0 0 40 40\" width=\"30\" height=\"40\">              \n        <rect x=\"0\" y=\"0\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n        <rect x=\"0\" y=\"12\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n        <rect x=\"0\" y=\"24\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n      </svg>",
+      searchOptions: {}
     }, options);
 
     if (!elementId) {
@@ -2739,6 +2743,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
       return;
     }
 
+    this.maxLevel = 0;
     var el = document.getElementById(elementId);
 
     if (el) {
@@ -2747,7 +2752,6 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
       this.flatItems = [];
       this.itemMap = {};
       this.flattenItems(0, this.options.items);
-      console.log(this.flatItems);
       el.classList.add("websy-".concat(this.options.orientation, "-list-container"));
       el.classList.add('websy-menu');
 
@@ -2774,25 +2778,28 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
     key: "flattenItems",
     value: function flattenItems(index, items) {
       var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var path = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
 
       if (items[index]) {
         this.lowestLevel = Math.max(level, this.lowestLevel);
         items[index].id = items[index].id || "".concat(this.elementId, "_").concat(this.normaliseString(items[index].text));
-        this.itemMap[items[index].id] = items[index];
         items[index].level = level;
+        items[index].hasChildren = items[index].items && items[index].items.length > 0;
+        items[index].path = path !== '' ? "".concat(path, "::").concat(items[index].id) : items[index].id;
+        this.itemMap[items[index].id] = _extends({}, items[index]);
         this.flatItems.push(items[index]);
 
         if (items[index].items) {
-          this.flattenItems(0, items[index].items, level + 1);
+          this.flattenItems(0, items[index].items, level + 1, items[index].path);
         }
 
-        this.flattenItems(++index, items, level);
+        this.flattenItems(++index, items, level, path);
       }
     }
   }, {
     key: "handleClick",
     value: function handleClick(event) {
-      if (event.target.classList.contains('websy-menu-icon') || event.target.nodeName === 'svg' || event.target.nodeName === 'rect') {
+      if (event.target.classList.contains('websy-menu-icon')) {
         this.toggleMobileMenu();
       }
 
@@ -2803,7 +2810,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           this.toggleMobileMenu('remove');
         }
 
-        if (item.items) {
+        if (item.hasChildren === true) {
           event.target.classList.toggle('menu-open');
           this.toggleMenu(item.id);
         }
@@ -2813,6 +2820,60 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
         this.toggleMobileMenu();
       }
     }
+  }, {
+    key: "handleSearch",
+    value: function handleSearch(searchText) {
+      var _this18 = this;
+
+      var el = document.getElementById(this.elementId);
+      var lowestItems = this.flatItems.filter(function (d) {
+        return d.level === _this18.maxLevel;
+      });
+      var visibleItems = lowestItems;
+      var defaultMethod = 'remove';
+
+      if (searchText.length > 1) {
+        defaultMethod = 'add';
+        visibleItems = lowestItems.filter(function (d) {
+          return d[_this18.options.searchProp].toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
+        });
+      } // hide everything
+
+
+      var textEls = el.querySelectorAll("div.websy-menu-header");
+
+      for (var t = 0; t < textEls.length; t++) {
+        textEls[t].classList[defaultMethod]('websy-hidden');
+      }
+
+      var listEls = el.querySelectorAll("ul.websy-child-list");
+
+      for (var l = 0; l < listEls.length; l++) {
+        listEls[l].classList.add('websy-menu-collapsed');
+      }
+
+      if (searchText.length > 1) {
+        visibleItems.forEach(function (d) {
+          // show the item and open the list
+          var pathParts = d.path.split('::');
+          pathParts.forEach(function (p) {
+            var textEl = document.getElementById(p);
+
+            if (textEl) {
+              textEl.classList.remove('websy-hidden');
+            }
+
+            var listEl = document.getElementById("".concat(p, "_list"));
+
+            if (listEl) {
+              listEl.classList.remove('websy-menu-collapsed');
+            }
+          });
+        });
+      }
+
+      console.log('visibleItems', visibleItems);
+    }
   }, {
     key: "normaliseString",
     value: function normaliseString(text) {
@@ -2827,7 +2888,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
         var html = "";
 
         if (this.options.collapsible === true) {
-          html += "\n          <div id='".concat(this.elementId, "_menuIcon' class='websy-menu-icon'>\n            <svg viewbox=\"0 0 40 40\" width=\"30\" height=\"40\">              \n              <rect x=\"0\" y=\"0\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n              <rect x=\"0\" y=\"12\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n              <rect x=\"0\" y=\"24\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n            </svg>\n          </div>\n        ");
+          html += "\n          <div id='".concat(this.elementId, "_menuIcon' class='websy-menu-icon'>\n            ").concat(this.options.menuIcon, "\n          </div>\n        ");
         }
 
         if (this.options.logo) {
@@ -2838,16 +2899,27 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           html += "          \n          <div \n            class='logo ".concat(this.options.logo.classes || '', "'\n            ").concat(this.options.logo.attributes && this.options.logo.attributes.join(' '), "\n          >\n          <img src='").concat(this.options.logo.url, "'></img>\n          </div>\n          <div id='").concat(this.elementId, "_mask' class='websy-menu-mask'></div>\n          <div id=\"").concat(this.elementId, "_menuContainer\" class=\"websy-menu-block-container\">\n        ");
         }
 
-        html += this.renderBlock(this.options.items, 'main', 0);
+        if (this.options.enableSearch === true) {
+          html += "\n          <div id='".concat(this.elementId, "_search' class='websy-menu-search'></div>\n        ");
+        }
+
+        html += this.renderBlock(this.elementId, this.elementId, this.options.items, 'main', 0);
         html += "</div>";
         el.innerHTML = html;
+
+        if (this.options.enableSearch === true) {
+          this.search = new WebsyDesigns.Search("".concat(this.elementId, "_search"), _extends({}, {
+            onSearch: this.handleSearch.bind(this)
+          }, this.options.searchOptions));
+        }
       }
     }
   }, {
     key: "renderBlock",
-    value: function renderBlock(items, block) {
-      var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-      var html = "\n\t\t  <ul class='websy-".concat(this.options.orientation, "-list ").concat(level > 0 ? 'websy-child-list' : '', " ").concat(block !== 'main' ? 'websy-menu-collapsed' : '', "' id='").concat(this.elementId, "_").concat(block, "_list'\n\t  ");
+    value: function renderBlock(id, path, items, block) {
+      var level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+      this.maxLevel = Math.max(this.maxLevel, level);
+      var html = "\n\t\t  <ul class='websy-".concat(this.options.orientation, "-list ").concat(level > 0 ? 'websy-child-list' : '', " ").concat(block !== 'main' ? 'websy-menu-collapsed' : '', "' id='").concat(id, "_list' data-path='").concat(path, "'\n\t  ");
 
       if (block !== 'main') {
         html += " data-collapsed='".concat(block !== 'main' ? 'true' : 'false', "'");
@@ -2867,7 +2939,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           items[i].classes = items[i].classes.join(' ');
         }
 
-        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n\t\t\t\t\t\t id='").concat(blockId, "' \n\t\t\t\t\t\t data-id='").concat(currentBlock, "'\n             data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n\t\t\t\t\t\t data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n\t\t\t\t\t\t data-text='").concat(items[i].isLink !== true ? items[i].text : '', "'\n\t\t\t\t\t\t style='padding-left: ").concat(level * this.options.childIndentation, "px'\n\t\t\t\t\t\t ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
+        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n          id='").concat(blockId, "' \n          data-id='").concat(currentBlock, "'\n          data-path='").concat(items[i].path, "'\n          data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n          data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n          data-text='").concat(items[i].isLink !== true ? items[i].text : '', "'\n          style='padding-left: ").concat(level * this.options.childIndentation, "px'\n          ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
 
         if (this.options.orientation === 'horizontal') {
           html += items[i].text;
@@ -2883,8 +2955,9 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
 
         html += "          \n          <span class='".concat(items[i].items && items[i].items.length > 0 ? 'menu-carat' : '', "'></span>\n      ");
 
-        if (this.options.orientation === 'vertical') {
-          html += "\n          &nbsp;\n        ";
+        if (this.options.orientation === 'vertical') {// html += `
+          //   &nbsp;
+          // `
         }
 
         if (items[i].isLink === true && items[i].href) {
@@ -2894,7 +2967,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
         html += "    \n\t\t\t\t</div>\n\t\t  ";
 
         if (items[i].items) {
-          html += this.renderBlock(items[i].items, currentBlock, items[i].level + 1);
+          html += this.renderBlock(blockId, items[i].path, items[i].items, currentBlock, items[i].level + 1);
         } // map the item to it's parent
 
 
@@ -2913,7 +2986,8 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
   }, {
     key: "toggleMenu",
     value: function toggleMenu(id) {
-      var el = document.getElementById("".concat(id, "_list"));
+      var el = document.getElementById("".concat(id, "_list")); // const menuId = el.getAttribute('data-menu-id')
+      // const menuEl = document.getElementById(menuId)
 
       if (el) {
         el.classList.toggle('websy-menu-collapsed');
@@ -2945,7 +3019,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
 
 var Pager = /*#__PURE__*/function () {
   function Pager(elementId, options) {
-    var _this18 = this;
+    var _this19 = this;
 
     _classCallCheck(this, Pager);
 
@@ -2998,8 +3072,8 @@ var Pager = /*#__PURE__*/function () {
           allowClear: false,
           disableSearch: true,
           onItemSelected: function onItemSelected(selectedItem) {
-            if (_this18.options.onChangePageSize) {
-              _this18.options.onChangePageSize(selectedItem.value);
+            if (_this19.options.onChangePageSize) {
+              _this19.options.onChangePageSize(selectedItem.value);
             }
           }
         });
@@ -3023,13 +3097,13 @@ var Pager = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this19 = this;
+      var _this20 = this;
 
       var el = document.getElementById("".concat(this.elementId, "_pageList"));
 
       if (el) {
         var pages = this.options.pages.map(function (item, index) {
-          return "<li data-index=\"".concat(index, "\" class=\"websy-page-num ").concat(_this19.options.activePage === index ? 'active' : '', "\">").concat(index + 1, "</li>");
+          return "<li data-index=\"".concat(index, "\" class=\"websy-page-num ").concat(_this20.options.activePage === index ? 'active' : '', "\">").concat(index + 1, "</li>");
         });
         var startIndex = 0;
 
@@ -3097,58 +3171,58 @@ var WebsyPDFButton = /*#__PURE__*/function () {
   _createClass(WebsyPDFButton, [{
     key: "handleClick",
     value: function handleClick(event) {
-      var _this20 = this;
+      var _this21 = this;
 
       if (event.target.classList.contains('websy-pdf-button')) {
         this.loader.show();
         setTimeout(function () {
-          if (_this20.options.targetId) {
-            var el = document.getElementById(_this20.options.targetId);
+          if (_this21.options.targetId) {
+            var el = document.getElementById(_this21.options.targetId);
 
             if (el) {
               var pdfData = {
                 options: {}
               };
 
-              if (_this20.options.pdfOptions) {
-                pdfData.options = _extends({}, _this20.options.pdfOptions);
+              if (_this21.options.pdfOptions) {
+                pdfData.options = _extends({}, _this21.options.pdfOptions);
               }
 
-              if (_this20.options.header) {
-                if (_this20.options.header.elementId) {
-                  var headerEl = document.getElementById(_this20.options.header.elementId);
+              if (_this21.options.header) {
+                if (_this21.options.header.elementId) {
+                  var headerEl = document.getElementById(_this21.options.header.elementId);
 
                   if (headerEl) {
                     pdfData.header = headerEl.outerHTML;
 
-                    if (_this20.options.header.css) {
-                      pdfData.options.headerCSS = _this20.options.header.css;
+                    if (_this21.options.header.css) {
+                      pdfData.options.headerCSS = _this21.options.header.css;
                     }
                   }
-                } else if (_this20.options.header.html) {
-                  pdfData.header = _this20.options.header.html;
+                } else if (_this21.options.header.html) {
+                  pdfData.header = _this21.options.header.html;
 
-                  if (_this20.options.header.css) {
-                    pdfData.options.headerCSS = _this20.options.header.css;
+                  if (_this21.options.header.css) {
+                    pdfData.options.headerCSS = _this21.options.header.css;
                   }
                 } else {
-                  pdfData.header = _this20.options.header;
+                  pdfData.header = _this21.options.header;
                 }
               }
 
-              if (_this20.options.footer) {
-                if (_this20.options.footer.elementId) {
-                  var footerEl = document.getElementById(_this20.options.footer.elementId);
+              if (_this21.options.footer) {
+                if (_this21.options.footer.elementId) {
+                  var footerEl = document.getElementById(_this21.options.footer.elementId);
 
                   if (footerEl) {
                     pdfData.footer = footerEl.outerHTML;
 
-                    if (_this20.options.footer.css) {
-                      pdfData.options.footerCSS = _this20.options.footer.css;
+                    if (_this21.options.footer.css) {
+                      pdfData.options.footerCSS = _this21.options.footer.css;
                     }
                   }
                 } else {
-                  pdfData.footer = _this20.options.footer;
+                  pdfData.footer = _this21.options.footer;
                 }
               }
 
@@ -3157,31 +3231,31 @@ var WebsyPDFButton = /*#__PURE__*/function () {
               // document.getElementById(`${this.elementId}_pdfFooter`).value = pdfData.footer
               // document.getElementById(`${this.elementId}_form`).submit()
 
-              _this20.service.add('', pdfData, {
+              _this21.service.add('', pdfData, {
                 responseType: 'blob'
               }).then(function (response) {
-                _this20.loader.hide();
+                _this21.loader.hide();
 
                 var blob = new Blob([response], {
                   type: 'application/pdf'
                 });
                 var msg = "\n                <div class='text-center websy-pdf-download'>\n                  <div>Your file is ready to download</div>\n                  <a href='".concat(URL.createObjectURL(blob), "' target='_blank'\n              ");
 
-                if (_this20.options.directDownload === true) {
+                if (_this21.options.directDownload === true) {
                   var fileName;
 
-                  if (typeof _this20.options.fileName === 'function') {
-                    fileName = _this20.options.fileName() || 'Export';
+                  if (typeof _this21.options.fileName === 'function') {
+                    fileName = _this21.options.fileName() || 'Export';
                   } else {
-                    fileName = _this20.options.fileName || 'Export';
+                    fileName = _this21.options.fileName || 'Export';
                   }
 
                   msg += "download='".concat(fileName, ".pdf'");
                 }
 
-                msg += "\n                  >\n                    <button class='websy-btn download-pdf'>".concat(_this20.options.buttonText, "</button>\n                  </a>\n                </div>\n              ");
+                msg += "\n                  >\n                    <button class='websy-btn download-pdf'>".concat(_this21.options.buttonText, "</button>\n                  </a>\n                </div>\n              ");
 
-                _this20.popup.show({
+                _this21.popup.show({
                   message: msg,
                   mask: true
                 });
@@ -3382,7 +3456,7 @@ var WebsyPubSub = /*#__PURE__*/function () {
 
 var ResponsiveText = /*#__PURE__*/function () {
   function ResponsiveText(elementId, options) {
-    var _this21 = this;
+    var _this22 = this;
 
     _classCallCheck(this, ResponsiveText);
 
@@ -3395,7 +3469,7 @@ var ResponsiveText = /*#__PURE__*/function () {
     this.elementId = elementId;
     this.canvas = document.createElement('canvas');
     window.addEventListener('resize', function () {
-      return _this21.render();
+      return _this22.render();
     });
     var el = document.getElementById(this.elementId);
 
@@ -3614,7 +3688,7 @@ var ResponsiveText = /*#__PURE__*/function () {
 
 var WebsyResultList = /*#__PURE__*/function () {
   function WebsyResultList(elementId, options) {
-    var _this22 = this;
+    var _this23 = this;
 
     _classCallCheck(this, WebsyResultList);
 
@@ -3643,9 +3717,9 @@ var WebsyResultList = /*#__PURE__*/function () {
 
     if (_typeof(options.template) === 'object' && options.template.url) {
       this.templateService.get(options.template.url).then(function (templateString) {
-        _this22.options.template = templateString;
+        _this23.options.template = templateString;
 
-        _this22.render();
+        _this23.render();
       });
     } else {
       this.render();
@@ -3665,16 +3739,17 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "buildHTML",
     value: function buildHTML(d) {
-      var _this23 = this;
+      var _this24 = this;
 
       var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var inputTemplate = arguments.length > 2 ? arguments[2] : undefined;
+      var locator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
       var html = "";
 
       if (this.options.template) {
         if (d.length > 0) {
           d.forEach(function (row, ix) {
-            var template = "".concat(ix > 0 ? '-->' : '').concat(inputTemplate || _this23.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
+            var template = "".concat(ix > 0 ? '-->' : '').concat(inputTemplate || _this24.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
 
             var ifMatches = _toConsumableArray(template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g));
 
@@ -3779,7 +3854,7 @@ var WebsyResultList = /*#__PURE__*/function () {
                 parts.forEach(function (p) {
                   items = items[p];
                 });
-                template = template.replace(m[0], _this23.buildHTML(items, 0, withoutFor));
+                template = template.replace(m[0], _this24.buildHTML(items, 0, withoutFor, [].concat(_toConsumableArray(locator), ["".concat(startIndex + ix, ":").concat(c)])));
               }
             });
 
@@ -3787,11 +3862,11 @@ var WebsyResultList = /*#__PURE__*/function () {
 
             tagMatches.forEach(function (m) {
               if (m[0] && m.index > -1) {
-                template = template.replace(m[0], "".concat(m[0], " data-id=").concat(startIndex + ix));
+                template = template.replace(m[0], "".concat(m[0], " data-id=").concat(startIndex + ix, " data-locator='").concat(locator.join(';'), "'"));
               }
             });
 
-            var flatRow = _this23.flattenObject(row);
+            var flatRow = _this24.flattenObject(row);
 
             for (var key in flatRow) {
               var rg = new RegExp("{".concat(key, "}"), 'gm');
@@ -3849,8 +3924,6 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "handleClick",
     value: function handleClick(event) {
-      var _this24 = this;
-
       if (event.target.classList.contains('clickable')) {
         var l = event.target.getAttribute('data-event');
 
@@ -3858,6 +3931,7 @@ var WebsyResultList = /*#__PURE__*/function () {
           l = l.split('(');
           var params = [];
           var id = event.target.getAttribute('data-id');
+          var locator = event.target.getAttribute('data-locator');
 
           if (l[1]) {
             l[1] = l[1].replace(')', '');
@@ -3865,10 +3939,27 @@ var WebsyResultList = /*#__PURE__*/function () {
           }
 
           l = l[0];
+          var data = this.rows;
+
+          if (locator !== '') {
+            var locatorItems = locator.split(';');
+            locatorItems.forEach(function (loc) {
+              var locatorParts = loc.split(':');
+
+              if (data[locatorParts[0]]) {
+                data = data[locatorParts[0]];
+                var parts = locatorParts[1].split('.');
+                parts.forEach(function (p) {
+                  data = data[p];
+                });
+              }
+            });
+          }
+
           params = params.map(function (p) {
             if (typeof p !== 'string' && typeof p !== 'number') {
-              if (_this24.rows[+id]) {
-                p = _this24.rows[+id][p];
+              if (data[+id]) {
+                p = data[+id][p];
               }
             } else if (typeof p === 'string') {
               p = p.replace(/"/g, '').replace(/'/g, '');
@@ -3882,7 +3973,7 @@ var WebsyResultList = /*#__PURE__*/function () {
 
             event.stopPropagation();
 
-            (_this$options$listene = this.options.listeners.click[l]).call.apply(_this$options$listene, [this, event, this.rows[+id]].concat(_toConsumableArray(params)));
+            (_this$options$listene = this.options.listeners.click[l]).call.apply(_this$options$listene, [this, event, data[+id]].concat(_toConsumableArray(params)));
           }
         }
       }
@@ -3951,7 +4042,14 @@ var WebsyRouter = /*#__PURE__*/function () {
     this.previousView = '';
     this.currentView = '';
     this.currentViewMain = '';
-    this.currentParams = {};
+    this.currentParams = {
+      path: '',
+      items: {}
+    };
+    this.previousParams = {
+      path: '',
+      items: {}
+    };
     this.controlPressed = false;
     this.usesHTMLSuffix = window.location.pathname.indexOf('.htm') !== -1;
     window.addEventListener('popstate', this.onPopState.bind(this));
@@ -4004,10 +4102,13 @@ var WebsyRouter = /*#__PURE__*/function () {
   }, {
     key: "addUrlParams",
     value: function addUrlParams(params) {
+      var reloadView = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
       if (typeof params === 'undefined') {
         return;
       }
 
+      this.previousParams = _extends({}, this.currentParams);
       var output = {
         path: '',
         items: {}
@@ -4032,6 +4133,10 @@ var WebsyRouter = /*#__PURE__*/function () {
       history.pushState({
         inputPath: inputPath
       }, inputPath, "".concat(inputPath, "?").concat(path));
+
+      if (reloadView === true) {
+        this.showView(this.currentView, this.currentParams, 'main');
+      }
     }
   }, {
     key: "buildUrlPath",
@@ -4073,6 +4178,7 @@ var WebsyRouter = /*#__PURE__*/function () {
   }, {
     key: "formatParams",
     value: function formatParams(params) {
+      this.previousParams = _extends({}, this.currentParams);
       var output = {
         path: params,
         items: {}
@@ -4338,6 +4444,11 @@ var WebsyRouter = /*#__PURE__*/function () {
         this.showComponents(view);
         this.publish('show', [view, params, group]);
       }
+
+      if (this.previousView === this.currentView && this.previousParams.path !== this.currentParams.path) {
+        this.showComponents(view);
+        this.publish('show', [view, params, group]);
+      }
     }
   }, {
     key: "reloadCurrentView",
@@ -4362,7 +4473,7 @@ var WebsyRouter = /*#__PURE__*/function () {
       var params = {};
       var newPath = inputPath;
 
-      if (inputPath === this.options.defaultView && this.usesHTMLSuffix === false) {
+      if (inputPath.split('?')[0] === this.options.defaultView && this.usesHTMLSuffix === false) {
         inputPath = inputPath.replace(this.options.defaultView, '/');
       }
 
@@ -4370,8 +4481,6 @@ var WebsyRouter = /*#__PURE__*/function () {
         if (inputPath.indexOf('?') === -1 && this.queryParams) {
           inputPath += "?".concat(this.queryParams);
         }
-      } else {
-        this.currentParams = {};
       }
 
       if (this.usesHTMLSuffix === true) {
@@ -4395,7 +4504,11 @@ var WebsyRouter = /*#__PURE__*/function () {
         params = this.formatParams(parts[1]);
         inputPath = parts[0];
       } else if (group === this.options.defaultGroup) {
-        this.currentParams = {};
+        this.previousParams = _extends({}, this.currentParams);
+        this.currentParams = {
+          path: '',
+          items: {}
+        };
       }
 
       if (event) {
@@ -4610,7 +4723,7 @@ var WebsySearch = /*#__PURE__*/function () {
     this.elementId = elementId;
     var DEFAULTS = {
       searchIcon: "<svg class='search' width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>",
-      clearIcon: "<svg class='clear' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
+      clearIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
       placeholder: 'Search',
       searchTimeout: 500,
       minLength: 2
@@ -4621,14 +4734,24 @@ var WebsySearch = /*#__PURE__*/function () {
 
     if (el) {
       // el.addEventListener('click', this.handleClick.bind(this))
+      el.addEventListener('click', this.handleClick.bind(this));
       el.addEventListener('keyup', this.handleKeyUp.bind(this));
-      el.innerHTML = "\n          <div class='websy-search-input-container'>\n            ".concat(this.options.searchIcon, "\n            <input id='").concat(this.elementId, "_search' class='websy-search-input' placeholder='").concat(this.options.placeholder || 'Search', "'>\n            ").concat(this.options.clearIcon, "\n          </div>\n        ");
+      el.innerHTML = "\n          <div class='websy-search-input-container'>\n            ".concat(this.options.searchIcon, "\n            <input id='").concat(this.elementId, "_search' class='websy-search-input' placeholder='").concat(this.options.placeholder || 'Search', "'>\n            <div class='clear websy-hidden' id='").concat(this.elementId, "_clear'>\n              ").concat(this.options.clearIcon, "\n            </div>\n          </div>\n        ");
     } else {
       console.log('No element found with Id', elementId);
     }
   }
 
   _createClass(WebsySearch, [{
+    key: "handleClick",
+    value: function handleClick(event) {
+      if (event.target.classList.contains('clear')) {
+        var inputEl = document.getElementById("".concat(this.elementId, "_search"));
+        inputEl.value = '';
+        this.options.onSearch('');
+      }
+    }
+  }, {
     key: "handleKeyUp",
     value: function handleKeyUp(event) {
       var _this28 = this;
@@ -4638,6 +4761,14 @@ var WebsySearch = /*#__PURE__*/function () {
           clearTimeout(this.searchTimeoutFn);
         }
 
+        var clearEl = document.getElementById("".concat(this.elementId, "_clear"));
+
+        if (event.target.value.length > 0) {
+          clearEl.classList.remove('websy-hidden');
+        } else {
+          clearEl.classList.add('websy-hidden');
+        }
+
         if (event.target.value.length >= this.options.minLength) {
           this.searchTimeoutFn = setTimeout(function () {
             if (_this28.options.onSearch) {