Create Elementor Custom Control. Image selector control

custom-control-init.php

<?php
namespace ElementorControls;
if (!defined('ABSPATH')) exit; // Exit if accessed directly

class Elementor_Custom_Controls {

	public function includes() {
		require_once(plugin_dir_path(__FILE__).'inc/elementor/image-selector-control.php');
	}

	public function register_controls() {
		$this->includes();
		$controls_manager = \Elementor\Plugin::$instance->controls_manager;
		$controls_manager->register_control(\Elementor\CustomControl\ImageSelector_Control::ImageSelector, new \Elementor\CustomControl\ImageSelector_Control());
	}

	public function __construct() {
		add_action('elementor/controls/controls_registered', [$this, 'register_controls']);
	}

}
new Elementor_Custom_Controls();

image-selector-control.php

<?php
namespace Elementor\CustomControl;

use \Elementor\Base_Data_Control;

class ImageSelector_Control extends Base_Data_Control {


	const ImageSelector = 'image_selector';

	/**
	 * Set control type.
	 */
	public function get_type() {
		return self::ImageSelector;
	}

	/**
	 * Enqueue control scripts and styles.
	 */
	public function enqueue() {
		$url = plugin_dir_path(__FILE__).'/inc/elementor/assets/css/';
		// Styles
		wp_enqueue_style('image-selector', $url.'image-selector.css', array(), '');
	}

	/**
	 * Set default settings
	 */
	protected function get_default_settings() {
		return [
			'label_block' => true,
			'toggle' => true,
			'options' => [],
		];
	}
	
	/**
	 * control field markup
	 */
	public function content_template() {
		$control_uid = $this->get_control_uid('{{ value }}');
		?>
		<div class="elementor-control-field">
			<label class="elementor-control-title">{{{ data.label }}}</label>
			<div class="elementor-control-image-selector-wrapper">
				<# _.each( data.options, function( options, value ) { #>
				<input id="<?php echo $control_uid; ?>" type="radio" name="elementor-image-selector-{{ data.name }}-{{ data._cid }}" value="{{ value }}" data-setting="{{ data.name }}">
				<label class="elementor-image-selector-label tooltip-target" for="<?php echo $control_uid; ?>" data-tooltip="{{ options.title }}" title="{{ options.title }}">
					<img src="{{ options.url }}" alt="{{ options.title }}">
					<span class="elementor-screen-only">{{{ options.title }}}</span>
				</label>
				<# } ); #>
			</div>
		</div>
		<# if ( data.description ) { #>
		<div class="elementor-control-field-description">{{{ data.description }}}</div>
		<# } #>
		<?php
	}

}

image-selector.css

.elementor-control-image-selector-wrapper input[type="radio"] {
	display: none;
}
.elementor-label-block .elementor-control-image-selector-wrapper{
	width: 100%;
	margin-top: 10px;
}
.elementor-control-image-selector-wrapper .elementor-image-selector-label {
	display: inline-block;
	border: 3px solid transparent;
	cursor: pointer;
	overflow: hidden;
}
.elementor-control-image-selector-wrapper input:checked+.elementor-image-selector-label {
	border: 3px solid #a4afb7;
}

widget.php

<?php

namespace ElementorWidgets\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if (!defined('ABSPATH')) exit; // Exit if accessed directly

/**
 * Elementor Custom Widget Test
 */
class Custom_Widget extends Widget_Base {

	public function get_name() {
		return 'test_addon';
	}

	public function get_title() {
		return __('Test Box', 'text-domain');
	}

	public function get_categories() {
		return ['general'];
	}

	/**
	 * Register the widget controls.
	 */
	protected function _register_controls() {
		$this->start_controls_section(
			'page_layout_section',
			[
				'label' => __('Page Layout', 'text-domain'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		//Image selector
		$this->add_control(
			'page_layout',
			[
				'label' => esc_html__('Layout', 'text-domain'),
				'type' => \Elementor\CustomControl\ImageSelector_Control::ImageSelector,
				'options' => [
					'left-sidebar' => [
						'title' => esc_html__('Left', 'text-domain'),
						'url' => 'http://localhost/test/wp-content/themes/test/assets/images/left-sidebar.png',
					],
					'right-sidebar' => [
						'title' => esc_html__('Right', 'text-domain'),
						'url' => 'http://localhost/test/wp-content/themes/test/assets/images/right-sidebar.png',
					],
					'no-sidebar' => [
						'title' => esc_html__('No Sidebar', 'text-domain'),
						'url' => 'http://localhost/test/wp-content/themes/test/assets/images/no-sidebar.png',
					],
				],
				'default' => 'right-sidebar',
			]
		);
		$this->end_controls_section();

	}
}

Or can you share me the actual code which saves the data like onChange or trigger. I am really confused and tried many solutions from docs as well as some forums.

Or can you share me the actual code which saves the data like onChange or trigger. I am really confused and tried many solutions from docs as well as some forums.

you can see the Elementor pro's post widget & their custom query system's code. They modify select2 for on-click ajax requests. I got help from them.

Does anyone know how to copy a value from one control to another? I want to assign a value of 'control1' to 'control2' when 'control1' is changed.

@iqbalrony can you see my issue & code and suggest anything to save to select2 or for alternative saving selected value to input type text?
elementor/elementor#15309