@iamproperty/components 2.0.1 → 2.1.0

package/src/components/Chart/Chart.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="container" ref="wrapper">
+    <slot></slot>
+    <figure class="chart__wrapper">
+      <figcaption v-html="caption"></figcaption>
+    <div :class="`chart__key chart__key--${type} h5`" role="presentation">
+      <div :key="index" v-for="(item,index) in fields" class="key">{{item.key}}</div>
+    </div>
+
+    <div :class="`chart chart--${type}`" ref="chart">
+      
+      <div class="chart__yaxis" role="presentation">
+        <div :key="index" v-for="(point,index) in yaxis" :style="`--value: ${point.value};--percent:${((point.value-min)/(max-min))*100}%;`" class="axis__point">
+          <span>{{point.display}}</span>
+        </div>
+      </div>
+      <Table v-bind="$props">
+
+        <div class="chart__guidelines" role="presentation">
+          <div :key="index" v-for="(point,index) in yaxis" :data-value="point.value" :style="`--percent:${((point.value-min)/(max-min))*100}%;`" class="guideline">
+          </div>
+        </div>
+        <span v-html="drawLines()" class="lines" v-if="type == 'line'"></span>
+      </Table>
+      <div v-html="drawPie()" class="pies" v-if="type == 'pie'"></div>
+    </div>
+    </figure>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/charts.scss";
+</style>
+
+<script>
+import { ucfirst, unsnake } from '../../helpers/strings'
+import Table from '@/elements/Table/Table.vue'
+
+export default {
+  name: 'Tabs',  
+  components: {
+    Table
+  },
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'bar'
+    },
+    caption: {
+      type: String,
+      required: false
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    yaxis: {
+      type: Array,
+      required: false
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    drawLines (){
+      return () => {
+        
+        let lines = Array();
+        let spacer = 200/(Object.keys(this.items).length - 1);
+        const max = this.max - this.min;
+        
+        // Creates the lines array from the fields array
+        this.fields.forEach((field, index) => {
+        
+          if(index != 0){
+
+            lines[index-1] = '';
+          }
+        });
+        
+        // populate the lines array from the items array
+        this.items.forEach((item, index) => {
+        
+          Object.keys(item).forEach((key, subindex) => {
+          
+            if(subindex != 0){
+            
+              let value = item[key]
+
+              value = value.replace('£','');
+              value = value.replace('%','');
+              value = Number.parseFloat(value) - this.min;
+
+              const percent = (value/max) * 100;
+              let command = index == 0 ? 'M' : 'L';
+              
+              lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+            }
+          });
+        });
+
+        // Create the line strings
+        let returnString = '';
+
+        lines.forEach((line, index) => {
+        
+          returnString += `
+<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
+  <path fill="none" d="${line}"></path>
+</svg>`
+        });
+
+        return returnString;
+      }
+    },
+    drawPie (){
+      return () => {
+
+        let returnString = '';
+
+
+        this.items.forEach((item, index) => {
+          
+          let paths = '';
+          let tooltips = '';
+
+          let cumulativePercent = 0;
+
+          function getCoordinatesForPercent(percent) {
+            const x = Math.cos(2 * Math.PI * percent);
+            const y = Math.sin(2 * Math.PI * percent);
+            return [x*100, y*100];
+          }
+
+          let total = 0;
+
+          let titleKey = Object.keys(item)[0]
+          let title = item[titleKey]
+
+          Object.keys(item).forEach((key, subindex) => {
+
+            if(subindex != 0){
+              let value = item[key]
+
+              value = value.replace('£','');
+              value = value.replace('%','');
+              value = Number.parseInt(value);
+
+              total += value;
+            }
+          });
+
+          Object.keys(item).forEach((key, subindex) => {
+          
+            
+            if(subindex != 0){
+            
+              let value = item[key]
+
+              value = value.replace('£','');
+              value = value.replace('%','');
+              value = Number.parseInt(value);
+
+              let percent = value/total;
+            
+              //lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+              const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
+                
+                // each slice starts where the last slice ended, so keep a cumulative percent
+                cumulativePercent += percent;
+                
+                const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
+
+                // if the slice is more than 50%, take the large arc (the long way around)
+                const largeArcFlag = percent > .5 ? 1 : 0;
+
+                // create an array and join it just for code readability
+                const pathData = [
+                  `M ${startX} ${startY}`, // Move
+                  `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+                  `L 0 0`, // Line
+                ].join(' ');
+
+              paths += `<path d="${pathData}"></path>`;
+              tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${ucfirst(unsnake(title))}<br/> ${ucfirst(unsnake(key))}<br/> ${item[key]}</span></div></foreignObject>`;
+            }
+          });
+
+          returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`
+
+        });
+
+
+        return returnString;
+
+      }
+    }
+  },
+  mounted(){
+    this.$nextTick(function () {
+
+      // If the data gets updated we may need to recreate the tbody as it get detached when sorted in the table.js
+      let chart = this.$refs.chart;
+      const max = this.max - this.min;
+
+      Array.from(chart.querySelectorAll('tbody tr')).forEach((tr, index) => {
+
+        let group = tr.querySelector('td:first-child').innerHTML;
+
+        Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
+          
+          const value = Number.parseFloat(td.getAttribute('data-numeric'));
+          let percent = ((value - this.min)/(max)) * 100;
+          const content = td.innerHTML;
+          const label = td.getAttribute('data-label');
+          let bottom = 0;
+
+          // If the value is negative the position below the 0 line
+          if(this.min < 0){
+            bottom = Math.abs((this.min)/(max)*100);
+            if(value < 0){
+              bottom = bottom - percent;
+            }
+          }
+          td.setAttribute("style",`--bottom:${bottom}%;--percent:${percent}%;`);
+
+          td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
+        });
+      });
+    })
+  }
+}
+</script>

package/src/components/Chart/README.md

@@ -0,0 +1,18 @@
+### Usage
+
+```
+<Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
+```
+
+###  Properties
+
+**The charts props inherit the table props** - As charts are an extension of the tables.
+
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| type  | String | bar | Changes the type of chart shown (bar, line or pie) or by passing none a table is shown. |
+| caption  | String | - | Optional but recommended for accessibility concerns. Describes and summarizes the chart and the data inside it. |
+| max  | Number | - | Required numeric value to be used to work out the size/position of the chart elements. |
+| min  | Number | 0 | Optional (deaults to 0) numeric value to be used to work out the size/position of the chart elements. |
+| yaxis  | Array | - | Array of labels to be shown along the y-axis |

package/src/components/Modal/Modal.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="modal" :id="id">
-    <a :href="`#${returnID?returnID:''}`"><span class="visually-hidden">Close</span></a>
+  <div class="modal" :id="id" role="dialog" modal="true" ref="modal">
+    <a :href="`#${returnid?returnid:''}`" tabindex="-1"><span class="visually-hidden">Close</span></a>
     <div class="modal__outer">
-      <a :href="`#${returnID?returnID:''}`" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>
+      <a :href="`#${returnid?returnid:''}`" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>
       <div class="modal__inner">
         <slot></slot>
       </div>
     </div>
+    <button class="modal__dock--left btn btn-prev" tabindex="-1">Left</button>
+    <button class="modal__dock--right btn btn-next" tabindex="-1">Right</button>
   </div>
 </template>
 
@@ -16,6 +18,8 @@
 </style>
 
 <script>
+import modal from '../../../assets/js/modules/modal.js'
+
 export default {
   name: 'Modal',
   props: {
@@ -23,11 +27,18 @@ export default {
       type: String,
       required: true
     },
-    returnID: {
+    returnid: {
       type: String,
       default: 'close',
       required: false
     }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      modal(this.$refs.modal);
+    })
   }
 }
 </script>

package/src/components/Modal/README.md

@@ -11,6 +11,7 @@
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | id | String | - | Required |
+| returnid | String | close | Override the default id so that it will anchor to a specific location on the page. |
 
 ### Slots
 

package/src/components/Nav/README.md

@@ -9,9 +9,9 @@
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | logo | String | property | Update which logo is shown |
-| logoText | String | - | Optional logo text |
-| btnLink | String | - | Optional button can be added, used mainly for links relating to user accounts. |
-| btnText | String | - | Text used within the above button |
+| logotext | String | - | Optional logo text |
+| btnlink | String | - | Optional button can be added, used mainly for links relating to user accounts. |
+| btntext | String | - | Text used within the above button |
 
 
 ### Slots

package/src/components/PropertySearchbar/PropertySearchbar.vue

@@ -2,7 +2,7 @@
   <div class="container" ref="wrapper">
     <slot></slot>
     <div class="property-searchbar">
-      <form class="row" :action="formAction" :method="formMethod">
+      <form class="row" :action="formaction" :method="formmethod">
         <fieldset class="col-12 col-md-3">
           <Input inputClass="input--locations" v-model="locationSet" label="Location" id="location" :options="locationsList()" required placeholder="i.e. Newcastle or NE1"  @keyupEvent="locationKeyup(...arguments)" ref="search"></Input>
           <Input class="select--miles" label="Miles" id="miles" type="select" :options="distances"></Input>
@@ -10,19 +10,19 @@
         <fieldset class="col-12 col-md">
           <span class="form-label d-none d-md-block">Price range</span>
           <div class="row" data-input-range>
-            <Input class="col-6" label="Minimum price" id="price-min" data-min="true" type="select" :options="priceMin"></Input>
-            <Input class="col-6" label="Maximum price" id="price-max" data-max="true" type="select" :options="priceMax"></Input>
+            <Input class="col-6" label="Minimum price" id="price-min" data-min="true" type="select" :options="pricemin"></Input>
+            <Input class="col-6" label="Maximum price" id="price-max" data-max="true" type="select" :options="pricemax"></Input>
           </div>
         </fieldset>
         <fieldset class="col-12 col-md">
           <span class="form-label d-none d-md-block">Number of beds</span>
           <div class="row" data-input-range>
-            <Input class="col-6" label="Minimum beds" id="beds-min" data-min="true" type="select" :options="bedsMin"></Input>
-            <Input class="col-6" label="Maximum beds" id="beds-max" data-max="true" type="select" :options="bedsMax"></Input>
+            <Input class="col-6" label="Minimum beds" id="beds-min" data-min="true" type="select" :options="bedsmin"></Input>
+            <Input class="col-6" label="Maximum beds" id="beds-max" data-max="true" type="select" :options="bedsmax"></Input>
           </div>
         </fieldset>
         <fieldset class="col-12 col-md-2">
-          <Input label="Property type" id="property-type" type="select" :options="propertyTypes"></Input>
+          <Input label="Property type" id="property-type" type="select" :options="propertytypes"></Input>
         </fieldset>
         <div class="col-12 col-md mw-md-fit-content d-flex property-searchbar__btn">
           <button class="btn w-100 me-0" type="submit" value="submit">Search</button>
@@ -48,11 +48,11 @@ export default {
   },
   name: 'PropertySearchbar',
   props: {
-    formAction: {
+    formaction: {
       type: String,
       required: false
     },
-    formMethod: {
+    formmethod: {
       type: String,
       required: false
     },
@@ -79,7 +79,7 @@ export default {
         ];
       } 
     },
-    priceMin: {
+    pricemin: {
       type: Array,
       required: false,
       default() {
@@ -94,7 +94,7 @@ export default {
         ];
       }
     },
-    priceMax: {
+    pricemax: {
       type: Array,
       required: false,
       default() {
@@ -109,7 +109,7 @@ export default {
         ];
       }
     },
-    bedsMin: {
+    bedsmin: {
       type: Array,
       required: false,
       default() {
@@ -125,7 +125,7 @@ export default {
         ];
       }
     },
-    bedsMax: {
+    bedsmax: {
       type: Array,
       required: false,
       default() {
@@ -141,7 +141,7 @@ export default {
         ];
       }
     },
-    propertyTypes: {
+    propertytypes: {
       type: Array,
       required: false,
       default() {

package/src/components/Snapshot/README.md

@@ -0,0 +1,21 @@
+### Usage
+
+```
+<Snapshot :items="items"></Snapshot>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| items  | Array | - | Table row data passed |
+|  - item.title | String | - | Title of the snapshot figure |
+|  - item.bg | String | - | Theme colour to highlight the importance of the figure i.e. danger to indicate a high priority. |
+|  - item.number | String | - | The actual figure, recommended to be a single number but could be more i.e. 10 days.
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display before the snapshot items |

package/src/components/Snapshot/Snapshot.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="container snapshot" ref="wrapper">
+    <slot></slot>
+    <div class="row">
+    <div class="col" v-for="(value,index) in items" :key="index">
+
+      <a :href="value.link" v-if="value.link">View {{value.title}}</a>
+      <div :class="`snapshot__item ${value.bg ? 'bg-'+value.bg : ''}`">
+        <span class="h6 snapshot__title">{{value.title}}</span>
+        <span class="stat">{{value.number}}</span>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/snapshot.scss";
+</style>
+
+<script>
+
+export default {
+  name: 'Snapshot',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+  }
+}
+</script>

package/src/components/Timeline/README.md

@@ -0,0 +1,18 @@
+<p class="note">The Timeline component represents an individual item within the timeline and not the full timeline itself. These Vue components need to be inside of a div with the class of 'timeline__container'.</p>
+
+### Usage
+
+```
+<div class="timeline__container container">
+  <Timeline :image="require('../../assets/shutterstock_1229155495.webp')">
+    <h2>01 Search</h2>
+    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+  </Timeline>
+</div>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| image | String | - | Optional image url to display in the background |

package/src/components/Timeline/Timeline.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="timeline">
+    <div class="timeline__content">
+      <slot></slot>
+    </div>
+    <img v-if="image" :src="image" alt="" />
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/timeline.scss";
+</style>
+
+<script>
+export default {
+  name: 'Timeline',
+  props: {
+    image: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

package/src/elements/Input/Input.vue

@@ -1,27 +1,27 @@
 <template>
   <div :class="wrapperClass()" ref="wrapper">
-    <label v-if="needsLabel()" :class="`form-label${labelClass?` ${labelClass}`:''}`" :for="id" v-html="displayLabel()"></label>
+    <label v-if="needsLabel()" :class="`form-label${labelclass?` ${labelclass}`:''}`" :for="id" v-html="displayLabel()"></label>
     
     <!-- Standard input field -->
-    <input v-if="isInput()" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputClass?` ${inputClass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" v-on:keyup="inputKeyup" />
+    <input v-if="isInput()" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" v-on:keyup="inputKeyup" />
     
     <!-- Textarea -->
-    <textarea v-if="type=='textarea'" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputClass?` ${inputClass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" v-bind="$attrs"></textarea>
+    <textarea v-if="type=='textarea'" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" v-bind="$attrs"></textarea>
     
     <!-- Range -->
     <div class="input-group" v-if="type=='range'">
-      <input v-model="inputVal" :class="`form-range${inputClass?` ${inputClass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
+      <input v-model="inputVal" :class="`form-range${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
       <output class="input-group-text border-0 col-2 col-sm-1 px-0">{{value}}</output>
     </div>
     
     <!-- Color picker -->
     <div class="input-group" v-if="type=='color'">
-      <input v-model="inputVal" :class="`form-control form-control-color${inputClass?` ${inputClass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
+      <input v-model="inputVal" :class="`form-control form-control-color${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
       <output class="input-group-text flex-fill">{{value?vale:'#000000'}}</output>
     </div>
     
     <!-- Select/dropdown -->
-    <select v-if="type=='select'" v-model="inputVal" :class="`form-select${size?` form-select-${size}`:``}${inputClass?` ${inputClass}`:``}`" :type="type" :name="id" :id="id" :pattern="needPattern()" v-bind="$attrs">
+    <select v-if="type=='select'" v-model="inputVal" :class="`form-select${size?` form-select-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="id" :id="id" :pattern="needPattern()" v-bind="$attrs">
       <option v-for="(value,index) in options" :key="index" :value="value.value">{{value.display ? value.display : value.value}}</option>
     </select>
     
@@ -31,14 +31,14 @@
 
     <!-- Checkbox -->
     <input v-if="type=='checkbox'||type=='radio'" class="form-check-input" :type="type" :name="name?name:id" :id="id" v-bind="$attrs" />
-    <label v-if="type=='checkbox'||type=='radio'" :class="`form-label form-check-label${labelClass?` ${labelClass}`:''}`" :for="id" v-html="label"></label>
+    <label v-if="type=='checkbox'||type=='radio'" :class="`form-label form-check-label${labelclass?` ${labelclass}`:''}`" :for="id" v-html="label"></label>
 
     <!-- Checkbox Button -->
-    <input v-if="type=='checkbox-btn'||type=='radio-btn'" :class="`btn-check${inputClass?` ${inputClass}`:``}`" :type="type.replace('-btn','')" autocomplete="off" :name="name?name:id" :id="id" v-bind="$attrs" />
-    <label v-if="type=='checkbox-btn'||type=='radio-btn'" :class="`btn${labelClass?` ${labelClass}`:''}`" :for="id" v-html="label" @click="clickEvent"></label>
+    <input v-if="type=='checkbox-btn'||type=='radio-btn'" :class="`btn-check${inputclass?` ${inputclass}`:``}`" :type="type.replace('-btn','')" autocomplete="off" :name="name?name:id" :id="id" v-bind="$attrs" />
+    <label v-if="type=='checkbox-btn'||type=='radio-btn'" :class="`btn${labelclass?` ${labelclass}`:''}`" :for="id" v-html="label" @click="clickEvent"></label>
 
     <!-- Error message -->
-    <p v-if="errorMsg" class="invalid-feedback mb-0" v-html="errorMsg"></p>
+    <p v-if="errormsg" class="invalid-feedback mb-0" v-html="errormsg"></p>
     <slot></slot>
   </div>
 </template>
@@ -66,13 +66,13 @@ export default {
     },
     label: {
       type: String,
-      required: true
+      required: false
     },
-    labelClass: {
+    labelclass: {
       type: String,
       required: false
     },
-    inputClass: {
+    inputclass: {
       type: String,
       required: false
     },
@@ -85,7 +85,7 @@ export default {
       type: String,
       required: false
     },
-    errorMsg: {
+    errormsg: {
       type: String,
       required: false
     },
@@ -215,7 +215,7 @@ export default {
       
       let element = this.$refs.wrapper;
       // Remove unnecessary divs that may get in the way of our CSS sibling selectors working
-      if(element.parentNode.classList.contains('form-check') || element.classList.length == 0){
+      if(element.parentNode && element.parentNode.classList.contains('form-check') || element.classList.length == 0){
 
         const fragment = document.createDocumentFragment();
       	Array.from(element.childNodes).forEach(child => fragment.appendChild(child));

package/src/elements/Input/README.md

@@ -9,10 +9,10 @@
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | id  | String | - | Required |
-| label | String | - | Required |
-| labelClass | String | - | Optional way of adding classes to the label, useful for assigning column class to label when usiong inline input fields. |
-| inputClass | String | - | Optional way of adding classes to the input field, useful for assigning column class to label when usiong inline input fields. |
+| label | String | - | Not required but recommended |
+| labelclass | String | - | Optional way of adding classes to the label, useful for assigning column class to label when usiong inline input fields. |
+| inputclass | String | - | Optional way of adding classes to the input field, useful for assigning column class to label when usiong inline input fields. |
 | type | String | text | Assign different types to the input fields like number, email and date. |
 | size | String | - | Choose from either 'sm' and 'lg' |
-| errorMsg | String | - | Error message thats shown when the field fails form validation. |
+| errormsg | String | - | Error message thats shown when the field fails form validation. |
 | options | Array | - | Used for the select type input field to populate the dropdown. Can also be used to create a datalist when used in conjuction of any other input type than select. |