From 3818a39caf731f04cee4a1449faed04bee0adc7b Mon Sep 17 00:00:00 2001 From: David Li Date: Sun, 2 Feb 2025 06:55:39 +0000 Subject: [PATCH] Move ColorConverter inputs to index.html --- dist/index.html | 7 ++++++- src/ColorConverter.ts | 42 ++++++++++++++++++++---------------------- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/dist/index.html b/dist/index.html index 9d22c04..ba4f574 100644 --- a/dist/index.html +++ b/dist/index.html @@ -22,7 +22,12 @@ - + + + + + + diff --git a/src/ColorConverter.ts b/src/ColorConverter.ts index 8be4082..925bf96 100644 --- 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}
Color Converter
@@ -83,28 +98,11 @@ export class ColorConverter extends LitElement { -
- - - - -
+ + `; } }