n8n/packages/editor-ui/src/components/ParameterInput.vue

<template>
	<div @keydown.stop :class="parameterInputClasses">
		<expression-edit
			:dialogVisible="expressionEditDialogVisible"
			:value="isResourceLocatorParameter && typeof value !== 'string' ? (value ? value.value : '') : value"
			:parameter="parameter"
			:path="path"
			:eventSource="eventSource || 'ndv'"
			@closeDialog="closeExpressionEditDialog"
			@valueChanged="expressionUpdated"
		></expression-edit>
		<div
			class="parameter-input ignore-key-press"
			:style="parameterInputWrapperStyle"
			@click="openExpressionEdit"
		>
			<resource-locator
				v-if="isResourceLocatorParameter"
				ref="resourceLocator"
				:parameter="parameter"
				:value="value"
				:displayTitle="displayTitle"
				:expressionDisplayValue="expressionDisplayValue"
				:isValueExpression="isValueExpression"
				:isReadOnly="isReadOnly"
				:parameterIssues="getIssues"
				:droppable="droppable"
				:node="node"
				:path="path"
				@input="valueChanged"
				@focus="setFocus"
				@blur="onBlur"
				@drop="onResourceLocatorDrop"
			/>
			<n8n-input
				v-else-if="isValueExpression || droppable || forceShowExpression"
				:size="inputSize"
				:type="getStringInputType"
				:rows="getArgument('rows')"
				:value="activeDrop || forceShowExpression? '': expressionDisplayValue"
				:title="displayTitle"
				@keydown.stop
			/>
			<div
				v-else-if="
					['json', 'string'].includes(parameter.type) ||
					remoteParameterOptionsLoadingIssues !== null
				"
			>
				<code-edit
					v-if="codeEditDialogVisible"
					:value="value"
					:parameter="parameter"
					:type="editorType"
					:codeAutocomplete="codeAutocomplete"
					:path="path"
					:readonly="isReadOnly"
					@closeDialog="closeCodeEditDialog"
					@valueChanged="expressionUpdated"
				></code-edit>
				<text-edit
					:dialogVisible="textEditDialogVisible"
					:value="value"
					:parameter="parameter"
					:path="path"
					@closeDialog="closeTextEditDialog"
					@valueChanged="expressionUpdated"
				></text-edit>

				<div v-if="isEditor === true" class="code-edit clickable ph-no-capture" @click="displayEditDialog()">
					<prism-editor
						v-if="!codeEditDialogVisible"
						:lineNumbers="true"
						:readonly="true"
						:code="displayValue"
						language="js"
					></prism-editor>
				</div>

				<n8n-input
					v-else
					v-model="tempValue"
					ref="inputField"
					:size="inputSize"
					:type="getStringInputType"
					:rows="getArgument('rows')"
					:value="displayValue"
					:disabled="isReadOnly"
					@input="onTextInputChange"
					@change="valueChanged"
					@keydown.stop
					@focus="setFocus"
					@blur="onBlur"
					:title="displayTitle"
					:placeholder="getPlaceholder()"
				>
					<div slot="suffix" class="expand-input-icon-container">
						<font-awesome-icon
							v-if="!isReadOnly"
							icon="expand-alt"
							class="edit-window-button clickable"
							:title="$locale.baseText('parameterInput.openEditWindow')"
							@click="displayEditDialog()"
						/>
					</div>
				</n8n-input>
			</div>

			<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
				<el-color-picker
					size="small"
					class="color-picker"
					:value="displayValue"
					:disabled="isReadOnly"
					@focus="setFocus"
					@blur="onBlur"
					@change="valueChanged"
					:title="displayTitle"
					:show-alpha="getArgument('showAlpha')"
				/>
				<n8n-input
					v-model="tempValue"
					:size="inputSize"
					type="text"
					:value="tempValue"
					:disabled="isReadOnly"
					@change="valueChanged"
					@keydown.stop
					@focus="setFocus"
					@blur="onBlur"
					:title="displayTitle"
				/>
			</div>

			<el-date-picker
				v-else-if="parameter.type === 'dateTime'"
				v-model="tempValue"
				ref="inputField"
				type="datetime"
				:size="inputSize"
				:value="displayValue"
				:title="displayTitle"
				:disabled="isReadOnly"
				:placeholder="
					parameter.placeholder
						? getPlaceholder()
						: $locale.baseText('parameterInput.selectDateAndTime')
				"
				:picker-options="dateTimePickerOptions"
				@change="valueChanged"
				@focus="setFocus"
				@blur="onBlur"
				@keydown.stop
			/>

			<n8n-input-number
				v-else-if="parameter.type === 'number'"
				ref="inputField"
				:size="inputSize"
				:value="displayValue"
				:controls="false"
				:max="getArgument('maxValue')"
				:min="getArgument('minValue')"
				:precision="getArgument('numberPrecision')"
				:disabled="isReadOnly"
				@change="valueChanged"
				@input="onTextInputChange"
				@focus="setFocus"
				@blur="onBlur"
				@keydown.stop
				:title="displayTitle"
				:placeholder="parameter.placeholder"
			/>

			<credentials-select
				v-else-if="
					parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'
				"
				ref="inputField"
				:parameter="parameter"
				:node="node"
				:activeCredentialType="activeCredentialType"
				:inputSize="inputSize"
				:displayValue="displayValue"
				:isReadOnly="isReadOnly"
				:displayTitle="displayTitle"
				@credentialSelected="credentialSelected"
				@valueChanged="valueChanged"
				@setFocus="setFocus"
				@onBlur="onBlur"
			>
				<template v-slot:issues-and-options>
					<parameter-issues :issues="getIssues" />
				</template>
			</credentials-select>

			<n8n-select
				v-else-if="parameter.type === 'options'"
				ref="inputField"
				:size="inputSize"
				filterable
				:value="displayValue"
				:placeholder="
					parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')
				"
				:loading="remoteParameterOptionsLoading"
				:disabled="isReadOnly || remoteParameterOptionsLoading"
				:title="displayTitle"
				@change="valueChanged"
				@keydown.stop
				@focus="setFocus"
				@blur="onBlur"
			>
				<n8n-option
					v-for="option in parameterOptions"
					:value="option.value"
					:key="option.value"
					:label="getOptionsOptionDisplayName(option)"
				>
					<div class="list-option">
						<div
							class="option-headline ph-no-capture"
							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
						>
							{{ getOptionsOptionDisplayName(option) }}
						</div>
						<div
							v-if="option.description"
							class="option-description"
							v-html="getOptionsOptionDescription(option)"
						></div>
					</div>
				</n8n-option>
			</n8n-select>

			<n8n-select
				v-else-if="parameter.type === 'multiOptions'"
				ref="inputField"
				:size="inputSize"
				filterable
				multiple
				:value="displayValue"
				:loading="remoteParameterOptionsLoading"
				:disabled="isReadOnly || remoteParameterOptionsLoading"
				:title="displayTitle"
				:placeholder="$locale.baseText('parameterInput.select')"
				@change="valueChanged"
				@keydown.stop
				@focus="setFocus"
				@blur="onBlur"
			>
				<n8n-option
					v-for="option in parameterOptions"
					:value="option.value"
					:key="option.value"
					:label="getOptionsOptionDisplayName(option)"
				>
					<div class="list-option">
						<div class="option-headline">{{ getOptionsOptionDisplayName(option) }}</div>
						<div
							v-if="option.description"
							class="option-description"
							v-html="getOptionsOptionDescription(option)"
						></div>
					</div>
				</n8n-option>
			</n8n-select>

			<el-switch
				v-else-if="parameter.type === 'boolean'"
				class="switch-input"
				ref="inputField"
				active-color="#13ce66"
				:value="displayValue"
				:disabled="isReadOnly"
				@change="valueChanged"
			/>
		</div>

		<parameter-issues v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter" :issues="getIssues" />
	</div>
</template>

<script lang="ts">
import { get } from 'lodash';

import {
	INodeUi,
	INodeUpdatePropertiesInformation,
} from '@/Interface';
import {
	NodeHelpers,
	NodeParameterValue,
	ILoadOptions,
	INodeParameters,
	INodePropertyOptions,
	Workflow,
	NodeParameterValueType,
} from 'n8n-workflow';

import CodeEdit from '@/components/CodeEdit.vue';
import CredentialsSelect from '@/components/CredentialsSelect.vue';
import ExpressionEdit from '@/components/ExpressionEdit.vue';
import NodeCredentials from '@/components/NodeCredentials.vue';
import ScopesNotice from '@/components/ScopesNotice.vue';
import ParameterOptions from '@/components/ParameterOptions.vue';
import ParameterIssues from '@/components/ParameterIssues.vue';
import ResourceLocator from '@/components/ResourceLocator/ResourceLocator.vue';
// @ts-ignore
import PrismEditor from 'vue-prism-editor';
import TextEdit from '@/components/TextEdit.vue';
import { externalHooks } from '@/components/mixins/externalHooks';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';

import mixins from 'vue-typed-mixins';
import { CUSTOM_API_CALL_KEY } from '@/constants';
import { mapGetters } from 'vuex';
import { hasExpressionMapping, isValueExpression } from './helpers';
import { isResourceLocatorValue } from '@/typeGuards';

export default mixins(
	externalHooks,
	nodeHelpers,
	showMessage,
	workflowHelpers,
)
	.extend({
		name: 'parameter-input',
		components: {
			CodeEdit,
			ExpressionEdit,
			NodeCredentials,
			CredentialsSelect,
			PrismEditor,
			ScopesNotice,
			ParameterOptions,
			ParameterIssues,
			ResourceLocator,
			TextEdit,
		},
		props: [
			'inputSize',
			'isReadOnly',
			'documentationUrl',
			'parameter', // NodeProperties
			'path', // string
			'value',
			'hideIssues', // boolean
			'errorHighlight',
			'isForCredential', // boolean
			'eventSource', // string
			'activeDrop',
			'droppable',
			'forceShowExpression',
		],
		data () {
			return {
				codeEditDialogVisible: false,
				nodeName: '',
				expressionAddOperation: 'set' as 'add' | 'set',
				expressionEditDialogVisible: false,
				remoteParameterOptions: [] as INodePropertyOptions[],
				remoteParameterOptionsLoading: false,
				remoteParameterOptionsLoadingIssues: null as string | null,
				textEditDialogVisible: false,
				tempValue: '', //  el-date-picker and el-input does not seem to work without v-model so add one
				CUSTOM_API_CALL_KEY,
				activeCredentialType: '',
				dateTimePickerOptions: {
					shortcuts: [
						{
							text: 'Today', // TODO
							// tslint:disable-next-line:no-any
							onClick (picker: any) {
								picker.$emit('pick', new Date());
							},
						},
						{
							text: 'Yesterday', // TODO
							// tslint:disable-next-line:no-any
							onClick (picker: any) {
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24);
								picker.$emit('pick', date);
							},
						},
						{
							text: 'A week ago', // TODO
							// tslint:disable-next-line:no-any
							onClick (picker: any) {
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', date);
							},
						},
					],
				},
			};
		},
		watch: {
			dependentParametersValues () {
				// Reload the remote parameters whenever a parameter
				// on which the current field depends on changes
				this.loadRemoteParameterOptions();
			},
			value () {
				if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true) {
					// Do not set for color with alpha else wrong value gets displayed in field
					return;
				}
				this.tempValue = this.displayValue as string;
			},
		},
		computed: {
			...mapGetters('credentials', ['allCredentialTypes']),
			isValueExpression(): boolean {
				return isValueExpression(this.parameter, this.value);
			},
			areExpressionsDisabled(): boolean {
				return this.$store.getters['ui/areExpressionsDisabled'];
			},
			codeAutocomplete (): string | undefined {
				return this.getArgument('codeAutocomplete') as string | undefined;
			},
			dependentParametersValues (): string | null {
				const loadOptionsDependsOn = this.getArgument('loadOptionsDependsOn') as string[] | undefined;

				if (loadOptionsDependsOn === undefined) {
					return null;
				}

				// Get the resolved parameter values of the current node
				const currentNodeParameters = this.$store.getters.activeNode.parameters;
				try {
					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters);

					const returnValues: string[] = [];
					for (const parameterPath of loadOptionsDependsOn) {
						returnValues.push(get(resolvedNodeParameters, parameterPath) as string);
					}

					return returnValues.join('|');
				} catch (error) {
					return null;
				}
			},
			node (): INodeUi | null {
				return this.$store.getters.activeNode;
			},
			displayTitle (): string {
				const interpolation = { interpolate: { shortPath: this.shortPath } };

				if (this.getIssues.length && this.isValueExpression) {
					return this.$locale.baseText(
						'parameterInput.parameterHasIssuesAndExpression',
						interpolation,
					);
				} else if (this.getIssues.length && !this.isValueExpression) {
					return this.$locale.baseText(
						'parameterInput.parameterHasIssues',
						interpolation,
					);
				} else if (!this.getIssues.length && this.isValueExpression) {
					return this.$locale.baseText(
						'parameterInput.parameterHasExpression',
						interpolation,
					);
				}

				return this.$locale.baseText('parameterInput.parameter', interpolation);
			},
			displayValue (): string | number | boolean | null {
				if (this.remoteParameterOptionsLoading === true) {
					// If it is loading options from server display
					// to user that the data is loading. If not it would
					// display the user the key instead of the value it
					// represents
					return this.$locale.baseText('parameterInput.loadingOptions');
				}

				let returnValue;
				if (this.isValueExpression === false) {
					returnValue = this.isResourceLocatorParameter ? (this.value ? this.value.value: '') : this.value;
				} else {
					returnValue = this.expressionValueComputed;
				}

				if (this.parameter.type === 'credentialsSelect') {
					const credType = this.$store.getters['credentials/getCredentialTypeByName'](this.value);
					if (credType) {
						returnValue = credType.displayName;
					}
				}

				if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
					// Convert the value to rgba that el-color-picker can display it correctly
					const bigint = parseInt(returnValue.slice(1), 16);
					const h = [];
					h.push((bigint >> 24) & 255);
					h.push((bigint >> 16) & 255);
					h.push((bigint >> 8) & 255);
					h.push((255 - bigint & 255) / 255);

					returnValue = 'rgba('+h.join()+')';
				}

				if (returnValue !== undefined && returnValue !== null && this.parameter.type === 'string') {
					const rows = this.getArgument('rows');
					if (rows === undefined || rows === 1) {
						returnValue = returnValue.toString().replace(/\n/, '|');
					}
				}

				return returnValue;
			},
			expressionDisplayValue (): string {
				const value = this.displayValue;

				// address type errors for text input
				if (typeof value === 'number' || typeof value === 'boolean') {
					return JSON.stringify(value);
				}

				if (value === null) {
					return '';
				}

				return value;
			},
			expressionValueComputed (): NodeParameterValue | string[] | null {
				if (this.areExpressionsDisabled) {
					return this.value;
				}

				if (this.node === null) {
					return null;
				}

				let computedValue: NodeParameterValue;

				try {
					computedValue = this.resolveExpression(this.value.value || this.value) as NodeParameterValue;
				} catch (error) {
					computedValue = `[${this.$locale.baseText('parameterInput.error')}}: ${error.message}]`;
				}

				return computedValue;
			},
			getStringInputType () {
				if (this.getArgument('password') === true) {
					return 'password';
				}

				const rows = this.getArgument('rows');
				if (rows !== undefined && rows > 1) {
					return 'textarea';
				}

				if (this.parameter.type === 'code') {
					return 'textarea';
				}

				return 'text';
			},
			getIssues (): string[] {
				if (this.hideIssues === true || this.node === null) {
					return [];
				}

				const newPath = this.shortPath.split('.');
				newPath.pop();

				const issues = NodeHelpers.getParameterIssues(this.parameter, this.node.parameters, newPath.join('.'), this.node);

				if (this.parameter.type === 'credentialsSelect' && this.displayValue === '') {
					issues.parameters = issues.parameters || {};

					const issue = this.$locale.baseText('parameterInput.selectACredentialTypeFromTheDropdown');

					issues.parameters[this.parameter.name] = [issue];
				} else if (
					['options', 'multiOptions'].includes(this.parameter.type) &&
					this.remoteParameterOptionsLoading === false &&
					this.remoteParameterOptionsLoadingIssues === null
				) {
					// Check if the value resolves to a valid option
					// Currently it only displays an error in the node itself in
					// case the value is not valid. The workflow can still be executed
					// and the error is not displayed on the node in the workflow
					const validOptions = this.parameterOptions!.map((options: INodePropertyOptions) => options.value);

					const checkValues: string[] = [];

					if (!this.skipCheck(this.displayValue)) {
						if (Array.isArray(this.displayValue)) {
							checkValues.push.apply(checkValues, this.displayValue);
						} else {
							checkValues.push(this.displayValue as string);
						}
					}

					for (const checkValue of checkValues) {
						if (checkValue === null || !validOptions.includes(checkValue)) {
							if (issues.parameters === undefined) {
								issues.parameters = {};
							}

							const issue = this.$locale.baseText(
								'parameterInput.theValueIsNotSupported',
								{ interpolate: { checkValue } },
							);

							issues.parameters[this.parameter.name] = [issue];
						}
					}
				} else if (this.remoteParameterOptionsLoadingIssues !== null) {
					if (issues.parameters === undefined) {
						issues.parameters = {};
					}
					issues.parameters[this.parameter.name] = [`There was a problem loading the parameter options from server: "${this.remoteParameterOptionsLoadingIssues}"`];
				}

				if (issues !== undefined &&
					issues.parameters !== undefined &&
					issues.parameters[this.parameter.name] !== undefined) {
					return issues.parameters[this.parameter.name];
				}

				return [];
			},
			isEditor (): boolean {
				return ['code', 'json'].includes(this.editorType);
			},
			editorType (): string {
				return this.getArgument('editor') as string;
			},
			parameterOptions (): INodePropertyOptions[] {
				if (this.hasRemoteMethod === false) {
					// Options are already given
					return this.parameter.options;
				}

				// Options get loaded from server
				return this.remoteParameterOptions;
			},
			parameterInputClasses () {
				const classes: {[c: string]: boolean} = {
					droppable: this.droppable,
					activeDrop: this.activeDrop,
				};

				const rows = this.getArgument('rows');
				const isTextarea = this.parameter.type === 'string' && rows !== undefined;
				const isSwitch = this.parameter.type === 'boolean' && !this.isValueExpression;

				if (!isTextarea && !isSwitch) {
					classes['parameter-value-container'] = true;
				}

				if (this.isValueExpression || this.forceShowExpression) {
					classes['expression'] = true;
				}
				if (!this.droppable && !this.activeDrop && (this.getIssues.length || this.errorHighlight)) {
					classes['has-issues'] = true;
				}

				return classes;
			},
			parameterInputWrapperStyle () {
				let deductWidth = 0;
				const styles = {
					width: '100%',
				};
				if (this.parameter.type === 'credentialsSelect' || this.isResourceLocatorParameter) {
					return styles;
				}
				if (this.getIssues.length) {
					deductWidth += 20;
				}

				if (deductWidth !== 0) {
					styles.width = `calc(100% - ${deductWidth}px)`;
				}

				return styles;
			},
			hasRemoteMethod (): boolean {
				return !!this.getArgument('loadOptionsMethod') || !!this.getArgument('loadOptions');
			},
			shortPath (): string {
				const shortPath = this.path.split('.');
				shortPath.shift();
				return shortPath.join('.');
			},
			workflow (): Workflow {
				return this.getCurrentWorkflow();
			},
			isResourceLocatorParameter (): boolean {
				return this.parameter.type === 'resourceLocator';
			},
		},
		methods: {
			isRemoteParameterOption(option: INodePropertyOptions) {
				return this.remoteParameterOptions.map(o => o.name).includes(option.name);
			},
			credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
				// Update the values on the node
				this.$store.commit('updateNodeProperties', updateInformation);

				const node = this.$store.getters.getNodeByName(updateInformation.name);

				// Update the issues
				this.updateNodeCredentialIssues(node);

				this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
			},
			/**
			 * Check whether a param value must be skipped when collecting node param issues for validation.
			 */
			skipCheck(value: string | number | boolean | null) {
				return typeof value === 'string' && value.includes(CUSTOM_API_CALL_KEY);
			},
			getPlaceholder(): string {
				return this.isForCredential
					? this.$locale.credText().placeholder(this.parameter)
					: this.$locale.nodeText().placeholder(this.parameter, this.path);
			},
			getOptionsOptionDisplayName(option: { value: string; name: string }): string {
				return this.isForCredential
					? this.$locale.credText().optionsOptionDisplayName(this.parameter, option)
					: this.$locale.nodeText().optionsOptionDisplayName(this.parameter, option, this.path);
			},
			getOptionsOptionDescription(option: { value: string; description: string }): string {
				return this.isForCredential
					? this.$locale.credText().optionsOptionDescription(this.parameter, option)
					: this.$locale.nodeText().optionsOptionDescription(this.parameter, option, this.path);
			},

			async loadRemoteParameterOptions () {
				if (this.node === null || this.hasRemoteMethod === false || this.remoteParameterOptionsLoading) {
					return;
				}
				this.remoteParameterOptionsLoadingIssues = null;
				this.remoteParameterOptionsLoading = true;
				this.remoteParameterOptions.length = 0;

				// Get the resolved parameter values of the current node

				try {
					const currentNodeParameters = (this.$store.getters.activeNode as INodeUi).parameters;
					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters) as INodeParameters;
					const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
					const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;

					const options = await this.$store.dispatch('nodeTypes/getNodeParameterOptions',
						{
							nodeTypeAndVersion: {
								name: this.node.type,
								version: this.node.typeVersion,
							},
							path: this.path,
							methodName: loadOptionsMethod,
							loadOptions,
							currentNodeParameters: resolvedNodeParameters,
							credentials: this.node.credentials,
						},
					);

					this.remoteParameterOptions.push.apply(this.remoteParameterOptions, options);
				} catch (error) {
					this.remoteParameterOptionsLoadingIssues = error.message;
				}

				this.remoteParameterOptionsLoading = false;
			},
			closeCodeEditDialog () {
				this.codeEditDialogVisible = false;
			},
			closeExpressionEditDialog () {
				this.expressionEditDialogVisible = false;
			},
			trackExpressionEditOpen () {
				if(!this.node) {
					return;
				}

				if((this.node.type as string).startsWith('n8n-nodes-base')) {
					this.$telemetry.track('User opened Expression Editor', {
						node_type: this.node.type,
						parameter_name: this.parameter.displayName,
						parameter_field_type: this.parameter.type,
						new_expression: !this.isValueExpression,
						workflow_id: this.$store.getters.workflowId,
						session_id: this.$store.getters['ui/ndvSessionId'],
						source: this.eventSource || 'ndv',
					});
				}
			},
			closeTextEditDialog () {
				this.textEditDialogVisible = false;
			},
			displayEditDialog () {
				if (this.isEditor) {
					this.codeEditDialogVisible = true;
				} else {
					this.textEditDialogVisible = true;
				}
			},
			getArgument (argumentName: string): string | number | boolean | undefined {
				if (this.parameter.typeOptions === undefined) {
					return undefined;
				}

				if (this.parameter.typeOptions[argumentName] === undefined) {
					return undefined;
				}

				return this.parameter.typeOptions[argumentName];
			},
			expressionUpdated (value: string) {
				const val: NodeParameterValueType = this.isResourceLocatorParameter ? { __rl: true, value, mode: this.value.mode } : value;
				this.valueChanged(val);
			},
			openExpressionEdit() {
				if (this.areExpressionsDisabled) {
					return;
				}

				if (this.isValueExpression) {
					this.expressionEditDialogVisible = true;
					this.trackExpressionEditOpen();
					return;
				}
			},
			onBlur () {
				this.$emit('blur');
			},
			onResourceLocatorDrop(data: string) {
				this.$emit('drop', data);
			},
			setFocus () {
				if (this.isValueExpression) {
					this.expressionEditDialogVisible = true;
					this.trackExpressionEditOpen();
					return;
				}

				if (['json', 'string'].includes(this.parameter.type) && this.getArgument('alwaysOpenEditWindow')) {
					this.displayEditDialog();
					return;
				}

				if (this.node !== null) {
					// When an event like mouse-click removes the active node while
					// editing is active it does not know where to save the value to.
					// For that reason do we save the node-name here. We could probably
					// also just do that once on load but if Vue decides for some reason to
					// reuse the input it could have the wrong value so lets set it everytime
					// just to be sure
					this.nodeName = this.node.name;
				}

				// Set focus on field
				setTimeout(() => {
					// @ts-ignore
					if (this.$refs.inputField && this.$refs.inputField.$el) {
						// @ts-ignore
						this.$refs.inputField.focus();
					}
				});

				this.$emit('focus');
			},
			rgbaToHex (value: string): string | null {
				// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
				const valueMatch = (value as string).match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)$/);
				if (valueMatch === null) {
					// TODO: Display something if value is not valid
					return null;
				}
				const [r, g, b, a] = valueMatch.splice(1, 4).map(v => Number(v));
				return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + ((1 << 8) + Math.floor((1-a)*255)).toString(16).slice(1);
			},
			onTextInputChange (value: string) {
				const parameterData = {
					node: this.node !== null ? this.node.name : this.nodeName,
					name: this.path,
					value,
				};

				this.$emit('textInput', parameterData);
			},
			valueChanged (value: string[] | string | number | boolean | Date | {} | null) {
				if (this.parameter.name === 'nodeCredentialType') {
					this.activeCredentialType = value as string;
				}

				if (value instanceof Date) {
					value = value.toISOString();
				}

				if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && value !== null && value.toString().charAt(0) !== '#') {
					const newValue = this.rgbaToHex(value as string);
					if (newValue !== null) {
						this.tempValue = newValue;
						value = newValue;
					}
				}

				const parameterData = {
					node: this.node !== null ? this.node.name : this.nodeName,
					name: this.path,
					value,
				};

				this.$emit('valueChanged', parameterData);

				if (this.parameter.name === 'operation' || this.parameter.name === 'mode') {
					this.$telemetry.track('User set node operation or mode', {
						workflow_id: this.$store.getters.workflowId,
						node_type: this.node && this.node.type,
						resource: this.node && this.node.parameters.resource,
						is_custom: value === CUSTOM_API_CALL_KEY,
						session_id: this.$store.getters['ui/ndvSessionId'],
						parameter: this.parameter.name,
					});
				}
			},
			optionSelected (command: string) {
				const prevValue = this.value;

				if (command === 'resetValue') {
					this.valueChanged(this.parameter.default);
				} else if (command === 'openExpression') {
					this.expressionEditDialogVisible = true;
				} else if (command === 'addExpression') {
					if (this.isResourceLocatorParameter) {
						if (isResourceLocatorValue(this.value)) {
							this.valueChanged({ __rl: true, value: `=${this.value.value}`, mode: this.value.mode });
						} else {
							this.valueChanged({ __rl: true, value: `=${this.value}`, mode: '' });
						}
					}
					else if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
						this.valueChanged(`={{${this.value}}}`);
					}
					else {
						this.valueChanged(`=${this.value}`);
					}

					setTimeout(() => {
						this.expressionEditDialogVisible = true;
						this.trackExpressionEditOpen();
					}, 375);
				} else if (command === 'removeExpression') {
					let value = this.expressionValueComputed;

					if (this.parameter.type === 'multiOptions' && typeof value === 'string') {
						value = (value || '').split(',')
							.filter((value) => (this.parameterOptions || []).find((option) => option.value === value));
					}

					if (this.isResourceLocatorParameter) {
						this.valueChanged({ __rl: true, value, mode: this.value.mode });
					} else {
						this.valueChanged(typeof value !== 'undefined' ? value : null);
					}
				} else if (command === 'refreshOptions') {
					if (this.isResourceLocatorParameter) {
						const resourceLocator = this.$refs.resourceLocator;
						if (resourceLocator) {
							(resourceLocator as Vue).$emit('refreshList');
						}
					}
					this.loadRemoteParameterOptions();
				}

				if (this.node && (command === 'addExpression' || command === 'removeExpression')) {
					const telemetryPayload = {
						node_type: this.node.type,
						parameter: this.path,
						old_mode: command === 'addExpression' ? 'fixed': 'expression',
						new_mode: command === 'removeExpression' ? 'fixed': 'expression',
						was_parameter_empty: prevValue === '' || prevValue === undefined,
						had_mapping: hasExpressionMapping(prevValue),
						had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
					};
					this.$telemetry.track('User switched parameter mode', telemetryPayload);
					this.$externalHooks().run('parameterInput.modeSwitch', telemetryPayload);
				}
			},
		},
		updated () {
			this.$nextTick(() => {
				const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');

				if (remoteParameterOptions.length > 0) {
					this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
				}
			});
		},
		mounted () {
			this.$on('optionSelected', this.optionSelected);

			this.tempValue = this.displayValue as string;
			if (this.node !== null) {
				this.nodeName = this.node.name;
			}

			if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
				this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
			}

			if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && this.displayValue !== null && this.displayValue.toString().charAt(0) !== '#') {
				const newValue = this.rgbaToHex(this.displayValue as string);
				if (newValue !== null) {
					this.tempValue = newValue;
				}
			}

			if (this.hasRemoteMethod === true && this.node !== null) {
				// Make sure to load the parameter options
				// directly and whenever the credentials change
				this.$watch(() => this.node!.credentials, () => {
					this.loadRemoteParameterOptions();
				}, { deep: true, immediate: true });

				// Reload function on change element from
				// displayOptions.typeOptions.reloadOnChange parameters
				if (this.parameter.typeOptions && this.parameter.typeOptions.reloadOnChange) {
					// Get all parameter in reloadOnChange property
					// This reload when parameters in reloadOnChange is updated
					const parametersOnChange : string[] = this.parameter.typeOptions.reloadOnChange;
					for (let i = 0; i < parametersOnChange.length; i++) {
						const parameter = parametersOnChange[i] as string;
						if (parameter in this.node.parameters) {
							this.$watch(() => {
								if (this.node && this.node.parameters && this.node.parameters[parameter]) {
									return this.node.parameters![parameter];
								} else {
									return null;
								}
							}, () => {
								this.loadRemoteParameterOptions();
							}, { deep: true, immediate: true });
						}
					}
				}
			}

			this.$externalHooks().run('parameterInput.mount', { parameter: this.parameter, inputFieldRef: this.$refs['inputField'] });
		},
	});
</script>

<style scoped lang="scss">

.code-edit {
	font-size: var(--font-size-xs);
}

.switch-input {
	margin: var(--spacing-5xs) 0 var(--spacing-2xs) 0;
}

.parameter-value-container {
	display: flex;
	align-items: center;
}

.parameter-actions {
	display: inline-flex;
	align-items: center;
}

.parameter-input {
	display: inline-block;
}

::v-deep .color-input {
	display: flex;

	.el-color-picker__trigger {
		border: none;
	}
}
</style>

<style lang="scss">

.ql-editor {
	padding: 6px;
	line-height: 26px;
	background-color: #f0f0f0;
}

.expression {
	textarea, input {
		cursor: pointer !important;
	}

	--input-border-color: var(--color-secondary-tint-1);
	--input-background-color: var(--color-secondary-tint-3);
	--input-font-color: var(--color-secondary);
}


.droppable {
	--input-border-color: var(--color-secondary-tint-1);
	--input-background-color: var(--color-secondary-tint-3);
	--input-border-style: dashed;
}

.activeDrop {
	--input-border-color: var(--color-success);
	--input-background-color: var(--color-success-tint-2);
	--input-border-style: solid;

	textarea, input {
		cursor: grabbing !important;
	}
}

.has-issues {
	--input-border-color: var(--color-danger);
}

.el-dropdown {
	color: var(--color-text-light);
}

.list-option {
	max-width: 340px;
	margin: 6px 0;
	white-space: normal;
	padding-right: 20px;

	.option-headline {
		font-weight: var(--font-weight-bold);
		line-height: var(--font-line-height-regular);
		overflow-wrap: break-word;
	}

	.option-description {
		margin-top: 2px;
		font-size: var(--font-size-2xs);
		font-weight: var(--font-weight-regular);
		line-height: var(--font-line-height-xloose);
		color: $--custom-font-very-light;
	}
}

.edit-window-button {
	display: none;
}

.parameter-input:hover .edit-window-button {
	display: inline;
}

.expand-input-icon-container {
	display: flex;
	height: 100%;
	align-items: center;
}

</style>