Add update children methods

Author: dli7319

Diff for: src/ColorConverter.ts

@@ -62,6 +62,15 @@ export class ColorConverter extends LitElement {
     );
   }
 
+  updateChildren() {
+    this._slottedChildren.forEach((child) => {
+      if (child instanceof ColorConverterInput) {
+        child.inputValues = this.inputValues;
+        child.color = this.color;
+      }
+    });
+  }
+
   render() {
     const floatCoordinates = {
       x: this.coordinates.x / this.coordinates.width,
@@ -75,12 +84,7 @@ export class ColorConverter extends LitElement {
       Math.round(this.coordinates.x),
       Math.round(this.coordinates.y),
     ];
-    this._slottedChildren.forEach((child) => {
-      if (child instanceof ColorConverterInput) {
-        child.inputValues = this.inputValues;
-        child.color = this.color;
-      }
-    });
+    this.updateChildren();
     return html`
       ${bootstrap}
       <h5>Color Converter</h5>
@@ -100,7 +104,7 @@ export class ColorConverter extends LitElement {
       </table>
       <slot
         class="d-flex flex-column inputs-container"
-        @slotchange=${this.render}
+        @slotchange=${this.updateChildren}
       >
       </slot>
     `;

Diff for: src/ColorPicker.ts

@@ -102,8 +102,7 @@ export class ColorPicker extends LitElement {
     );
   }
 
-  render() {
-    this.style.background = "#" + this.color.getHex();
+  updateChildren() {
     this._slottedChildren.forEach((child) => {
       if (child instanceof ColorSelection) {
         child.color = this.color;
@@ -118,10 +117,15 @@ export class ColorPicker extends LitElement {
         child.activeColor = this.interpolationActive;
       }
     });
+  }
+
+  render() {
+    this.style.background = "#" + this.color.getHex();
+    this.updateChildren();
     return html` ${bootstrap}
       <slot
         class="d-flex flex-row flex-wrap main-container"
-        @slotchange=${this.render}
+        @slotchange=${this.updateChildren}
       >
       </slot>`;
   }