feat(editor): Add drag and drop data mapping (#3708)

* commit package lock

* refactor param options out

* use action toggle

* handle click on toggle

* update color toggle

* fix toggle

* show options

* update expression color

* update pointer

* fix readonly

* fix readonly

* fix expression spacing

* refactor input label

* show icon for headers

* center icon

* fix multi params

* add credential options

* increase spacing

* update expression view

* update transition

* update el padding

* rename side to options

* fix label overflow

* fix bug with unnessary lines

* add overlay

* fix bug affecting other pages

* clean up spacing

* rename

* update icon size

* fix toggle in users

* clean up func

* clean up css

* use css var

* fix overlay bug

* clean up input

* clean up input

* clean up unnessary css

* revert

* update quotes

* rename method

* remove console errors

* refactor data table

* add drag button

* make hoverable cells

* add drag hint

* disabel for output panel

* add drag

* disable for readonly

* Add dragging

* add draggable pill

* add mapping targets

* remove font color

* Transferable

* fix linting issue

* teleport component

* fix line

* disable for readonly

* fix position of data pill

* fix position of data pill

* ignore import

* add droppable state

* remove draggable key

* update bg color

* add value drop

* use direct input

* remove transition

* add animation

* shorten name

* handle empty value

* fix switch bug

* fix up animation

* add notification

* add hint

* add tooltip

* show draggable hintm

* fix multiple expre

* fix hoverable

* keep options on focus

* increase timeouts

* fix bug in set node

* add transition on hover out

* fix tooltip onboarding bug

* only update expression if changes

* add open delay

* fix header highlight issue

* update text

* dont show tooltip always

* update docs url

* update ee border

* add sticky behav

* hide error highlight if dropping

* switch out grip icon

* increase timeout

* add delay

* show hint on execprev

* add telemetry event

* add telemetry event

* add telemetry event

* fire event on hint showing

* fix telemetry event

* add path

* fix drag hint issue

* decrease bottom margin

* update mapping keys

* remove file

* hide overflow

* sort params

* add space

* prevent scrolling

* remove dropshadow

* force cursor

* address some comments

* add thead tbody

* add size opt

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -1,9 +1,10 @@
 <template>
 	<span :class="$style.container">
-		<el-dropdown :placement="placement" trigger="click" @command="onCommand">
-			<span :class="$style.button">
+		<el-dropdown :placement="placement" :size="size" trigger="click" @command="onCommand" @visible-change="onVisibleChange">
+			<span :class="{[$style.button]: true, [$style[theme]]: !!theme}">
 				<component :is="$options.components.N8nIcon"
 					icon="ellipsis-v"
+					:size="iconSize"
 				/>
 			</span>
 			<el-dropdown-menu slot="dropdown">
@@ -11,6 +12,7 @@
 					v-for="action in actions"
 					:key="action.value"
 					:command="action.value"
+					:disabled="action.disabled"
 				>
 					{{action.label}}
 				</el-dropdown-item>
@@ -42,12 +44,30 @@ export default {
 			type: String,
 			default: 'bottom',
 			validator: (value: string): boolean =>
-				['top', 'bottom'].includes(value),
+				['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'].includes(value),
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['mini', 'small', 'medium'].includes(value),
+		},
+		iconSize: {
+			type: String,
+		},
+		theme: {
+			type: String,
+			default: 'default',
+			validator: (value: string): boolean =>
+				['default', 'dark'].includes(value),
 		},
 	},
 	methods: {
 		onCommand(value: string) {
-			this.$emit('action', value)	;
+			this.$emit('action', value);
+		},
+		onVisibleChange(value: boolean) {
+			this.$emit('visible-change', value);
 		},
 	},
 };
@@ -62,6 +82,18 @@ export default {
 	cursor: pointer;
 	padding: var(--spacing-4xs);
 	border-radius: var(--border-radius-base);
+
+	&:hover {
+		color: var(--color-primary);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(--color-primary);
+	}
+}
+
+.dark {
 	color: var(--color-text-dark);
 
 	&:focus {