toggle-components-library 1.33.0-beta.9 → 1.34.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.33.0-beta.9",
+    "version": "1.34.0-beta.1",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/assets/img/feedback.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 759.32 112.34"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#fe6c66;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M107.9,4.19c11.4,0,22.9.9,34.16,2.66,22.93,3.6,45.06,10.78,65.75,21.32,2.34,1.19,3.8,3.57,3.8,6.2v43.59c0,2.63-1.46,5.01-3.8,6.2-20.7,10.55-42.83,17.72-65.76,21.32-11.26,1.77-22.75,2.66-34.15,2.66s-22.89-.9-34.16-2.66c-22.93-3.6-45.05-10.77-65.76-21.32-2.35-1.19-3.8-3.57-3.8-6.2v-43.59c0-2.63,1.46-5.01,3.8-6.2C28.69,17.62,50.82,10.45,73.74,6.85c11.26-1.77,22.75-2.66,34.16-2.66M107.9,0c-11.62,0-23.33.91-34.81,2.71C49.73,6.38,27.19,13.69,6.09,24.44h0c-3.74,1.9-6.09,5.74-6.09,9.94v43.59c0,4.19,2.35,8.03,6.09,9.94h0c21.1,10.75,43.65,18.06,67.01,21.73,11.48,1.8,23.19,2.72,34.81,2.72s23.33-.91,34.8-2.72c23.37-3.67,45.91-10.98,67.01-21.73h0c3.74-1.9,6.09-5.74,6.09-9.93v-43.59c0-4.19-2.35-8.03-6.09-9.93h0c-21.09-10.75-43.64-18.06-67.01-21.73-11.48-1.8-23.19-2.71-34.81-2.71h0Z"/><path class="cls-1" d="M213.58,2.75v3.63h-.75v-3.63h-1.23v-.68h3.2v.68h-1.23ZM219.05,6.38v-3.53l-1.17,3.42h-.54l-1.17-3.41v3.52h-.75V2.06h1.18l1.03,3.11,1.03-3.11h1.15v4.32h-.75Z"/><path class="cls-1" d="M108.07,41.14c-3.08,0-5.58,2.5-5.58,5.58v2.2c0,1.41.03,1.5.9,3.07l6.23,10.99s.04.06.04.04c.01.07,0,.16,0,.33v2.16c0,.9-.72,1.64-1.6,1.64s-1.59-.74-1.59-1.64v-1.47c0-.7-.6-1.3-1.3-1.3h-1.38c-.7,0-1.3.6-1.3,1.3v1.47c0,3.08,2.5,5.58,5.58,5.58s5.58-2.5,5.58-5.58v-2.16c0-1.36-.03-1.47-.9-3.02l-6.23-10.99s-.03-.06-.04-.05c-.01-.07,0-.17,0-.38v-2.2c0-.88.72-1.6,1.59-1.6s1.6.72,1.6,1.6v1.47c0,.73.57,1.3,1.3,1.3h1.38c.73,0,1.3-.57,1.3-1.3v-1.47c0-3.08-2.5-5.58-5.58-5.58Z"/><path class="cls-1" d="M34.07,31.78c-.3-.05-.6-.07-.89-.07-3.63,0-6.37,3.42-6.37,7.95v39.49c0,.37.12.72.34.97.22.26.53.41.85.41.05,0,.1,0,.15-.01l1.9-.29c.7-.11,1.24-.81,1.24-1.64v-20.29s5.43-.08,5.43-.08v19.47c0,.36.11.68.31.92.25.3.62.44,1.02.38l1.9-.29c.7-.11,1.24-.78,1.24-1.56v-36.13c0-4.5-3.19-8.64-7.1-9.24ZM36.7,40.64v12.45l-5.43-.08v-12.98c0-1.86,1.2-3.23,2.7-3.05,1.5.19,2.73,1.83,2.73,3.65Z"/><path class="cls-1" d="M59.41,36.25l-1.9-.29c-.73-.11-1.34.44-1.34,1.21v37.96c0,.66.49,1.16,1.14,1.16.07,0,.13,0,.2-.02l1.9-.29c.7-.11,1.23-.72,1.23-1.41v-36.91c0-.66-.57-1.31-1.23-1.41Z"/><path class="cls-1" d="M82.56,39.89l-4.92-.75c-.68-.1-1.29.07-1.73.44-.36.32-.56.75-.56,1.22v31.3c0,.29.12.56.33.75.2.17.48.27.78.27.07,0,.15,0,.23-.02l1.9-.29c.6-.09,1.24-.62,1.24-1.26v-13.63l2.66-.04v-.34s.08.34.08.34c.72,0,1.39.22,1.89.61.48.38.74.88.74,1.41v10.76c0,.62.58,1.05,1.34.93l1.9-.29c.7-.11,1.23-.62,1.23-1.19v-10.36c0-1.41-.66-2.72-1.86-3.73,1.22-1.02,1.86-2.28,1.86-3.69v-5.91c0-3-3.19-5.93-7.1-6.53ZM85.2,46.05v6.14c0,.51-.26,1-.74,1.37-.5.39-1.17.6-1.94.6h0l-2.69-.04v-10.84l2.64.33c1.5.19,2.73,1.28,2.73,2.44Z"/><path class="cls-1" d="M138.67,38.47l-1.84.22c-.68.08-1.25.66-1.25,1.27v14.22l-5.43.06v-13.57c0-.61-.61-1.09-1.33-1l-1.9.23c-.68.08-1.25.64-1.25,1.26v29.97c0,.6.54,1.12,1.25,1.21l1.9.23c.74.1,1.33-.37,1.33-1v-13.52l5.43.06v14.16c0,.64.54,1.18,1.25,1.27l1.84.22c.06,0,.12.01.18.01.65,0,1.15-.46,1.15-1.07v-33.18c0-.64-.61-1.15-1.33-1.06Z"/><path class="cls-1" d="M158.15,35.96l-1.9.23c-.68.08-1.25.72-1.25,1.45v37.02c0,.69.55,1.3,1.24,1.39l1.9.23c.06,0,.11,0,.16,0,.66,0,1.17-.51,1.17-1.19v-37.96c0-.7-.6-1.26-1.33-1.18Z"/><path class="cls-1" d="M189.33,40.98c0-4.66-3.24-8.23-7.19-7.76l-5.87.72c-.74.09-1.25.85-1.25,1.58v41.79c0,.76.55,1.42,1.25,1.51l1.9.23s.09,0,.13,0c.64,0,1.14-.58,1.14-1.32v-18.89l2.81.03c3.91,0,7.09-3.79,7.09-8.44v-9.46ZM184.86,50.56c0,1.78-1.21,3.24-2.69,3.25l-2.74.03v-15.28l2.78-.27c1.47-.15,2.65,1.19,2.65,2.99v9.27Z"/><rect class="cls-2" x="216.68" y="55.44" width="74.29" height="2" transform="translate(162.02 299.72) rotate(-81.86)"/><path class="cls-1" d="M283.07,93.94l10.09-72.29h48.23l-1.55,11.64h-35.13l-2.72,19.99h30.66l-1.65,11.74h-30.66l-4.08,28.92h-13.2Z"/><path class="cls-1" d="M367.16,95.11c-5.18,0-9.7-1.13-13.58-3.4-3.88-2.26-6.88-5.35-8.98-9.27-2.1-3.91-3.15-8.29-3.15-13.15,0-4.01.71-7.78,2.13-11.3,1.42-3.52,3.4-6.65,5.92-9.36,2.52-2.72,5.48-4.84,8.88-6.36,3.4-1.52,7.07-2.28,11.01-2.28,5.24,0,9.67,1.07,13.29,3.2,3.62,2.13,6.37,5,8.25,8.59,1.88,3.59,2.81,7.62,2.81,12.08,0,1.16-.1,2.36-.29,3.59-.19,1.23-.45,2.49-.78,3.79h-40.75l.68-9.8h33.48l-6.4,4.37c.91-2.85,1.02-5.43.34-7.76-.68-2.33-1.96-4.17-3.83-5.53-1.88-1.36-4.17-2.04-6.89-2.04-3.49,0-6.32.89-8.49,2.67-2.17,1.78-3.75,4.16-4.75,7.13-1,2.98-1.5,6.31-1.5,9.99,0,2.85.53,5.3,1.6,7.38,1.07,2.07,2.57,3.64,4.51,4.71,1.94,1.07,4.21,1.6,6.79,1.6,2.91,0,5.47-.64,7.67-1.94,2.2-1.29,3.95-2.94,5.24-4.95l10.09,5.34c-1.23,2.52-2.99,4.74-5.29,6.65-2.3,1.91-4.98,3.4-8.05,4.46-3.07,1.07-6.39,1.6-9.95,1.6Z"/><path class="cls-1" d="M426.65,95.11c-5.18,0-9.7-1.13-13.58-3.4-3.88-2.26-6.88-5.35-8.98-9.27-2.1-3.91-3.15-8.29-3.15-13.15,0-4.01.71-7.78,2.13-11.3,1.42-3.52,3.4-6.65,5.92-9.36,2.52-2.72,5.48-4.84,8.88-6.36,3.4-1.52,7.07-2.28,11.01-2.28,5.24,0,9.67,1.07,13.29,3.2,3.62,2.13,6.37,5,8.25,8.59,1.88,3.59,2.81,7.62,2.81,12.08,0,1.16-.1,2.36-.29,3.59-.19,1.23-.45,2.49-.78,3.79h-40.75l.68-9.8h33.48l-6.4,4.37c.91-2.85,1.02-5.43.34-7.76-.68-2.33-1.96-4.17-3.83-5.53-1.88-1.36-4.17-2.04-6.89-2.04-3.49,0-6.32.89-8.49,2.67-2.17,1.78-3.75,4.16-4.75,7.13-1,2.98-1.5,6.31-1.5,9.99,0,2.85.53,5.3,1.6,7.38,1.07,2.07,2.57,3.64,4.51,4.71,1.94,1.07,4.21,1.6,6.79,1.6,2.91,0,5.47-.64,7.67-1.94,2.2-1.29,3.95-2.94,5.24-4.95l10.09,5.34c-1.23,2.52-2.99,4.74-5.29,6.65-2.3,1.91-4.98,3.4-8.05,4.46-3.07,1.07-6.39,1.6-9.95,1.6Z"/><path class="cls-1" d="M485.45,95.11c-4.98,0-9.35-1.07-13.1-3.2-3.75-2.13-6.7-5.09-8.83-8.88-2.13-3.78-3.2-8.13-3.2-13.05,0-4.46.78-8.52,2.33-12.18,1.55-3.65,3.65-6.81,6.31-9.46,2.65-2.65,5.76-4.71,9.32-6.16,3.56-1.46,7.31-2.18,11.26-2.18s7.78.83,10.92,2.47c3.14,1.65,5.58,3.9,7.33,6.74l-2.72,2.43,4.27-31.15h12.91l-10.19,73.46h-12.13l1.36-10.19,2.81,1.94c-1.94,3.17-4.58,5.53-7.91,7.08-3.33,1.55-6.91,2.33-10.72,2.33ZM487.19,83.46c3.17,0,5.95-.79,8.34-2.38,2.39-1.58,4.29-3.72,5.68-6.4,1.39-2.68,2.09-5.64,2.09-8.88,0-2.72-.57-5.14-1.7-7.28-1.13-2.13-2.69-3.8-4.66-5-1.97-1.2-4.29-1.79-6.94-1.79-3.17,0-5.98.78-8.44,2.33-2.46,1.55-4.38,3.66-5.77,6.31-1.39,2.65-2.09,5.63-2.09,8.93,0,2.78.57,5.22,1.7,7.33,1.13,2.1,2.72,3.77,4.75,5,2.04,1.23,4.38,1.84,7.04,1.84Z"/><path class="cls-1" d="M554.44,95.11c-4.14,0-7.88-.78-11.21-2.33-3.33-1.55-5.87-3.79-7.62-6.7l1.65-2.33-1.36,10.19h-12.13l10.29-73.46h12.81l-4.27,31.15-3.49-2.81c2.07-2.85,4.71-5.03,7.91-6.55s6.74-2.28,10.63-2.28c4.92,0,9.25,1.15,13,3.45,3.75,2.3,6.71,5.38,8.88,9.27,2.17,3.88,3.25,8.25,3.25,13.1,0,4.01-.73,7.8-2.18,11.35-1.46,3.56-3.48,6.68-6.07,9.36-2.59,2.69-5.6,4.79-9.02,6.31-3.43,1.52-7.12,2.28-11.06,2.28ZM553.18,83.46c3.17,0,5.98-.79,8.44-2.38,2.46-1.58,4.38-3.7,5.77-6.36,1.39-2.65,2.09-5.6,2.09-8.83,0-2.78-.57-5.24-1.7-7.38s-2.72-3.8-4.75-5c-2.04-1.2-4.42-1.79-7.13-1.79-3.11,0-5.87.79-8.3,2.38-2.43,1.59-4.32,3.71-5.68,6.36-1.36,2.65-2.04,5.56-2.04,8.73,0,2.78.57,5.26,1.7,7.42,1.13,2.17,2.7,3.85,4.71,5.05,2,1.2,4.3,1.79,6.89,1.79Z"/><path class="cls-1" d="M606.16,95.11c-3.43,0-6.45-.55-9.07-1.65-2.62-1.1-4.67-2.72-6.16-4.85-1.49-2.13-2.23-4.75-2.23-7.86,0-3.36.86-6.24,2.57-8.64,1.71-2.39,4.06-4.35,7.04-5.87,2.97-1.52,6.4-2.57,10.29-3.15l17.76-2.81-.97,9.7-14.94,2.62c-2.39.45-4.4,1.28-6.02,2.47-1.62,1.2-2.43,2.83-2.43,4.9,0,1.81.66,3.17,1.99,4.08,1.33.91,3.02,1.36,5.09,1.36,2.59,0,4.92-.6,6.99-1.79,2.07-1.2,3.78-2.8,5.14-4.8,1.36-2,2.17-4.2,2.43-6.6l1.84-13.2c.19-1.75-.1-3.22-.87-4.41s-1.88-2.12-3.3-2.77c-1.42-.65-3.01-.97-4.75-.97-2.91,0-5.5.78-7.76,2.33-2.26,1.55-4.01,3.53-5.24,5.92l-9.99-5.53c1.29-2.78,3.14-5.18,5.53-7.18,2.39-2,5.16-3.57,8.3-4.71,3.14-1.13,6.45-1.7,9.95-1.7,4.33,0,8.17.84,11.5,2.52,3.33,1.68,5.87,3.98,7.62,6.89,1.75,2.91,2.33,6.31,1.75,10.19l-4.75,34.35h-12.13l1.26-9.03,3.2.1c-1.62,2.27-3.43,4.16-5.43,5.68-2.01,1.52-4.19,2.64-6.55,3.35-2.36.71-4.9,1.07-7.62,1.07Z"/><path class="cls-1" d="M672.82,95.11c-4.98,0-9.45-1.13-13.39-3.4-3.95-2.26-7.04-5.35-9.27-9.27-2.23-3.91-3.35-8.33-3.35-13.24,0-4.08.76-7.89,2.28-11.45,1.52-3.56,3.61-6.66,6.26-9.31,2.65-2.65,5.74-4.72,9.27-6.21,3.52-1.49,7.33-2.23,11.4-2.23s7.41.66,10.58,1.99c3.17,1.33,5.87,3.17,8.1,5.53,2.23,2.36,3.77,5.13,4.61,8.3l-11.35,4.56c-.84-2.72-2.33-4.84-4.46-6.36-2.13-1.52-4.66-2.28-7.57-2.28-3.11,0-5.86.81-8.25,2.43-2.39,1.62-4.24,3.75-5.53,6.4-1.29,2.65-1.94,5.53-1.94,8.64,0,2.78.53,5.24,1.6,7.38s2.59,3.82,4.56,5.04c1.97,1.23,4.22,1.84,6.74,1.84,3.17,0,5.95-.82,8.34-2.47,2.39-1.65,4.17-3.83,5.34-6.55l10.87,5.34c-1.23,2.98-3.07,5.63-5.53,7.96-2.46,2.33-5.34,4.14-8.64,5.43-3.3,1.29-6.86,1.94-10.67,1.94Z"/><path class="cls-1" d="M703.33,93.94l10.29-73.46h12.91l-6.79,48.13-5.92-1.46,28.43-26.01h17.08l-22.51,21.25,15.53,31.54h-13.88l-13.29-27.37,6.99-1.55-18.34,17.18,5.14-7.86-2.72,19.6h-12.91Z"/></g></svg>

package/src/components/boosters/ToggleBoosterButton.vue

@@ -9,7 +9,9 @@
 
     <div :class="['toggle-booster-button', boosterType]" >
       <p class="plus">+</p>
-      <slot>{{buttonText}}</slot>
+      <div v-if="buttonText" class="toggle-booster-button-button-text">
+        <slot>{{buttonText}}</slot>
+      </div>
     </div>
   </button>
 </template>

package/src/components/buttons/ToggleButton.vue

@@ -3,14 +3,18 @@
         <button
             v-if="!$slots.default"
             :type="type"
-            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed}]"
+            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed, 'toggle-button-booster-badge': boosterImageProperties}]"
             :disabled="(loading || disabled)"
             @click="click"
             >
             <div class="toggle-button-loader" v-if="loading" ></div>
             <span v-html="buttonText" v-if="!isMini"/>
-        </button>
-        <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
+
+            <div v-if="boosterImageProperties" :class="['toggle-button-booster-image-badge', {'shimmer': boosterShimmer}]" :style="'background-color: ' + boosterImageProperties.bgColor">
+              <img class="toggle-button-booster-image" :src="boosterImageProperties.src" :alt="boosterImageProperties.alt">
+            </div>
+          </button>
+          <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
             <div class="toggle-button-loader" v-if="loading" ></div>
             <div class="toggle-button-a-border" />
             <!-- 
@@ -67,10 +71,26 @@ export default {
             type:String,
             default:'confirm'
         },
-        /* Grey out button if booster not enabled*/
+        /* 
+        * Grey out button if booster not enabled
+        */
         subscribed: {
           type: Boolean,
           default: true
+        },
+        /*
+        * Booster badge image properties, image, alt text, background colour
+        */
+        boosterImageProperties: {
+          type: Object,
+          required: false,
+        },
+        /*
+        * Turns the shimmer animation on and off for the booster badge
+        */
+        boosterShimmer: {
+          type: Boolean,
+          default: true
         }
     },
     computed: {

package/src/components/forms/ToggleInputSelect.vue

@@ -1,18 +1,18 @@
 <template>
 
-<div v-if="show" class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
+    <label 
         v-if="label"
-        :for="name ? name : 'ToggleInputSelect' "
+        :for="name ? name : 'ToggleInputSelect' " 
         class="toggle-input-label"
-    > {{ label }}
+    > {{ label }} 
     </label>
 
     <div class="toggle-input-select-container">
-        <select
-            :name="name ? name : 'ToggleInputSelect' "
+        <select 
+            :name="name ? name : 'ToggleInputSelect' " 
             :class="[ 'toggle-input-select', size]"
-            v-model="inputVal"
+            v-model="inputVal" 
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
             :disabled="disabled"
@@ -24,7 +24,7 @@
     </div>
 
     <label
-        class="toggle-input-label-error"
+        class="toggle-input-label-error" 
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -39,11 +39,6 @@ import { mixins } from '../mixins/mixins'
 
 export default {
     mixins:[mixins],
-    data() {
-        return {
-          show: false
-        }
-    },
     props: {
         value: {},
         name: {
@@ -88,19 +83,10 @@ export default {
           type: Boolean,
           required: false,
           default: false
-        },
-        // in toggle-table context, if search bar height expand transition has finished
-        applyFocus: {
-          type: Boolean,
-          required: false,
-          default: null
         }
     },
 
     created : function(){
-        if(this.applyFocus === null || this.applyFocus){
-           this.show = true;
-        }
     },
     computed: {
         inputVal: {
@@ -126,11 +112,6 @@ export default {
         options(options) {
             if (options.filter( option =>  option.value == this.inputVal).length == 0)
                 this.inputVal = "";
-        },
-        applyFocus(new_value){
-          if(new_value){
-              this.show = true;
-          }
         }
     }
 }

package/src/components/forms/ToggleInputText.vue

@@ -1,16 +1,16 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+    <label 
         v-if="label"
-        :for="name ? name : 'InputText' "
+        :for="name ? name : 'InputText' " 
         class="toggle-input-label"
-    > {{ label }}
+    > {{ label }} 
     </label>
     <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
     <input
         :type="type"
-        :name="name ? name : 'ToggleInputText' "
+        :name="name ? name : 'ToggleInputText' " 
         :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
@@ -19,11 +19,9 @@
         :maxlength="maxLength"
         :disabled="disabled"
         :readonly="readonly"
-        :ref="'input_ele'"
-        @keyup.esc="handleEscPress"
     />
     <label
-        class="toggle-input-label-error"
+        class="toggle-input-label-error" 
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -102,26 +100,10 @@ export default {
           type: Boolean,
           required: false,
           default: false
-        },
-        // in toggle-table context, if search bar height expand transition has finished
-        searchIsOpen: {
-          type: Boolean,
-          required: false
         }
     },
 
-    created : function()
-    {
-      if(this.searchIsOpen){
-          this.$nextTick(() => this.$refs['input_ele'].focus());
-      }
-    },
-    watch: {
-        searchIsOpen(new_value){
-            if(new_value){
-                this.$nextTick(() => this.$refs['input_ele'].focus());
-            }
-        }
+    created : function(){
     },
     computed: {
         inputVal: {
@@ -136,11 +118,6 @@ export default {
     },
     methods: {
 
-        handleEscPress()
-        {
-            this.$emit('bail');
-        },
-
         /*
         * Concat message for count characters
         * @return string

package/src/components/tables/ToggleTable.vue

@@ -3,58 +3,29 @@
     <div>
 
     <table class="toggle-table">
-        <thead :class="{'toggle-table-any-search-active': anySearchActive}">
+        <thead :class="{'toggle-table-any-search-active': searchActive}">
             <tr class="toggle-tablee-tr">
-              <th
-                  scope="col"
-                  :class="['toggle-table-th', {'toggle-table-search-active': tableSearchActive(field), 'toggle-table-searchable':field.filterable}]"
-                  v-for="(field, index) in headers"
-                  :colspan="field.colspan"
+              <th 
+                  scope="col" 
+                  :class="['toggle-table-th', {'toggle-table-search-active': tableSearchActive(field), 'toggle-table-searchable':field.filterable}]"  
+                  v-for="(field, index) in headers" 
                   :key="index"
                   :style="'width:'+field.width"
                   @click="activateSearch(field)"
               >
-                  <div class="toggle-table-th-inner" @transitionend="handleTransitionEnd">
-
+                  <div class="toggle-table-th-inner">
                     <span class="toggle-table-th-title">{{field.label}}</span>
                     <span class="toggle-table-close-search" v-on:click.stop @click="closeSearch(field)"></span>
+                    <ToggleInputText type="text" :ref="field.key+'-input'" v-model="searchModels[field.key]" @input="searchChange(field)" 
+                    v-if="field.type == 'text' && (searchModels[field.key] || editingInput == field.key)" />
+                    <ToggleInputSelect style="margin-top:2px;" size="small" v-if="field.type == 'select'  && (searchModels[field.key] || editingInput == field.key)"  :options="field.select_options" v-model="searchModels[field.key]" @input="val=>searchChange(val, field)"/>
 
-                    <ToggleInputText
-                        v-if="field.type === 'text' && (searchModels[field.key] || editingInput === field.key)"
-                        type="text"
-                        :ref="field.key+'-input'"
-                        v-model="searchModels[field.key]"
-                        @input="searchChange(field)"
-                        @bail="closeSearch(field)"
-                        :applyFocus="applyFocus"
-                    />
-                    <ToggleInputSelect
-                        style="margin-top:2px;"
-                        :size="'small'"
-                        v-if="field.type === 'select' && (searchModels[field.key] || editingInput === field.key)"
-                        :applyFocus="applyFocus"
-                        :options="field.select_options"
-                        v-model="searchModels[field.key]"
-                        @input="val=>searchChange(val, field)"
-                    />
-                    <ToggleDateRangePicker
-                        v-if="field.type === 'date_range' && (searchModels[field.key].start || searchModels[field.key].end || editingInput === field.key)"
-                        name="date_range"
-                        v-model="searchModels[field.key]"
-                        @input="val=>searchChange(val, field)"
-                    />
+                    <ToggleDateRangePicker v-if="field.type == 'date' && (searchModels[field.key].start || searchModels[field.key].end || editingInput == field.key)" name="date" v-model="searchModels[field.key]"  @input="val=>searchChange(val, field)" />
                   </div>
               </th>
-
+              
             </tr>
         </thead>
-        <tr class="empty-table" v-if="(items && items.length === 0) && !loading">
-          <td :colspan="headers.length">
-            <div class="full">
-              <div class="empty-area"><p>{{ emptyTableMessage }}</p></div>
-            </div>
-          </td>
-        </tr>
         <tbody v-if="!$slots.default || !$slots.default.length">
             <ToggleTableRow v-for="(item, index) in items" :key="index" >
                 <ToggleTableColumn v-for="(column, column_index) in item" :key="column_index">{{column}}</ToggleTableColumn>
@@ -91,34 +62,20 @@ export default {
                 type: [Array]
             },
             total:{
-                type: [Number]
+                type: [Number] 
             },
             per_page:{
-                type: [Number]
+                type: [Number] 
             },
             page:{
                 type: [Number],
                 default:1
-            },
-            loading: {
-                type: Boolean
-            },
-            emptyTableMessage: {
-                type: String,
-                default: "No rows returned."
-            },
-            searchDebounce: {
-                type: [Number],
-                default: 500
             }
-        },
+        },  
         data : function(){
             return {
                 editingInput:false,
-                searchModels:{},
-                anySearchActive: false,
-                applyFocus: false,
-                searchTimeout: null
+                searchModels:{}
             };
         },
         computed: {
@@ -140,23 +97,36 @@ export default {
 
             headers() {
                 if(!this.fields){
-                    return Object.keys(this.items[0]);
+                    return Object.keys(this.items[0]);                 
                 }
                 return this.fields;
             },
 
+            searchActive() { 
+                if(this.editingInput) {
+                    return true;
+                }
+                for(let col in this.searchModels){
+                    if(!this.searchModels[col])
+                        return false;
+                    if (this.searchModels[col].start !== undefined) {
+                        return true;
+                    }
+                    else if(this.searchModels[col]) return true;
+                }
+                return false;
+            },
+
+            
         },
         created : function(){
 
             if(this.fields){
-
                 for (let i = 0; i < this.fields.length; i++) {
-                    let value = this.fields[i].type == 'date_range' ? this.setInitialDate(i) : (this.fields[i].value ?? '');
-
+                    let value = this.fields[i].type == 'date' ? this.setInitialDate(i) : this.fields[i].value;
                     let field_name = this.fields[i].key;
                     this.$set( this.searchModels, field_name, value )
                     if(value){
-                        this.applyFocus = true;
                         // if date has an initial value set, show it.
                         if(typeof value.start !== 'undefined'){
                             if(value.start.length) this.activateSearch(this.fields[i]);
@@ -167,29 +137,20 @@ export default {
                     this.searchChange();
                 }
             }
-
+           
         },
 
         beforeDestroy: function () {
+        },
+        watch:{
+           
         },
         mounted : function ()
         {
 
         },
-
+        
         methods:{
-
-            handleTransitionEnd(event){
-              if(event.propertyName === 'height'){
-                  if(this.anySearchActive && !this.applyFocus){
-                      this.applyFocus = true;
-                  }
-                  if(!this.anySearchActive && this.applyFocus){
-                      this.applyFocus = false;
-                  }
-              }
-            },
-
             // set initial date
             setInitialDate(index){
                 let value = this.fields[index].value;
@@ -199,64 +160,36 @@ export default {
 
             tableSearchActive(field)
             {
-                if(field.type === 'date_range'){
-                    return (this.searchModels[field.key].start || this.searchModels[field.key].end || this.editingInput === field.key);
+                if(field.type == 'date'){
+                    return (this.searchModels[field.key].start || this.searchModels[field.key].end || this.editingInput == field.key);
                 }
-                return (this.searchModels[field.key] || this.editingInput === field.key);
+                return (this.searchModels[field.key] || this.editingInput == field.key);
 
             },
 
-
-            getSearchModelTypeFromKey(key){
-              for(let i=0; i<this.fields.length; i++){
-                if(this.fields[i].key === key){
-                  return this.fields[i].type;
-                }
-              }
-              return null;
-            },
-
             closeSearch(field){
-
                 this.editingInput = false;
-                this.searchModels[field.key] = field.type === 'date_range' ? { start: false, end: false} : '' ;
-
-                // check if any search is active; if not, close/shrink header
-                let is_active = false;
-                for(const key in this.searchModels){
-
-                    if(this.getSearchModelTypeFromKey(key) === 'date_range'){
-                      if (this.searchModels[key].start || this.searchModels[key].end){
-                        is_active = true;
-                        break;
-                      }
-                    }else if(this.searchModels[key] && this.searchModels[key] !== ''){
-                        is_active = true;
-                        break;
-                    }
-                }
-                this.anySearchActive = is_active;
+                this.searchModels[field.key] = field.type == 'date' ? { start: false, end: false} : '' ;
                 this.searchChange();
             },
 
             searchChange(){
-                clearTimeout(this.searchTimeout);
-                this.searchTimeout = setTimeout(()=>{
-                    this.$emit('search', this.fieldsWithSearch);
-                },this.searchDebounce);
-
+                this.$emit('search', this.fieldsWithSearch);
             },
 
             /* activateSearch
              * When a user clicks a searchable column name, show it as active, and focus the child input field (unless it's already active)
             */
             activateSearch(field){
-                if(!field.filterable || field.readonly) return;
+                if(!field.filterable) return;
+                if(field.type === 'date'){
+                    this.datePickerOpen = true;
+                }
                 this.editingInput = field.key;
-                this.anySearchActive = true;
+                //this.$nextTick(() => this.$refs[this.editingInput + '-input'].focus())
             },
 
-
+            
 
         }
     }

package/src/sass/includes/_as_boosters.scss

@@ -25,6 +25,10 @@
         background-color: $booster-tickets-colour-med;
     }
 
+    &.feedback{
+        background-color: $booster-feedback-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     }
@@ -72,6 +76,13 @@
         background-color: rgba($booster-tickets-colour-light, 0.8);
     }
 
+    &.feedback{
+        background-color: rgba($booster-feedback-colour-dark, 0.2);
+        &:hover{
+            background-color: rgba($booster-feedback-colour-dark, 0.25);
+        }
+    }
+
     &.test{
         background-color: rgba($booster-test-colour-med, 0.8);
         &:hover{
@@ -79,10 +90,12 @@
         }
     }
 
-    .plus{
-    margin: auto;
-    padding-right: 0.5rem;
-    padding-left: 0.6rem;
+    .plus {
+        margin: 0 0.2rem;
+        padding-left: 0.6rem;
+    }
+    .toggle-booster-button-button-text {
+        padding-left: 0.5rem;
     }
 }
 
@@ -165,6 +178,10 @@ margin:1rem
         background-color: $booster-tickets-colour-med;
     }
 
+    &.feedback{
+        background-color: $booster-feedback-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     } 

package/src/sass/includes/_as_buttons.scss

@@ -427,3 +427,48 @@
         transition: all 0.2s ease-in-out;
     }
 }
+
+.toggle-button-booster-badge {
+    display: flex;
+    align-items: center;
+    padding: 0.4rem 1rem 0.4rem 1rem !important;
+}
+
+.shimmer {
+    color: grey;
+    display: inline-block;
+    mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/400% 100%;
+    background-repeat: no-repeat;
+    animation: shimmer 4s infinite;
+}
+
+.toggle-button-booster-image-badge {
+    z-index: 99;
+    width: 6rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    margin: 0 0 0 20px;
+    padding: 0px 8px 0px 8px;
+    width: 6rem;
+    height: 1.8rem;
+    .toggle-button-booster-image {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+// Shimmer animation for booster badge
+@keyframes shimmer {
+    0% {
+        mask-position: right;
+    }
+    30% {
+        mask-position: left;
+    }
+    100% {
+        mask-position: left;
+    }
+}