Added vallist to Dropdown to make Value and Text 2 different Lists if provided

www/ftui/components/dropdown/dropdown.component.js

@@ -36,6 +36,7 @@ export class FtuiDropdown extends FtuiElement {
   static get properties() {
     return {
       list: '',
+	  vallist: '',
       value: '',
       delimiter: '[;,:|]',
       width: '',
@@ -57,6 +58,9 @@ export class FtuiDropdown extends FtuiElement {
       case 'list':
         this.fillList();
         break;
+      case 'vallist':
+        this.fillList();
+        break;
       case 'value':
         this.selectElement.value = this.value;
         break;
@@ -70,13 +74,18 @@ export class FtuiDropdown extends FtuiElement {
   fillList() {
     const splitter = this.delimiter.length === 1 ? this.delimiter : new RegExp(this.delimiter);
     const list = String(this.list).split(splitter);
+    const vallist = String(this.vallist).split(splitter);
     this.selectElement.length = 0;
-    list.forEach((item) => {
+    for (let i = 0; i < list.length; i++) {
       const opt = document.createElement('option');
-      opt.value = item;
-      opt.textContent = item;
+	  if(list.length == vallist.length){
+	    opt.value = vallist[i];
+	  }else{
+		opt.value = list[i];
+	  }
+	  opt.textContent = list[i];		  
       this.selectElement.appendChild(opt);
-    });
+    };
     this.selectElement.value = this.value;
   }
 

www/ftui/components/toggle/toggle.component.css

@@ -0,0 +1,30 @@
+.checkbox {
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 2.25em;
+  color: var(--checkbox-off-color);
+}
+svg {
+  width: var(--checkbox-width, 4em);
+  height: var(--checkbox-height, 4em);
+}
+.bg {
+  fill: #ffffff;
+}
+.round {
+  fill: #ffffff;
+  stroke-width:2;
+  stroke: #000000;
+  transition-property: transform;
+  transition-duration: 0.4s;
+  transform:translate(0px,0px);
+}
+.checkbox.checked .bg {
+  fill: #00ff00;
+}
+.checkbox.checked .round {
+  transition-property: transform;
+  transition-duration: 0.4s;
+  transform:translate(232px,0px);
+}

www/ftui/components/toggle/toggle.component.js

@@ -0,0 +1,96 @@
+/*
+* Toggle component for FTUI version 3
+*
+* Copyright (c) 2020 Mario Stephan <mstephan@shared-files.de>
+* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
+*
+* https://github.com/knowthelist/ftui
+* Converted to Toggle Component by Andreas Fohl <andreas@fohl.net>
+* https://github.com/Sturi2011/ftui/tree/master/www/ftui/components/checkbox
+*/
+
+import { FtuiElement } from '../element.component.js';
+
+export class FtuiToggle extends FtuiElement {
+
+  constructor(properties) {
+
+    super(Object.assign(FtuiToggle.properties, properties));
+
+    this.elementCheckbox = this.shadowRoot.querySelector('.checkbox');
+    this.elementCheckbox.addEventListener('click', this.onClicked.bind(this));
+  }
+
+  template() {
+    return `
+    <style> @import "components/toggle/toggle.component.css"; </style>
+
+    <span class="checkbox">
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   xmlns="http://www.w3.org/2000/svg">
+    <g class="bg">
+	<path d="M 140 116 A 140 140 0 0 0 18.755859 186 A 140 140 0 0 0 18.755859 326 A 140 140 0 0 0 140 396 L 372 396 A 140 140 0 0 0 512 256 A 140 140 0 0 0 372 116 L 140 116 z " />
+    </g>
+	<g class="round">
+	<circle cx="140" cy="256" r="130" />
+	</g>
+</svg>
+    </span>`;
+  }
+
+  static get properties() {
+    return {
+      states: 'off,on',
+      texts: ',',
+      color: 'primary',
+      value: 'off',
+    };
+  }
+
+  static get observedAttributes() {
+    return [...this.convertToAttributes(FtuiToggle.properties), ...super.observedAttributes];
+  }
+
+  onAttributeChanged(name) {
+    switch (name) {
+      case 'value':
+        this.changeState();
+        break;
+    }
+  }
+
+  toggle() {
+    this.elementCheckbox.classList.toggle('checked');
+    const stateIndex = this.elementCheckbox.classList.contains('checked') ? 1 : 0;
+    const value = this.getStates()[stateIndex];
+    if (this.value !== value) {
+      this.submitChange('value', value);
+    }
+  }
+
+  changeState() {
+    const index = this.getStates().indexOf(this.value);
+    if (index > -1) {
+      if (index === 1) {
+        this.elementCheckbox.classList.add('checked');
+      } else {
+        this.elementCheckbox.classList.remove('checked');
+      }
+    }
+  }
+
+  onClicked(event) {
+    event.preventDefault();
+    this.toggle();
+    event.stopPropagation();
+  }
+
+  getStates() {
+    return this.states.split(/[;,:]/).map(item => item.trim());
+  }
+}
+
+window.customElements.define('ftui-toggle', FtuiToggle);