toggle-components-library 1.38.1 → 1.38.2-beta.1

package/package.json

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

package/src/components/forms/ToggleInputMultiSelect.vue

@@ -7,6 +7,7 @@
 
     <div class="input-holder">
       <multiselect v-model="inputVal" :options="options" :multiple="multiple" :close-on-select="true" :clear-on-select="false" :preserve-search="true" :placeholder="placeholder" label="label" track-by="value" :preselect-first="false">
+        <template v-slot:afterList><slot name="afterList"></slot></template>
       </multiselect>
     </div>
 

package/src/components/forms/ToggleInputSelect.vue

@@ -1,14 +1,14 @@
 <template>
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
+<div :class="{'toggle-input-container' : size != 'streamline', 'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
     <label 
-        v-if="label"
+        v-if="label && size != 'streamline'"
         :for="name ? name : 'ToggleInputSelect' " 
         class="toggle-input-label"
     > {{ label }} 
     </label>
 
-    <div class="toggle-input-select-container">
+    <div :class="['toggle-input-select-container', size]">
         <select 
             :name="name ? name : 'ToggleInputSelect' " 
             :class="[ 'toggle-input-select', size]"
@@ -18,7 +18,7 @@
             :disabled="disabled"
             :style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
             >
-                <option value="">Select an option</option>
+                <option value="">{{size == 'streamline' ? label : 'Select an option' }}</option>
                 <option :value="option.value" v-for="(option, key) in options" v-bind:key="key">{{option.label}}</option>
         </select>
     </div>
@@ -60,7 +60,7 @@ export default {
         size: {
             type: String,
             validator: function (value) {
-                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
+                return ['extra-small', 'small', 'medium', 'large', 'full', 'streamline'].indexOf(value) !== -1
             }
         },
         required: {

package/src/sass/includes/_as_inputs.scss

@@ -9,7 +9,6 @@
 .toggle-input-select,
 .toggle-contact-search-container{
     @include toggle-global-font-config;
-    max-width: 425px
 }
 
 .toggle-input-counter{
@@ -260,6 +259,18 @@
        top: 0.7rem;
        pointer-events: none;
     }
+    &.streamline {
+        &:after{
+            content: '';
+            width: 1.2rem !important;
+            height: 1.2rem !important;
+            background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
+            position: absolute;
+            right: 1rem;
+            top: 0.7rem;
+            pointer-events: none;
+         }
+    }
 }
 
 
@@ -275,6 +286,10 @@
     &:focus {
         outline: none;
     }
+    &.streamline {
+        font-size: 1rem;
+        padding: 0.3rem 2rem 0.3rem 1rem;
+    }
 }
 
 // For multi tier side nav
@@ -971,6 +986,10 @@ $iconWidth:20px;
 // Contact Search Styles
 //
 
+.toggle-contact-search-container {
+    max-width: 425px;
+}
+
 .toggle-contact-search-input-container {
     width: 100%;
     height: 40px;