set value for bz-select & bz-toggler

buildoz.js

@@ -39,10 +39,13 @@ class Buildoz extends HTMLElement {
 }
 
 class BZselect extends Buildoz {
+    #value
+
     constructor(){
         super()
         this.value = null
         this.open = false
+        this.value = null
         this.defaultAttrs = {
             label: 'Select...',
         }
@@ -69,6 +72,22 @@ class BZselect extends Buildoz {
     //     super.attributeChangedCallback(name, oldValue, newValue)
     // }
 
+    get value(){ return(this.#value) }
+    
+    set value(v) {
+        this.#value = v
+        if(this.options && this.options.length>0) {
+            const opt = Array.from(this.options).find(opt => opt.value==v)
+            if(v || (opt && opt.textContent)) this.button.textContent = opt.textContent
+            else this.button.textContent =  this.getBZAttribute('label')
+            this.dispatchEvent(new Event('change', {
+                bubbles: true,
+                composed: false,
+                cancelable: false
+            })) 
+        }
+    }
+
     toggle(){
         for(const opt of this.options){
             if(this.open) opt.classList.remove('open')
@@ -85,15 +104,7 @@ class BZselect extends Buildoz {
     onOption(value, silent=false){ 
         if(this.getAttribute('disabled') !== null) return
         this.value = value
-        if(!silent) this.toggle()
+        if(!silent) this.toggle()     
-        const opt = Array.from(this.options).find(opt => opt.value==value)
-        if(value || (opt && opt.textContent)) this.button.textContent = opt.textContent
-        else this.button.textContent =  this.getBZAttribute('label')
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: false,
-            cancelable: false
-        }))        
     }
 
     addOption(value, markup){
@@ -105,8 +116,9 @@ class BZselect extends Buildoz {
         this.options = this.querySelectorAll('option')
     }
 
-    fillOptions(opts, erase = true){
+    fillOptions(opts, erase = true){ 
         if(erase){
+            //this.options = this.querySelectorAll('option')
             this.options.forEach(node => { node.remove() })
             this.options = this.querySelectorAll('option')
             this.onOption('', true) // unselect last
@@ -118,9 +130,10 @@ Buildoz.define('select', BZselect)
 
 
 class BZtoggler extends Buildoz {
+    #value
+
     constructor(){
         super()
-        this.value = null
         this.open = false
         this.defaultAttrs = {
             labelLeft:'',
@@ -170,7 +183,7 @@ class BZtoggler extends Buildoz {
         if(this.getBZAttribute('classOff')) this.switch.classList.remove(this.getBZAttribute('classOff'))
         if(this.getBZAttribute('classOn')) this.switch.classList.add(this.getBZAttribute('classOn'))
         this.thumb.classList.add('turned-on')
-        this.value = this.getBZAttribute('trueValue')
+        this.#value = this.getBZAttribute('trueValue')
         this.focus()
     }
 
@@ -178,14 +191,14 @@ class BZtoggler extends Buildoz {
         if(this.getBZAttribute('classOn')) this.switch.classList.remove(this.getBZAttribute('classOn'))
         if(this.getBZAttribute('classOff'))this.switch.classList.add(this.getBZAttribute('classOff'))
         this.thumb.classList.remove('turned-on')
-        this.value = this.getBZAttribute('falseValue')
+        this.#value = this.getBZAttribute('falseValue')
         this.focus()
     }
 
     toggle(event) {
         if(event) { event.preventDefault(); event.stopPropagation(); }
         if(this.getBZAttribute('disabled')) return
-        if(this.value == this.getBZAttribute('trueValue')) this.turnOff()
+        if(this.#value == this.getBZAttribute('trueValue')) this.turnOff()
         else this.turnOn()
         this.dispatchEvent(new Event('change', {
             bubbles: true,
@@ -193,5 +206,20 @@ class BZtoggler extends Buildoz {
             cancelable: false
         })) 
     }
+
+    get value(){ return(this.#value) }
+    
+    set value(v) {
+        this.#value = v
+        if(this.defaultAttrs){
+            if(this.#value == this.getBZAttribute('trueValue')) this.turnOn()
+            else this.turnOff()
+            this.dispatchEvent(new Event('change', {
+                bubbles: true,
+                composed: false,
+                cancelable: false
+            }))         
+        } 
+    }    
 }
 Buildoz.define('toggler', BZtoggler)