toggle-components-library 1.30.0 → 1.32.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/forms/ToggleInputCrudField.vue

@@ -13,7 +13,7 @@
     > {{ label }} 
     </button>
      <label 
-        class="toggle-input-crud-container-description"
+        :class="['toggle-input-crud-container-description', {'hide-overflow':hideDescriptionOverflow}]"
     > {{ description ? description : '&nbsp;' }} 
     </label>
 
@@ -65,7 +65,12 @@ export default {
         empty:{
             type: Boolean,
             default: false
+        },
+        hideDescriptionOverflow:{
+            type: Boolean,
+            default: false
         }
+
     },
 
     created : function(){

package/src/components/forms/ToggleInputRadioButtons.vue

@@ -12,7 +12,7 @@
 
     <ToggleInputCheckbox  v-model="checkboxModel" :label="label" label_style="" v-if="inGroup" /> 
 
-    <div class="toggle-input-radio-container" v-if="!inGroup || (inGroup && checkboxModel)">
+    <div :class="['toggle-input-radio-container',  {wrap: wrapInputs}]" v-if="!inGroup || (inGroup && checkboxModel)">
         <label class="toggle-input-radio"  v-for="(option, key) in options" v-bind:key="key">
             <input type="radio" :value="option.value" :name="name ? name : 'ToggleInputRadio' "  v-model="inputVal" :disabled="disabled" />
             <div>
@@ -70,7 +70,11 @@ export default {
         disabled: {
             type: Boolean,
             default: false
-        }       
+        },
+        wrapInputs: {
+          type: Boolean,
+          default: true,
+        }
     },
 
     mounted : function(){

package/src/sass/includes/_as_inputs.scss

@@ -290,11 +290,13 @@
 .toggle-input-radio-container{
 
     display  : flex;
-    flex-wrap: wrap;
     padding-bottom:0.4rem;
     width:100%;
     clear: both;
     float: left;
+    &.wrap {
+        flex-wrap: wrap;
+    }
     .toggle-input-radio,.toggle-input-checkbox, .toggle-input-checkbox-inline{
         background-color: $toggle-dark-grey;
     }
@@ -720,6 +722,7 @@ $iconWidth:20px;
     }
 }
 
+
 .toggle-input-crud-container-buttons{
     .toggle-button-container{
         display: block;
@@ -751,6 +754,12 @@ $iconWidth:20px;
     clear: both;
     font-size: $toggle-font-size-small;
     color: $toggle-header-colour;
+    &.hide-overflow{
+        overflow-x: clip;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: inherit;
+    }
 }
 .toggle-input-protocol {
     width: 100px;