onclick(text)} />
+ on:click={() => dispatch('click', text)} />
{/each}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
index 1a1196dd14..a9d4d7d8fb 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
@@ -120,7 +120,7 @@
}
function changeFormatAndConvert(f) {
- format = f
+ format = f.detail
value = convertHsvaToFormat([h, s, v, a], format)
}
@@ -251,7 +251,7 @@
{/if}
-
+
handleColorInput(event.target.value)}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
index 474b287934..be1a2d718f 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
@@ -28,6 +28,8 @@
let errorMsg = null
const dispatch = createEventDispatcher()
+ const dispatchValue = value =>
+ debounce(() => dispatch("change", value), 300, true)
beforeUpdate(() => {
format = getColorFormat(value)
@@ -47,7 +49,7 @@
function onColorChange(color) {
value = color.detail
- dispatch("change", color.detail)
+ dispatchValue(value)
}
function calculateDimensions() {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
index 64fac9d9c9..ce2e5849f1 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
@@ -1,5 +1,6 @@