Move ColorConverter inputs to index.html

dli7319 · Feb 2, 2025 · 3818a39 · 3818a39
1 parent 468f78c
commit 3818a39
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -22,7 +22,12 @@
 <body>
   <color-picker>
     <color-selection></color-selection>
-    <color-converter></color-converter>
+    <color-converter>
+      <color-converter-input type="HEX"></color-converter-input>
+      <color-converter-input type="RGB255"></color-converter-input>
+      <color-converter-input type="RGB01"></color-converter-input>
+      <color-converter-input type="HSV"></color-converter-input>
+    </color-converter>
     <image-sampling></image-sampling>
     <color-interpolation></color-interpolation>
     <other-tools></other-tools>

diff --git a/src/ColorConverter.ts b/src/ColorConverter.ts
@@ -7,6 +7,7 @@ import { Coordinates } from "./Coordinates";
 import { styles } from "./styles/ColorConverter";
 import { ColorPickerSetColorEvent } from "./ColorPickerSetColorEvent";
 import {
+  ColorConverterInput,
   InputType,
   inputTypeToInputValueKey,
   InputValues,
@@ -53,6 +54,14 @@ export class ColorConverter extends LitElement {
     this.dispatchEvent(new ColorPickerSetColorEvent(color));
   }
 
+  get _slottedChildren() {
+    return (
+      this.shadowRoot
+        ?.querySelector("slot")
+        ?.assignedElements({ flatten: true }) ?? []
+    );
+  }
+
   render() {
     const floatCoordinates = {
       x: this.coordinates.x / this.coordinates.width,
@@ -66,6 +75,12 @@ 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;
+      }
+    });
     return html`
       ${bootstrap}
       <h5>Color Converter</h5>
@@ -83,28 +98,11 @@ export class ColorConverter extends LitElement {
           </tr>
         </tbody>
       </table>
-      <div class="d-flex flex-column inputs-container">
-        <color-converter-input
-          type=${InputType.HEX}
-          .inputValues=${this.inputValues}
-          .color=${this.color}
-        ></color-converter-input>
-        <color-converter-input
-          type=${InputType.RGB255}
-          .inputValues=${this.inputValues}
-          .color=${this.color}
-        ></color-converter-input>
-        <color-converter-input
-          type=${InputType.RGB01}
-          .inputValues=${this.inputValues}
-          .color=${this.color}
-        ></color-converter-input>
-        <color-converter-input
-          type=${InputType.HSV}
-          .inputValues=${this.inputValues}
-          .color=${this.color}
-        ></color-converter-input>
-      </div>
+      <slot
+        class="d-flex flex-column inputs-container"
+        @slotchange=${this.render}
+      >
+      </slot>
     `;
   }
 }