@websy/websy-designs 1.3.4 → 1.3.6

package/dist/websy-designs.debug.js

@@ -1321,9 +1321,9 @@ class WebsyDropdown {
       showCompleteSelectedList: false,
       closeAfterSelection: true,
       customActions: [],
-      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>`,
-      arrowIcon: `<svg class='arrow' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>`,
+      searchIcon: `<svg 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 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>`,
+      arrowIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>`,
       actionsIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512">><circle cx="256" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><circle cx="416" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><circle cx="96" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/></svg>`
     }
     this.options = Object.assign({}, DEFAULTS, options)    
@@ -1352,16 +1352,20 @@ class WebsyDropdown {
       let html = `
         <div id='${this.elementId}_container' class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''} ${this.options.style} ${this.options.customActions.length > 0 ? 'with-actions' : ''}'>
           <div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
-            ${this.options.searchIcon}
-            <span>
+      `
+      if (this.options.disableSearch !== true) {
+        html += `<div class='search'>${this.options.searchIcon}</div>`
+      }
+      html += `
+            <div class='header-label'>
               <span class='websy-dropdown-header-value' data-info='${headerLabel}' id='${this.elementId}_selectedItems'>${headerLabel}</span> 
               <span class='websy-dropdown-header-label' id='${this.elementId}_headerLabel'>${this.options.label}</span>
-            </span>
+            </div>
             <input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
-            ${this.options.arrowIcon}
+            <div class='arrow'>${this.options.arrowIcon}</div>
       `
       if (this.options.allowClear === true) {
-        html += this.options.clearIcon
+        html += `<div class='clear'>${this.options.clearIcon}</div>`
       }
       html += `          
           </div>
@@ -2326,7 +2330,7 @@ const WebsyIcons = {
   `,
   'bag-icon': `
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+	 viewBox="0 0 500 500">
 <path d="M456.6,472.3H43.4c-5.3,0-10.2-2.1-13.7-6c-3.6-3.9-5.2-9.2-4.5-14.4l37-285.4c1.2-9,9-15.9,18.2-15.9h339.2
 	c9.2,0,17,6.8,18.2,15.8l37,285.4c0.7,5.2-1,10.5-4.5,14.4l0,0C466.8,470.1,461.9,472.3,456.6,472.3z M46.5,451.2h407l-36.3-279.6
 	H82.8L46.5,451.2z"/>
@@ -2349,6 +2353,104 @@ const WebsyIcons = {
 	c0-62.9-23.4-122-65.9-166.5c-42.5-44.5-99-69-159.1-69s-116.6,24.5-159.1,69C48.4,353,25,412.1,25,475c0,0,0,0,0,0H45z"/>
 </svg>
 
+  `,
+  'Search': `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" xml:space="preserve">
+<path d="M481.4,468.6c-17.2-17.2-34.4-34.4-51.6-51.6c-27.4-27.4-54.8-54.8-82.2-82.2c-4.8-4.8-9.5-9.5-14.3-14.3
+	c29.4-32.5,47.4-75.5,47.4-122.7C380.7,97,298.7,15,197.9,15S15,97,15,197.9s82,182.9,182.9,182.9c47.2,0,90.3-18,122.7-47.4
+	c15.7,15.7,31.4,31.4,47.1,47.1c27.4,27.4,54.8,54.8,82.2,82.2c6.3,6.3,12.5,12.5,18.8,18.8C476.8,489.6,489.6,476.8,481.4,468.6z
+	 M35,197.9C35,108.1,108.1,35,197.9,35s162.9,73.1,162.9,162.9s-73.1,162.9-162.9,162.9S35,287.7,35,197.9z"/>
+</svg>
+
+  `,
+  'Bag': `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500">
+<path d="M456.6,472.3H43.4c-5.3,0-10.2-2.1-13.7-6c-3.6-3.9-5.2-9.2-4.5-14.4l37-285.4c1.2-9,9-15.9,18.2-15.9h339.2
+	c9.2,0,17,6.8,18.2,15.8l37,285.4c0.7,5.2-1,10.5-4.5,14.4l0,0C466.8,470.1,461.9,472.3,456.6,472.3z M46.5,451.2h407l-36.3-279.6
+	H82.8L46.5,451.2z"/>
+<g>
+	<path d="M361.3,157.1C357.3,94.8,308.4,46,249.9,46c-28,0-54.8,11.1-75.4,31.4c-20.7,20.3-33.5,47.9-35.9,77.8l-21.5-1.6
+		c2.8-34.8,17.7-67.1,42.1-91C183.9,38.3,216.1,25,249.9,25c34.2,0,66.6,13.6,91.5,38.3c24.5,24.3,39.2,57.2,41.5,92.5L361.3,157.1z
+		"/>
+</g>
+</svg>
+
+  `,
+  'User': `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M248,260.5c-62,0-112.5-52.8-112.5-117.7S186,25,248,25s112.5,52.8,112.5,117.7S310,260.5,248,260.5z M248,45.9
+		c-51,0-92.5,43.4-92.5,96.8s41.5,96.8,92.5,96.8c51,0,92.5-43.4,92.5-96.8S299,45.9,248,45.9z"/>
+</g>
+<path d="M45,475C45,475,45,475,45,475c0-118.3,92-214.5,205-214.5c113,0,205,96.2,205,214.5c0,0,0,0,0,0h20c0,0,0,0,0,0
+	c0-62.9-23.4-122-65.9-166.5c-42.5-44.5-99-69-159.1-69s-116.6,24.5-159.1,69C48.4,353,25,412.1,25,475c0,0,0,0,0,0H45z"/>
+</svg>
+
+  `,
+  'DockLeft': `
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+	<g>
+		<path d="M419.7,425H80.3C49.8,425,25,400.2,25,369.7V130.3C25,99.8,49.8,75,80.3,75h339.4c30.5,0,55.3,24.8,55.3,55.3v239.4
+			C475,400.2,450.2,425,419.7,425z M80.3,95C60.8,95,45,110.8,45,130.3v239.4c0,19.5,15.8,35.3,35.3,35.3h339.4
+			c19.5,0,35.3-15.8,35.3-35.3V130.3c0-19.5-15.8-35.3-35.3-35.3H80.3z"/>
+	</g>
+	<path d="M92.8,90.1H92h-4.2c-24.8,0-45,20.2-45,45v229.8c0,24.8,20.2,45,45,45H92h0.8h105.4V90.1H92.8z"/>
+</svg>
+
+  `,
+  'DockRight': `
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+	<g>
+		<path d="M25,369.7V130.3C25,99.8,49.8,75,80.3,75h339.4c30.5,0,55.3,24.8,55.3,55.3v239.4c0,30.5-24.8,55.3-55.3,55.3H80.3
+			C49.8,425,25,400.2,25,369.7z M80.3,95C60.8,95,45,110.8,45,130.3v239.4c0,19.5,15.8,35.3,35.3,35.3h339.4
+			c19.5,0,35.3-15.8,35.3-35.3V130.3c0-19.5-15.8-35.3-35.3-35.3H80.3z"/>
+	</g>
+	<path d="M407.2,90.1h0.8h4.2c24.8,0,45,20.2,45,45v229.8c0,24.8-20.2,45-45,45H408h-0.8H301.8V90.1H407.2z"/>
+</svg>
+
+  `,
+  'Pin': `
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+	<g>
+		<path d="M368,312.1H132l-0.6-9.4c-0.1-2.4-0.2-4.8-0.2-7.1c0-40.3,20.7-78.1,54.4-99.9V73.2h-9c-13,0-23.6-10.6-23.6-23.6
+			S163.5,26,176.6,26h146.9c13,0,23.6,10.6,23.6,23.6s-10.6,23.6-23.6,23.6h-9v122.5c33.7,21.8,54.4,59.5,54.4,99.9
+			c0,2.3-0.1,4.7-0.2,7.1L368,312.1z M151.2,292.1h197.5c-1.2-33.8-19.9-65.1-49.4-82.1l-5-2.9V53.2h29c2,0,3.6-1.6,3.6-3.6
+			c0-2-1.6-3.6-3.6-3.6H176.6c-2,0-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6h29v153.9l-5,2.9C171.1,227,152.4,258.3,151.2,292.1z"/>
+	</g>
+	<path d="M260.9,403.8V299.9h-21.8v108.8h0c0.1,36.1,4.9,65.3,10.9,65.3c6,0,10.9-29.7,10.9-66.4
+		C260.9,406.4,260.9,405.1,260.9,403.8z"/>
+</svg>
+
+  `,
+  'WindowPopout': `
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:20;stroke-miterlimit:10;}
+</style>
+<path class="st0" d="M420.1,359.6h-285c-24.7,0-45-20.2-45-45V124.9c0-24.7,20.2-45,45-45h285c24.7,0,45,20.2,45,45v189.7
+	C465.1,339.3,444.9,359.6,420.1,359.6z"/>
+<path class="st0" d="M407.3,389.8c-6.3,17.3-22.9,29.7-42.3,29.7H80c-24.7,0-45-20.2-45-45V184.9c0-18.2,10.9-33.9,26.5-41"/>
+</svg>
+
+  `,
+  'Plus': `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500">
+<path d="M254.7,486h-10.3c-5.5,0-10-4.5-10-10V26c0-5.5,4.5-10,10-10h10.3c5.5,0,10,4.5,10,10v450C264.6,481.5,260.2,486,254.7,486z"/>
+<path d="M15,255.1v-10.3c0-5.5,4.5-10,10-10h450c5.5,0,10,4.5,10,10v10.3c0,5.5-4.5,10-10,10H25C19.5,265.1,15,260.7,15,255.1z"/>
+</svg>
+
+  `,
+  'Minus': `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500">
+<path d="M15,255.1v-10.3c0-5.5,4.5-10,10-10h450c5.5,0,10,4.5,10,10v10.3c0,5.5-4.5,10-10,10H25C19.5,265.1,15,260.7,15,255.1z"/>
+</svg>
   `
 }
 
@@ -2465,7 +2567,7 @@ class WebsyLogin {
   }  
 }
 
-/* global */ 
+/* global WebsyDesigns */ 
 class WebsyNavigationMenu {
   constructor (elementId, options) {
     this.options = Object.assign({}, {
@@ -2473,20 +2575,28 @@ class WebsyNavigationMenu {
       orientation: 'horizontal',
       parentMap: {},
       childIndentation: 10,
-      activeSymbol: 'none'
+      activeSymbol: 'none',
+      enableSearch: false,
+      searchProp: 'text',
+      menuIcon: `<svg viewbox="0 0 40 40" width="30" height="40">              
+        <rect x="0" y="0" width="30" height="4" rx="2"></rect>
+        <rect x="0" y="12" width="30" height="4" rx="2"></rect>
+        <rect x="0" y="24" width="30" height="4" rx="2"></rect>
+      </svg>`,
+      searchOptions: {}
     }, options)
     if (!elementId) {
       console.log('No element Id provided for Websy Menu')		
       return
     }    
+    this.maxLevel = 0
     const el = document.getElementById(elementId)
     if (el) {
       this.elementId = elementId
       this.lowestLevel = 0
       this.flatItems = []
       this.itemMap = {}
-      this.flattenItems(0, this.options.items)    
-      console.log(this.flatItems)
+      this.flattenItems(0, this.options.items)          
       el.classList.add(`websy-${this.options.orientation}-list-container`)
       el.classList.add('websy-menu')
       if (this.options.align) {
@@ -2498,27 +2608,27 @@ class WebsyNavigationMenu {
       if (this.options.classes) {
         this.options.classes.split(' ').forEach(c => el.classList.add(c))
       }
-      el.addEventListener('click', this.handleClick.bind(this))	
+      el.addEventListener('click', this.handleClick.bind(this))
       this.render()      
     }    
   }
-  flattenItems (index, items, level = 0) {
+  flattenItems (index, items, level = 0, path = '') {
     if (items[index]) {
       this.lowestLevel = Math.max(level, this.lowestLevel)
       items[index].id = items[index].id || 	`${this.elementId}_${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 !== '' ? `${path}::${items[index].id}` : items[index].id
+      this.itemMap[items[index].id] = Object.assign({}, 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)
     }    
   }
   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()
     }
     if (event.target.classList.contains('websy-menu-header')) {
@@ -2526,7 +2636,7 @@ class WebsyNavigationMenu {
       if (event.target.classList.contains('trigger-item') && item.level === this.lowestLevel) {
         this.toggleMobileMenu('remove')
       } 
-      if (item.items) {
+      if (item.hasChildren === true) {
         event.target.classList.toggle('menu-open')
         this.toggleMenu(item.id)
       }
@@ -2535,6 +2645,42 @@ class WebsyNavigationMenu {
       this.toggleMobileMenu()
     }
   }
+  handleSearch (searchText) {
+    const el = document.getElementById(this.elementId)
+    let lowestItems = this.flatItems.filter(d => d.level === this.maxLevel)
+    let visibleItems = lowestItems
+    let defaultMethod = 'remove'
+    if (searchText.length > 1) {
+      defaultMethod = 'add'
+      visibleItems = lowestItems.filter(d => d[this.options.searchProp].toLowerCase().indexOf(searchText.toLowerCase()) !== -1)
+    }
+    // hide everything
+    const textEls = el.querySelectorAll(`div.websy-menu-header`)
+    for (let t = 0; t < textEls.length; t++) {
+      textEls[t].classList[defaultMethod]('websy-hidden')
+    }
+    const listEls = el.querySelectorAll(`ul.websy-child-list`)
+    for (let l = 0; l < listEls.length; l++) {
+      listEls[l].classList.add('websy-menu-collapsed')
+    }
+    if (searchText.length > 1) {
+      visibleItems.forEach(d => {      
+        // show the item and open the list
+        let pathParts = d.path.split('::')
+        pathParts.forEach(p => {
+          const textEl = document.getElementById(p)    
+          if (textEl) {
+            textEl.classList.remove('websy-hidden')          
+          }              
+          const listEl = document.getElementById(`${p}_list`)          
+          if (listEl) {
+            listEl.classList.remove('websy-menu-collapsed')
+          }        
+        })        
+      })
+    }
+    console.log('visibleItems', visibleItems)
+  }
   normaliseString (text) {
     return text.replace(/-/g, '').replace(/\s/g, '_')
   }
@@ -2545,14 +2691,10 @@ class WebsyNavigationMenu {
       if (this.options.collapsible === true) {
         html += `
           <div id='${this.elementId}_menuIcon' class='websy-menu-icon'>
-            <svg viewbox="0 0 40 40" width="30" height="40">              
-              <rect x="0" y="0" width="30" height="4" rx="2"></rect>
-              <rect x="0" y="12" width="30" height="4" rx="2"></rect>
-              <rect x="0" y="24" width="30" height="4" rx="2"></rect>
-            </svg>
+            ${this.options.menuIcon}
           </div>
         `
-      }
+      }      
       if (this.options.logo) {
         if (Array.isArray(this.options.logo.classes)) {
           this.options.logo.classes = this.options.logo.classes.join(' ')
@@ -2568,14 +2710,25 @@ class WebsyNavigationMenu {
           <div id="${this.elementId}_menuContainer" class="websy-menu-block-container">
         `
       }
-      html += this.renderBlock(this.options.items, 'main', 0)
+      if (this.options.enableSearch === true) {
+        html += `
+          <div id='${this.elementId}_search' class='websy-menu-search'></div>
+        `
+      }
+      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(`${this.elementId}_search`, Object.assign({}, {
+          onSearch: this.handleSearch.bind(this)
+        }, this.options.searchOptions))
+      }
     }
   }
-  renderBlock (items, block, level = 0) {
+  renderBlock (id, path, items, block, level = 0) {
+    this.maxLevel = Math.max(this.maxLevel, level)
     let html = `
-		  <ul class='websy-${this.options.orientation}-list ${level > 0 ? 'websy-child-list' : ''} ${(block !== 'main' ? 'websy-menu-collapsed' : '')}' id='${this.elementId}_${block}_list'
+		  <ul class='websy-${this.options.orientation}-list ${level > 0 ? 'websy-child-list' : ''} ${(block !== 'main' ? 'websy-menu-collapsed' : '')}' id='${id}_list' data-path='${path}'
 	  `	
     if (block !== 'main') {
       html += ` data-collapsed='${(block !== 'main' ? 'true' : 'false')}'`
@@ -2593,13 +2746,14 @@ class WebsyNavigationMenu {
       html += `
 			<li class='websy-${this.options.orientation}-list-item ${items[i].alwaysOpen === true ? 'always-open' : ''}'>
 				<div class='websy-menu-header ${items[i].classes || ''} ${selected} ${active}' 
-						 id='${blockId}' 
-						 data-id='${currentBlock}'
-             data-menu-id='${this.elementId}_${currentBlock}_list'
-						 data-popout-id='${level > 1 ? block : currentBlock}'
-						 data-text='${items[i].isLink !== true ? items[i].text : ''}'
-						 style='padding-left: ${level * this.options.childIndentation}px'
-						 ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
+          id='${blockId}' 
+          data-id='${currentBlock}'
+          data-path='${items[i].path}'
+          data-menu-id='${this.elementId}_${currentBlock}_list'
+          data-popout-id='${level > 1 ? block : currentBlock}'
+          data-text='${items[i].isLink !== true ? items[i].text : ''}'
+          style='padding-left: ${level * this.options.childIndentation}px'
+          ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
         >
       `      
       if (this.options.orientation === 'horizontal') {
@@ -2619,9 +2773,9 @@ class WebsyNavigationMenu {
           <span class='${items[i].items && items[i].items.length > 0 ? 'menu-carat' : ''}'></span>
       `
       if (this.options.orientation === 'vertical') {
-        html += `
-          &nbsp;
-        `
+        // html += `
+        //   &nbsp;
+        // `
       }
       if (items[i].isLink === true && items[i].href) {
         html += `<a href='${items[i].href}'>${items[i].text}</a>`
@@ -2630,7 +2784,7 @@ class WebsyNavigationMenu {
 				</div>
 		  `
       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
       if (block && block !== 'main') {
@@ -2647,6 +2801,8 @@ class WebsyNavigationMenu {
   }  
   toggleMenu (id) {
     const el = document.getElementById(`${id}_list`)
+    // const menuId = el.getAttribute('data-menu-id')
+    // const menuEl = document.getElementById(menuId)
     if (el) {
       el.classList.toggle('websy-menu-collapsed')
     }
@@ -3584,7 +3740,14 @@ class WebsyRouter {
     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))
@@ -3625,10 +3788,11 @@ class WebsyRouter {
       } 
     }    
   }
-  addUrlParams (params) {    
+  addUrlParams (params, reloadView = false) {    
     if (typeof params === 'undefined') {
       return
     }
+    this.previousParams = Object.assign({}, this.currentParams)
     const output = {
       path: '',
       items: {}
@@ -3650,6 +3814,9 @@ class WebsyRouter {
     history.pushState({
       inputPath
     }, inputPath, `${inputPath}?${path}`) 
+    if (reloadView === true) {
+      this.showView(this.currentView, this.currentParams, 'main')
+    }
   }
   buildUrlPath (params) {
     let path = []
@@ -3678,6 +3845,7 @@ class WebsyRouter {
     }
   }
   formatParams (params) {
+    this.previousParams = Object.assign({}, this.currentParams)
     const output = {
       path: params,
       items: {}
@@ -3897,6 +4065,10 @@ class WebsyRouter {
     if (this.previousView !== this.currentView || group !== 'main') {
       this.showComponents(view)
       this.publish('show', [view, params, group]) 
+    }       
+    else if (this.previousView === this.currentView && this.previousParams.path !== this.currentParams.path) { 
+      this.showComponents(view)
+      this.publish('show', [view, params, group]) 
     }    
   }
   reloadCurrentView () {
@@ -3912,17 +4084,14 @@ class WebsyRouter {
     let groupActiveView
     let params = {}       
     let 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, '/')
     }    
     if (this.options.persistentParameters === true) {
       if (inputPath.indexOf('?') === -1 && this.queryParams) {
         inputPath += `?${this.queryParams}`
       }
-    }   
-    else {
-      this.currentParams = {}
-    } 
+    }     
     if (this.usesHTMLSuffix === true) {
       if (inputPath.indexOf('?') === -1) {
         inputPath = `?view=${inputPath}`
@@ -3943,7 +4112,11 @@ class WebsyRouter {
       inputPath = parts[0]
     }
     else if (group === this.options.defaultGroup) {
-      this.currentParams = {}
+      this.previousParams = Object.assign({}, this.currentParams)
+      this.currentParams = {
+        path: '',
+        items: {}
+      }
     }
     if (event) {
       if (event.target && event.target.classList.contains(this.options.triggerToggleClass)) {
@@ -3995,13 +4168,7 @@ class WebsyRouter {
     }    
     if (toggle === true && newPath === groupActiveView) {
       return
-    }
-    if (toggle === false) {
-      this.showView(this.currentView, this.currentParams, group)
-    }
-    else if (newPath && newPath !== '') {      
-      this.showView(newPath, null, group)
-    }
+    }    
     if (this.usesHTMLSuffix === true) {
       inputPath = window.location.pathname.split('/').pop() + inputPath
     }
@@ -4028,6 +4195,12 @@ class WebsyRouter {
         // 
       }
     }
+    if (toggle === false) {
+      this.showView(this.currentView, this.currentParams, group)
+    }
+    else if (newPath && newPath !== '') {      
+      this.showView(newPath, null, group)
+    }
   }
   on (event, fn) {
     this.options.subscribers[event].push(fn)
@@ -4112,7 +4285,7 @@ class WebsySearch {
     this.elementId = elementId
     const 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
@@ -4122,12 +4295,15 @@ class WebsySearch {
     const el = document.getElementById(elementId)
     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 = `
           <div class='websy-search-input-container'>
             ${this.options.searchIcon}
             <input id='${this.elementId}_search' class='websy-search-input' placeholder='${this.options.placeholder || 'Search'}'>
-            ${this.options.clearIcon}
+            <div class='clear websy-hidden' id='${this.elementId}_clear'>
+              ${this.options.clearIcon}
+            </div>
           </div>
         `
     }
@@ -4135,11 +4311,25 @@ class WebsySearch {
       console.log('No element found with Id', elementId)
     }
   }
+  handleClick (event) {
+    if (event.target.classList.contains('clear')) {
+      const inputEl = document.getElementById(`${this.elementId}_search`)
+      inputEl.value = ''
+      this.options.onSearch('')
+    }
+  }
   handleKeyUp (event) {
     if (event.target.classList.contains('websy-search-input')) {
       if (this.searchTimeoutFn) {
         clearTimeout(this.searchTimeoutFn)
       }
+      const clearEl = document.getElementById(`${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(() => {
           if (this.options.onSearch) {
@@ -5693,7 +5883,7 @@ class WebsyTable3 {
       `).join('')
       bodyHtml += '</colgroup>'
     }
-    data.forEach(row => {
+    data.forEach((row, rowIndex) => {
       bodyHtml += `<tr class="websy-table-row">`
       row.forEach((cell, cellIndex) => {
         if (typeof sizingColumns[cellIndex] === 'undefined') {
@@ -5722,6 +5912,8 @@ class WebsyTable3 {
           data-info='${cell.value}'
           colspan='${cell.colspan || 1}'
           rowspan='${cell.rowspan || 1}'
+          data-row-index='${rowIndex}'
+          data-col-index='${cellIndex}'
         `
         // if (useWidths === true) {
         //   bodyHtml += `
@@ -5730,7 +5922,22 @@ class WebsyTable3 {
         //   `
         // }
         bodyHtml += `
-        >
+        >`
+        if (cell.expandable === true) {
+          bodyHtml += `<i 
+            data-row-index='${rowIndex}'
+            data-col-index='${cellIndex}'
+            class='websy-table-cell-expand'
+          >${WebsyDesigns.Icons.Plus}</i>`
+        }
+        if (cell.collapsable === true) {
+          bodyHtml += `<i 
+            data-row-index='${rowIndex}'
+            data-col-index='${cellIndex}'
+            class='websy-table-cell-collapse'
+          >${WebsyDesigns.Icons.Minus}</i>`
+        }
+        bodyHtml += `
           ${cell.value}
         </td>`
       })
@@ -5948,13 +6155,30 @@ class WebsyTable3 {
     return output
   }
   handleClick (event) {
+    const colIndex = +event.target.getAttribute('data-col-index')
+    const rowIndex = +event.target.getAttribute('data-row-index')
     if (event.target.classList.contains('websy-table-search-icon')) {     
-      console.log('clicked on search icon')
-      const colIndex = +event.target.getAttribute('data-col-index')      
+      console.log('clicked on search icon')            
       if (this.options.columns[this.options.columns.length - 1][colIndex].onSearch) {
         this.options.columns[this.options.columns.length - 1][colIndex].onSearch(event, this.options.columns[this.options.columns.length - 1][colIndex])
       } 
     }
+    if (event.target.classList.contains('websy-table-cell-collapse')) {
+      if (this.options.onCollapseCell) {
+        this.options.onCollapseCell(event, +rowIndex, +colIndex)
+      }
+      else {
+        // out of box function
+      }
+    }
+    if (event.target.classList.contains('websy-table-cell-expand')) {
+      if (this.options.onExpandCell) {
+        this.options.onExpandCell(event, +rowIndex, +colIndex)
+      }
+      else {
+        // out of box function
+      }
+    }
   }
   handleMouseDown (event) {
     if (event.target.classList.contains('websy-scroll-handle-y')) {
@@ -6659,6 +6883,9 @@ else {
       this.longestBottom = this.options.data.bottom.max.toString()
       if (this.options.data.bottom.formatter) {
         this.longestBottom = this.options.data.bottom.formatter(this.options.data.bottom.max).toString()
+      }
+      else {
+        this.longestBottom = '01/01/2000'
       } 
     }
     if (this.options.data.left && this.options.data.left.data && this.options.data.left.max === 'undefined') {
@@ -7174,8 +7401,8 @@ if (this.options.showLabels === true || series.showLabels === true) {
     .style('stroke-opacity', 1e-6)
     .remove()
   labels      
-    .attr('x', getLabelX.bind(this))  
-    .attr('y', getLabelY.bind(this))    
+    .attr('x', d => getLabelX.call(this, d, series.labelPosition))  
+    .attr('y', d => getLabelY.call(this, d, series.labelPosition))   
     .attr('class', `label_${series.key}`)
     .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
     .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)    
@@ -7211,8 +7438,8 @@ if (this.options.showLabels === true || series.showLabels === true) {
     .enter()
     .append('text')
     .attr('class', `label_${series.key}`)
-    .attr('x', getLabelX.bind(this))  
-    .attr('y', getLabelY.bind(this))    
+    .attr('x', d => getLabelX.call(this, d, series.labelPosition))  
+    .attr('y', d => getLabelY.call(this, d, series.labelPosition))    
     .attr('alignment-baseline', 'central')
     .attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle')
     .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))