← All changes | includes/widgets/common.php +1597 -1 4.2.0-dev2 → 3.5.0-beta1 View file →

		@@ -1,13 +1,1609 @@
1	1	<?php
2	2	namespace Elementor;
3	3
	4	+use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
	5	+
4	6	if ( ! defined( 'ABSPATH' ) ) {
5	7	exit; // Exit if accessed directly.
6	8	}
7	9
8		-class Widget_Common extends Widget_Common_Base {
	10	+/**
	11	+ * Elementor common widget.
	12	+ *
	13	+ * Elementor base widget that gives you all the advanced options of the basic
	14	+ * widget.
	15	+ *
	16	+ * @since 1.0.0
	17	+ */
	18	+class Widget_Common extends Widget_Base {
9	19
	20	+ /**
	21	+ * Get widget name.
	22	+ *
	23	+ * Retrieve common widget name.
	24	+ *
	25	+ * @since 1.0.0
	26	+ * @access public
	27	+ *
	28	+ * @return string Widget name.
	29	+ */
10	30	public function get_name() {
11	31	return 'common';
	32	+ }
	33	+
	34	+ /**
	35	+ * Show in panel.
	36	+ *
	37	+ * Whether to show the common widget in the panel or not.
	38	+ *
	39	+ * @since 1.0.0
	40	+ * @access public
	41	+ *
	42	+ * @return bool Whether to show the widget in the panel.
	43	+ */
	44	+ public function show_in_panel() {
	45	+ return false;
	46	+ }
	47	+
	48	+ /**
	49	+ * Get Responsive Device Args
	50	+ *
	51	+ * Receives an array of device args, and duplicates it for each active breakpoint.
	52	+ * Returns an array of device args.
	53	+ *
	54	+ * @since 3.4.7
	55	+ * @access protected
	56	+ *
	57	+ * @param array $args arguments to duplicate per breakpoint
	58	+ * @param array $devices_to_exclude
	59	+ *
	60	+ * @return array responsive device args
	61	+ */
	62	+ protected function get_responsive_device_args( array $args, array $devices_to_exclude = [] ) {
	63	+ $device_args = [];
	64	+ $breakpoints = Breakpoints_Manager::get_default_config();
	65	+
	66	+ foreach ( $breakpoints as $breakpoint_key => $breakpoint ) {
	67	+ // If the device is not excluded, add it to the device args array.
	68	+ if ( ! in_array( $breakpoint_key, $devices_to_exclude, true ) ) {
	69	+ $parsed_device_args = $this->parse_device_args_placeholders( $args, $breakpoint_key );
	70	+
	71	+ $device_args[ $breakpoint_key ] = $parsed_device_args;
	72	+ }
	73	+ }
	74	+
	75	+ return $device_args;
	76	+ }
	77	+
	78	+ /**
	79	+ * Parse Device Args Placeholders
	80	+ *
	81	+ * Receives an array of args. Iterates over the args, and replaces the {{DEVICE}} placeholder, if exists, with the
	82	+ * passed breakpoint key.
	83	+ *
	84	+ * @since 3.4.7
	85	+ * @access private
	86	+ *
	87	+ * @param array $args
	88	+ * @param string $breakpoint_key
	89	+ * @return array parsed device args
	90	+ */
	91	+ private function parse_device_args_placeholders( array $args, $breakpoint_key ) {
	92	+ $parsed_args = [];
	93	+
	94	+ foreach ( $args as $arg_key => $arg_value ) {
	95	+ $arg_key = str_replace( '{{DEVICE}}', $breakpoint_key, $arg_key );
	96	+
	97	+ if ( is_array( $arg_value ) ) {
	98	+ $arg_value = $this->parse_device_args_placeholders( $arg_value, $breakpoint_key );
	99	+ }
	100	+
	101	+ $parsed_args[ $arg_key ] = $arg_value;
	102	+ }
	103	+
	104	+ return $parsed_args;
	105	+ }
	106	+
	107	+ /**
	108	+ * @param $shape String Shape name.
	109	+ *
	110	+ * @return string The shape path in the assets folder.
	111	+ */
	112	+ private function get_shape_url( $shape ) {
	113	+ return ELEMENTOR_ASSETS_URL . 'mask-shapes/' . $shape . '.svg';
	114	+ }
	115	+
	116	+ /**
	117	+ * Return a translated user-friendly list of the available masking shapes.
	118	+ *
	119	+ * @param bool $add_custom Determine if the output should contain `Custom` options.
	120	+ *
	121	+ * @return array Array of shapes with their URL as key.
	122	+ */
	123	+ private function get_shapes( $add_custom = true ) {
	124	+ $shapes = [
	125	+ 'circle' => esc_html__( 'Circle', 'elementor' ),
	126	+ 'flower' => esc_html__( 'Flower', 'elementor' ),
	127	+ 'sketch' => esc_html__( 'Sketch', 'elementor' ),
	128	+ 'triangle' => esc_html__( 'Triangle', 'elementor' ),
	129	+ 'blob' => esc_html__( 'Blob', 'elementor' ),
	130	+ 'hexagon' => esc_html__( 'Hexagon', 'elementor' ),
	131	+ ];
	132	+
	133	+ if ( $add_custom ) {
	134	+ $shapes['custom'] = esc_html__( 'Custom', 'elementor' );
	135	+ }
	136	+
	137	+ return $shapes;
	138	+ }
	139	+
	140	+ /**
	141	+ * Gets a string of CSS rules to apply, and returns an array of selectors with those rules.
	142	+ * This function has been created in order to deal with masking for image widget.
	143	+ * For most of the widgets the mask is being applied to the wrapper itself, but in the case of an image widget,
	144	+ * the `img` tag should be masked directly. So instead of writing a lot of selectors every time,
	145	+ * this function builds both of those selectors easily.
	146	+ *
	147	+ * @param $rules string The CSS rules to apply.
	148	+ *
	149	+ * @return array Selectors with the rules applied.
	150	+ */
	151	+ private function get_mask_selectors( $rules ) {
	152	+ $mask_selectors = [
	153	+ 'default' => '{{WRAPPER}}:not( .elementor-widget-image ) .elementor-widget-container',
	154	+ 'image' => '{{WRAPPER}}.elementor-widget-image .elementor-widget-container img',
	155	+ ];
	156	+
	157	+ return [
	158	+ $mask_selectors['default'] => $rules,
	159	+ $mask_selectors['image'] => $rules,
	160	+ ];
	161	+ }
	162	+
	163	+ /**
	164	+ * Register common widget controls.
	165	+ *
	166	+ * Adds different input fields to allow the user to change and customize the widget settings.
	167	+ *
	168	+ * @since 3.1.0
	169	+ * @access protected
	170	+ */
	171	+ protected function register_controls() {
	172	+ $this->start_controls_section(
	173	+ '_section_style',
	174	+ [
	175	+ 'label' => esc_html__( 'Advanced', 'elementor' ),
	176	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	177	+ ]
	178	+ );
	179	+
	180	+ // Element Name for the Navigator
	181	+ $this->add_control(
	182	+ '_title',
	183	+ [
	184	+ 'label' => esc_html__( 'Title', 'elementor' ),
	185	+ 'type' => Controls_Manager::HIDDEN,
	186	+ 'render_type' => 'none',
	187	+ ]
	188	+ );
	189	+
	190	+ $this->add_responsive_control(
	191	+ '_margin',
	192	+ [
	193	+ 'label' => esc_html__( 'Margin', 'elementor' ),
	194	+ 'type' => Controls_Manager::DIMENSIONS,
	195	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
	196	+ 'selectors' => [
	197	+ '{{WRAPPER}} > .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	198	+ ],
	199	+ ]
	200	+ );
	201	+
	202	+ $this->add_responsive_control(
	203	+ '_padding',
	204	+ [
	205	+ 'label' => esc_html__( 'Padding', 'elementor' ),
	206	+ 'type' => Controls_Manager::DIMENSIONS,
	207	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
	208	+ 'selectors' => [
	209	+ '{{WRAPPER}} > .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	210	+ ],
	211	+ ]
	212	+ );
	213	+
	214	+ $this->add_responsive_control(
	215	+ '_z_index',
	216	+ [
	217	+ 'label' => esc_html__( 'Z-Index', 'elementor' ),
	218	+ 'type' => Controls_Manager::NUMBER,
	219	+ 'min' => 0,
	220	+ 'selectors' => [
	221	+ '{{WRAPPER}}' => 'z-index: {{VALUE}};',
	222	+ ],
	223	+ 'separator' => 'before',
	224	+ ]
	225	+ );
	226	+
	227	+ $this->add_control(
	228	+ '_element_id',
	229	+ [
	230	+ 'label' => esc_html__( 'CSS ID', 'elementor' ),
	231	+ 'type' => Controls_Manager::TEXT,
	232	+ 'dynamic' => [
	233	+ 'active' => true,
	234	+ ],
	235	+ 'default' => '',
	236	+ 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
	237	+ 'style_transfer' => false,
	238	+ 'classes' => 'elementor-control-direction-ltr',
	239	+ ]
	240	+ );
	241	+
	242	+ $this->add_control(
	243	+ '_css_classes',
	244	+ [
	245	+ 'label' => esc_html__( 'CSS Classes', 'elementor' ),
	246	+ 'type' => Controls_Manager::TEXT,
	247	+ 'dynamic' => [
	248	+ 'active' => true,
	249	+ ],
	250	+ 'prefix_class' => '',
	251	+ 'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
	252	+ 'classes' => 'elementor-control-direction-ltr',
	253	+ ]
	254	+ );
	255	+
	256	+ $this->end_controls_section();
	257	+
	258	+ $this->start_controls_section(
	259	+ 'section_effects',
	260	+ [
	261	+ 'label' => esc_html__( 'Motion Effects', 'elementor' ),
	262	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	263	+ ]
	264	+ );
	265	+
	266	+ $this->add_responsive_control(
	267	+ '_animation',
	268	+ [
	269	+ 'label' => esc_html__( 'Entrance Animation', 'elementor' ),
	270	+ 'type' => Controls_Manager::ANIMATION,
	271	+ 'frontend_available' => true,
	272	+ ]
	273	+ );
	274	+
	275	+ $this->add_control(
	276	+ 'animation_duration',
	277	+ [
	278	+ 'label' => esc_html__( 'Animation Duration', 'elementor' ),
	279	+ 'type' => Controls_Manager::SELECT,
	280	+ 'default' => '',
	281	+ 'options' => [
	282	+ 'slow' => esc_html__( 'Slow', 'elementor' ),
	283	+ '' => esc_html__( 'Normal', 'elementor' ),
	284	+ 'fast' => esc_html__( 'Fast', 'elementor' ),
	285	+ ],
	286	+ 'prefix_class' => 'animated-',
	287	+ 'condition' => [
	288	+ '_animation!' => '',
	289	+ ],
	290	+ ]
	291	+ );
	292	+
	293	+ $this->add_control(
	294	+ '_animation_delay',
	295	+ [
	296	+ 'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
	297	+ 'type' => Controls_Manager::NUMBER,
	298	+ 'default' => '',
	299	+ 'min' => 0,
	300	+ 'step' => 100,
	301	+ 'condition' => [
	302	+ '_animation!' => '',
	303	+ ],
	304	+ 'render_type' => 'none',
	305	+ 'frontend_available' => true,
	306	+ ]
	307	+ );
	308	+
	309	+ $this->end_controls_section();
	310	+
	311	+ $this->start_controls_section(
	312	+ '_section_transform',
	313	+ [
	314	+ 'label' => esc_html__( 'Transform', 'elementor' ),
	315	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	316	+ ]
	317	+ );
	318	+
	319	+ $this->start_controls_tabs( '_tabs_positioning' );
	320	+
	321	+ $transform_prefix_class = 'e-';
	322	+ $transform_return_value = 'transform';
	323	+
	324	+ foreach ( [ '', '_hover' ] as $tab ) {
	325	+ $state = '_hover' === $tab ? ':hover' : '';
	326	+
	327	+ $this->start_controls_tab(
	328	+ "_tab_positioning{$tab}",
	329	+ [
	330	+ 'label' => '' === $tab ? esc_html__( 'Normal', 'elementor' ) : esc_html__( 'Hover', 'elementor' ),
	331	+ ]
	332	+ );
	333	+
	334	+ $this->add_control(
	335	+ "_transform_rotate_popover{$tab}",
	336	+ [
	337	+ 'label' => esc_html__( 'Rotate', 'elementor' ),
	338	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	339	+ 'prefix_class' => $transform_prefix_class,
	340	+ 'return_value' => $transform_return_value,
	341	+ ]
	342	+ );
	343	+
	344	+ $this->start_popover();
	345	+
	346	+ $this->add_responsive_control(
	347	+ "_transform_rotateZ_effect{$tab}",
	348	+ [
	349	+ 'label' => esc_html__( 'Rotate', 'elementor' ),
	350	+ 'type' => Controls_Manager::SLIDER,
	351	+ 'range' => [
	352	+ 'px' => [
	353	+ 'min' => -360,
	354	+ 'max' => 360,
	355	+ ],
	356	+ ],
	357	+ 'default' => [
	358	+ 'size' => 0,
	359	+ ],
	360	+ 'selectors' => [
	361	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateZ: {{SIZE}}deg',
	362	+ ],
	363	+ 'condition' => [
	364	+ "_transform_rotate_popover{$tab}!" => '',
	365	+ ],
	366	+ 'frontend_available' => true,
	367	+ ]
	368	+ );
	369	+
	370	+ $this->add_control(
	371	+ "_transform_rotate_3d{$tab}",
	372	+ [
	373	+ 'label' => esc_html__( '3D Rotate', 'elementor' ),
	374	+ 'type' => Controls_Manager::SWITCHER,
	375	+ 'label_on' => esc_html__( 'On', 'elementor' ),
	376	+ 'label_off' => esc_html__( 'Off', 'elementor' ),
	377	+ 'selectors' => [
	378	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateX: 1deg; --e-transform-perspective: 20px;',
	379	+ ],
	380	+ ]
	381	+ );
	382	+
	383	+ $this->add_responsive_control(
	384	+ "_transform_rotateX_effect{$tab}",
	385	+ [
	386	+ 'label' => esc_html__( 'Rotate X', 'elementor' ),
	387	+ 'type' => Controls_Manager::SLIDER,
	388	+ 'range' => [
	389	+ 'px' => [
	390	+ 'min' => -360,
	391	+ 'max' => 360,
	392	+ ],
	393	+ ],
	394	+ 'default' => [
	395	+ 'size' => 0,
	396	+ ],
	397	+ 'condition' => [
	398	+ "_transform_rotate_3d{$tab}!" => '',
	399	+ "_transform_rotate_popover{$tab}!" => '',
	400	+ ],
	401	+ 'selectors' => [
	402	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateX: {{SIZE}}deg;',
	403	+ ],
	404	+ 'frontend_available' => true,
	405	+ ]
	406	+ );
	407	+
	408	+ $this->add_responsive_control(
	409	+ "_transform_rotateY_effect{$tab}",
	410	+ [
	411	+ 'label' => esc_html__( 'Rotate Y', 'elementor' ),
	412	+ 'type' => Controls_Manager::SLIDER,
	413	+ 'range' => [
	414	+ 'px' => [
	415	+ 'min' => -360,
	416	+ 'max' => 360,
	417	+ ],
	418	+ ],
	419	+ 'default' => [
	420	+ 'size' => 0,
	421	+ ],
	422	+ 'condition' => [
	423	+ "_transform_rotate_3d{$tab}!" => '',
	424	+ "_transform_rotate_popover{$tab}!" => '',
	425	+ ],
	426	+ 'selectors' => [
	427	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateY: {{SIZE}}deg;',
	428	+ ],
	429	+ 'frontend_available' => true,
	430	+ ]
	431	+ );
	432	+
	433	+ $this->add_responsive_control(
	434	+ "_transform_perspective_effect{$tab}",
	435	+ [
	436	+ 'label' => esc_html__( 'Perspective', 'elementor' ),
	437	+ 'type' => Controls_Manager::SLIDER,
	438	+ 'range' => [
	439	+ 'px' => [
	440	+ 'min' => 0,
	441	+ 'max' => 1000,
	442	+ ],
	443	+ ],
	444	+ 'condition' => [
	445	+ "_transform_rotate_popover{$tab}!" => '',
	446	+ "_transform_rotate_3d{$tab}!" => '',
	447	+ ],
	448	+ 'selectors' => [
	449	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-perspective: {{SIZE}}px',
	450	+ ],
	451	+ 'frontend_available' => true,
	452	+ ]
	453	+ );
	454	+
	455	+ $this->end_popover();
	456	+
	457	+ $this->add_control(
	458	+ "_transform_translate_popover{$tab}",
	459	+ [
	460	+ 'label' => esc_html__( 'Offset', 'elementor' ),
	461	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	462	+ 'prefix_class' => $transform_prefix_class,
	463	+ 'return_value' => $transform_return_value,
	464	+ ]
	465	+ );
	466	+
	467	+ $this->start_popover();
	468	+
	469	+ $this->add_responsive_control(
	470	+ "_transform_translateX_effect{$tab}",
	471	+ [
	472	+ 'label' => esc_html__( 'Offset X', 'elementor' ),
	473	+ 'type' => Controls_Manager::SLIDER,
	474	+ 'size_units' => [ '%', 'px' ],
	475	+ 'range' => [
	476	+ '%' => [
	477	+ 'min' => -200,
	478	+ 'max' => 200,
	479	+ ],
	480	+ 'px' => [
	481	+ 'min' => -3000,
	482	+ 'max' => 3000,
	483	+ ],
	484	+ ],
	485	+ 'default' => [
	486	+ 'size' => 0,
	487	+ ],
	488	+ 'condition' => [
	489	+ "_transform_translate_popover{$tab}!" => '',
	490	+ ],
	491	+ 'selectors' => [
	492	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-translateX: {{SIZE}}{{UNIT}};',
	493	+ ],
	494	+ 'frontend_available' => true,
	495	+ ]
	496	+ );
	497	+
	498	+ $this->add_responsive_control(
	499	+ "_transform_translateY_effect{$tab}",
	500	+ [
	501	+ 'label' => esc_html__( 'Offset Y', 'elementor' ),
	502	+ 'type' => Controls_Manager::SLIDER,
	503	+ 'size_units' => [ '%', 'px' ],
	504	+ 'range' => [
	505	+ '%' => [
	506	+ 'min' => -200,
	507	+ 'max' => 200,
	508	+ ],
	509	+ 'px' => [
	510	+ 'min' => -3000,
	511	+ 'max' => 3000,
	512	+ ],
	513	+ ],
	514	+ 'condition' => [
	515	+ "_transform_translate_popover{$tab}!" => '',
	516	+ ],
	517	+ 'default' => [
	518	+ 'size' => 0,
	519	+ ],
	520	+ 'selectors' => [
	521	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-translateY: {{SIZE}}{{UNIT}};',
	522	+ ],
	523	+ 'frontend_available' => true,
	524	+ ]
	525	+ );
	526	+
	527	+ $this->end_popover();
	528	+
	529	+ $this->add_control(
	530	+ "_transform_scale_popover{$tab}",
	531	+ [
	532	+ 'label' => esc_html__( 'Scale', 'elementor' ),
	533	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	534	+ 'prefix_class' => $transform_prefix_class,
	535	+ 'return_value' => $transform_return_value,
	536	+ ]
	537	+ );
	538	+
	539	+ $this->start_popover();
	540	+
	541	+ $this->add_control(
	542	+ "_transform_keep_proportions{$tab}",
	543	+ [
	544	+ 'label' => esc_html__( 'Keep Proportions', 'elementor' ),
	545	+ 'type' => Controls_Manager::SWITCHER,
	546	+ 'label_on' => esc_html__( 'On', 'elementor' ),
	547	+ 'label_off' => esc_html__( 'Off', 'elementor' ),
	548	+ 'default' => 'yes',
	549	+ ]
	550	+ );
	551	+
	552	+ $this->add_responsive_control(
	553	+ "_transform_scale_effect{$tab}",
	554	+ [
	555	+ 'label' => esc_html__( 'Scale', 'elementor' ),
	556	+ 'type' => Controls_Manager::SLIDER,
	557	+ 'range' => [
	558	+ 'px' => [
	559	+ 'min' => 0,
	560	+ 'max' => 2,
	561	+ 'step' => 0.1,
	562	+ ],
	563	+ ],
	564	+ 'default' => [
	565	+ 'size' => 1,
	566	+ ],
	567	+ 'condition' => [
	568	+ "_transform_scale_popover{$tab}!" => '',
	569	+ "_transform_keep_proportions{$tab}!" => '',
	570	+ ],
	571	+ 'selectors' => [
	572	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scale: {{SIZE}};',
	573	+ ],
	574	+ 'frontend_available' => true,
	575	+ ]
	576	+ );
	577	+
	578	+ $this->add_responsive_control(
	579	+ "_transform_scaleX_effect{$tab}",
	580	+ [
	581	+ 'label' => esc_html__( 'Scale X', 'elementor' ),
	582	+ 'type' => Controls_Manager::SLIDER,
	583	+ 'range' => [
	584	+ 'px' => [
	585	+ 'min' => 0,
	586	+ 'max' => 2,
	587	+ 'step' => 0.1,
	588	+ ],
	589	+ ],
	590	+ 'default' => [
	591	+ 'size' => 1,
	592	+ ],
	593	+ 'condition' => [
	594	+ "_transform_scale_popover{$tab}!" => '',
	595	+ "_transform_keep_proportions{$tab}" => '',
	596	+ ],
	597	+ 'selectors' => [
	598	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scaleX: {{SIZE}};',
	599	+ ],
	600	+ 'frontend_available' => true,
	601	+ ]
	602	+ );
	603	+
	604	+ $this->add_responsive_control(
	605	+ "_transform_scaleY_effect{$tab}",
	606	+ [
	607	+ 'label' => esc_html__( 'Scale Y', 'elementor' ),
	608	+ 'type' => Controls_Manager::SLIDER,
	609	+ 'range' => [
	610	+ 'px' => [
	611	+ 'min' => 0,
	612	+ 'max' => 2,
	613	+ 'step' => 0.1,
	614	+ ],
	615	+ ],
	616	+ 'default' => [
	617	+ 'size' => 1,
	618	+ ],
	619	+ 'condition' => [
	620	+ "_transform_scale_popover{$tab}!" => '',
	621	+ "_transform_keep_proportions{$tab}" => '',
	622	+ ],
	623	+ 'selectors' => [
	624	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scaleY: {{SIZE}};',
	625	+ ],
	626	+ 'frontend_available' => true,
	627	+ ]
	628	+ );
	629	+
	630	+ $this->end_popover();
	631	+
	632	+ $this->add_control(
	633	+ "_transform_skew_popover{$tab}",
	634	+ [
	635	+ 'label' => esc_html__( 'Skew', 'elementor' ),
	636	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	637	+ 'prefix_class' => $transform_prefix_class,
	638	+ 'return_value' => $transform_return_value,
	639	+ ]
	640	+ );
	641	+
	642	+ $this->start_popover();
	643	+
	644	+ $this->add_responsive_control(
	645	+ "_transform_skewX_effect{$tab}",
	646	+ [
	647	+ 'label' => esc_html__( 'Skew X', 'elementor' ),
	648	+ 'type' => Controls_Manager::SLIDER,
	649	+ 'range' => [
	650	+ 'px' => [
	651	+ 'min' => -360,
	652	+ 'max' => 360,
	653	+ ],
	654	+ ],
	655	+ 'default' => [
	656	+ 'size' => 0,
	657	+ ],
	658	+ 'condition' => [
	659	+ "_transform_skew_popover{$tab}!" => '',
	660	+ ],
	661	+ 'selectors' => [
	662	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-skewX: {{SIZE}}deg;',
	663	+ ],
	664	+ 'frontend_available' => true,
	665	+ ]
	666	+ );
	667	+
	668	+ $this->add_responsive_control(
	669	+ "_transform_skewY_effect{$tab}",
	670	+ [
	671	+ 'label' => esc_html__( 'Skew Y', 'elementor' ),
	672	+ 'type' => Controls_Manager::SLIDER,
	673	+ 'range' => [
	674	+ 'px' => [
	675	+ 'min' => -360,
	676	+ 'max' => 360,
	677	+ ],
	678	+ ],
	679	+ 'default' => [
	680	+ 'size' => 0,
	681	+ ],
	682	+ 'condition' => [
	683	+ "_transform_skew_popover{$tab}!" => '',
	684	+ ],
	685	+ 'selectors' => [
	686	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-skewY: {{SIZE}}deg;',
	687	+ ],
	688	+ 'frontend_available' => true,
	689	+ ]
	690	+ );
	691	+
	692	+ $this->end_popover();
	693	+
	694	+ $this->add_control(
	695	+ "_transform_flipX_effect{$tab}",
	696	+ [
	697	+ 'label' => esc_html__( 'Flip Horizontal', 'elementor' ),
	698	+ 'type' => Controls_Manager::CHOOSE,
	699	+ 'options' => [
	700	+ 'transform' => [
	701	+ 'title' => esc_html__( 'Flip Horizontal', 'elementor' ),
	702	+ 'icon' => 'eicon-flip eicon-tilted',
	703	+ ],
	704	+ ],
	705	+ 'prefix_class' => $transform_prefix_class,
	706	+ 'selectors' => [
	707	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-flipX: -1',
	708	+ ],
	709	+ 'frontend_available' => true,
	710	+ ]
	711	+ );
	712	+
	713	+ $this->add_control(
	714	+ "_transform_flipY_effect{$tab}",
	715	+ [
	716	+ 'label' => esc_html__( 'Flip Vertical', 'elementor' ),
	717	+ 'type' => Controls_Manager::CHOOSE,
	718	+ 'options' => [
	719	+ 'transform' => [
	720	+ 'title' => esc_html__( 'Flip Vertical', 'elementor' ),
	721	+ 'icon' => 'eicon-flip',
	722	+ ],
	723	+ ],
	724	+ 'prefix_class' => $transform_prefix_class,
	725	+ 'selectors' => [
	726	+ "{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-flipY: -1',
	727	+ ],
	728	+ 'frontend_available' => true,
	729	+ ]
	730	+ );
	731	+
	732	+ if ( '_hover' === $tab ) {
	733	+ $this->add_control(
	734	+ '_transform_transition_hover',
	735	+ [
	736	+ 'label' => esc_html__( 'Transition Duration (ms)', 'elementor' ),
	737	+ 'type' => Controls_Manager::SLIDER,
	738	+ 'range' => [
	739	+ 'px' => [
	740	+ 'min' => 100,
	741	+ 'max' => 10000,
	742	+ ],
	743	+ ],
	744	+ 'selectors' => [
	745	+ '{{WRAPPER}} > .elementor-widget-container' => '--e-transform-transition-duration: {{SIZE}}ms',
	746	+ ],
	747	+ 'frontend_available' => true,
	748	+ ]
	749	+ );
	750	+ }
	751	+
	752	+ ${"transform_origin_conditions{$tab}"} = [
	753	+ [
	754	+ 'name' => "_transform_scale_popover{$tab}",
	755	+ 'operator' => '!=',
	756	+ 'value' => '',
	757	+ ],
	758	+ [
	759	+ 'name' => "_transform_rotate_popover{$tab}",
	760	+ 'operator' => '!=',
	761	+ 'value' => '',
	762	+ ],
	763	+ [
	764	+ 'name' => "_transform_flipX_effect{$tab}",
	765	+ 'operator' => '!=',
	766	+ 'value' => '',
	767	+ ],
	768	+ [
	769	+ 'name' => "_transform_flipY_effect{$tab}",
	770	+ 'operator' => '!=',
	771	+ 'value' => '',
	772	+ ],
	773	+ ];
	774	+
	775	+ $this->end_controls_tab();
	776	+ }
	777	+
	778	+ $this->end_controls_tabs();
	779	+
	780	+ $transform_origin_conditions = [
	781	+ 'relation' => 'or',
	782	+ 'terms' => array_merge( $transform_origin_conditions, $transform_origin_conditions_hover ),
	783	+ ];
	784	+
	785	+ // Will override motion effect transform-origin
	786	+ $this->add_responsive_control(
	787	+ 'motion_fx_transform_x_anchor_point',
	788	+ [
	789	+ 'label' => esc_html__( 'X Anchor Point', 'elementor' ),
	790	+ 'type' => Controls_Manager::CHOOSE,
	791	+ 'options' => [
	792	+ 'left' => [
	793	+ 'title' => esc_html__( 'Left', 'elementor' ),
	794	+ 'icon' => 'eicon-h-align-left',
	795	+ ],
	796	+ 'center' => [
	797	+ 'title' => esc_html__( 'Center', 'elementor' ),
	798	+ 'icon' => 'eicon-h-align-center',
	799	+ ],
	800	+ 'right' => [
	801	+ 'title' => esc_html__( 'Right', 'elementor' ),
	802	+ 'icon' => 'eicon-h-align-right',
	803	+ ],
	804	+ ],
	805	+ 'conditions' => $transform_origin_conditions,
	806	+ 'separator' => 'before',
	807	+ 'selectors' => [
	808	+ '{{WRAPPER}}' => '--e-transform-origin-x: {{VALUE}}',
	809	+ ],
	810	+ ]
	811	+ );
	812	+
	813	+ // Will override motion effect transform-origin
	814	+ $this->add_responsive_control(
	815	+ 'motion_fx_transform_y_anchor_point',
	816	+ [
	817	+ 'label' => esc_html__( 'Y Anchor Point', 'elementor' ),
	818	+ 'type' => Controls_Manager::CHOOSE,
	819	+ 'options' => [
	820	+ 'top' => [
	821	+ 'title' => esc_html__( 'Top', 'elementor' ),
	822	+ 'icon' => 'eicon-v-align-top',
	823	+ ],
	824	+ 'center' => [
	825	+ 'title' => esc_html__( 'Center', 'elementor' ),
	826	+ 'icon' => 'eicon-v-align-middle',
	827	+ ],
	828	+ 'bottom' => [
	829	+ 'title' => esc_html__( 'Bottom', 'elementor' ),
	830	+ 'icon' => 'eicon-v-align-bottom',
	831	+ ],
	832	+ ],
	833	+ 'conditions' => $transform_origin_conditions,
	834	+ 'selectors' => [
	835	+ '{{WRAPPER}}' => '--e-transform-origin-y: {{VALUE}}',
	836	+ ],
	837	+ ]
	838	+ );
	839	+
	840	+ $this->end_controls_section();
	841	+
	842	+ $this->start_controls_section(
	843	+ '_section_background',
	844	+ [
	845	+ 'label' => esc_html__( 'Background', 'elementor' ),
	846	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	847	+ ]
	848	+ );
	849	+
	850	+ $this->start_controls_tabs( '_tabs_background' );
	851	+
	852	+ $this->start_controls_tab(
	853	+ '_tab_background_normal',
	854	+ [
	855	+ 'label' => esc_html__( 'Normal', 'elementor' ),
	856	+ ]
	857	+ );
	858	+
	859	+ $this->add_group_control(
	860	+ Group_Control_Background::get_type(),
	861	+ [
	862	+ 'name' => '_background',
	863	+ 'selector' => '{{WRAPPER}} > .elementor-widget-container',
	864	+ ]
	865	+ );
	866	+
	867	+ $this->end_controls_tab();
	868	+
	869	+ $this->start_controls_tab(
	870	+ '_tab_background_hover',
	871	+ [
	872	+ 'label' => esc_html__( 'Hover', 'elementor' ),
	873	+ ]
	874	+ );
	875	+
	876	+ $this->add_group_control(
	877	+ Group_Control_Background::get_type(),
	878	+ [
	879	+ 'name' => '_background_hover',
	880	+ 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
	881	+ ]
	882	+ );
	883	+
	884	+ $this->add_control(
	885	+ '_background_hover_transition',
	886	+ [
	887	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
	888	+ 'type' => Controls_Manager::SLIDER,
	889	+ 'range' => [
	890	+ 'px' => [
	891	+ 'max' => 3,
	892	+ 'step' => 0.1,
	893	+ ],
	894	+ ],
	895	+ 'render_type' => 'ui',
	896	+ 'separator' => 'before',
	897	+ 'selectors' => [
	898	+ '{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}s',
	899	+ ],
	900	+ ]
	901	+ );
	902	+
	903	+ $this->end_controls_tab();
	904	+
	905	+ $this->end_controls_tabs();
	906	+
	907	+ $this->end_controls_section();
	908	+
	909	+ $this->start_controls_section(
	910	+ '_section_border',
	911	+ [
	912	+ 'label' => esc_html__( 'Border', 'elementor' ),
	913	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	914	+ ]
	915	+ );
	916	+
	917	+ $this->start_controls_tabs( '_tabs_border' );
	918	+
	919	+ $this->start_controls_tab(
	920	+ '_tab_border_normal',
	921	+ [
	922	+ 'label' => esc_html__( 'Normal', 'elementor' ),
	923	+ ]
	924	+ );
	925	+
	926	+ $this->add_group_control(
	927	+ Group_Control_Border::get_type(),
	928	+ [
	929	+ 'name' => '_border',
	930	+ 'selector' => '{{WRAPPER}} > .elementor-widget-container',
	931	+ ]
	932	+ );
	933	+
	934	+ $this->add_responsive_control(
	935	+ '_border_radius',
	936	+ [
	937	+ 'label' => esc_html__( 'Border Radius', 'elementor' ),
	938	+ 'type' => Controls_Manager::DIMENSIONS,
	939	+ 'size_units' => [ 'px', '%' ],
	940	+ 'selectors' => [
	941	+ '{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	942	+ ],
	943	+ ]
	944	+ );
	945	+
	946	+ $this->add_group_control(
	947	+ Group_Control_Box_Shadow::get_type(),
	948	+ [
	949	+ 'name' => '_box_shadow',
	950	+ 'selector' => '{{WRAPPER}} > .elementor-widget-container',
	951	+ ]
	952	+ );
	953	+
	954	+ $this->end_controls_tab();
	955	+
	956	+ $this->start_controls_tab(
	957	+ '_tab_border_hover',
	958	+ [
	959	+ 'label' => esc_html__( 'Hover', 'elementor' ),
	960	+ ]
	961	+ );
	962	+
	963	+ $this->add_group_control(
	964	+ Group_Control_Border::get_type(),
	965	+ [
	966	+ 'name' => '_border_hover',
	967	+ 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
	968	+ ]
	969	+ );
	970	+
	971	+ $this->add_responsive_control(
	972	+ '_border_radius_hover',
	973	+ [
	974	+ 'label' => esc_html__( 'Border Radius', 'elementor' ),
	975	+ 'type' => Controls_Manager::DIMENSIONS,
	976	+ 'size_units' => [ 'px', '%' ],
	977	+ 'selectors' => [
	978	+ '{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	979	+ ],
	980	+ ]
	981	+ );
	982	+
	983	+ $this->add_group_control(
	984	+ Group_Control_Box_Shadow::get_type(),
	985	+ [
	986	+ 'name' => '_box_shadow_hover',
	987	+ 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
	988	+ ]
	989	+ );
	990	+
	991	+ $this->add_control(
	992	+ '_border_hover_transition',
	993	+ [
	994	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
	995	+ 'type' => Controls_Manager::SLIDER,
	996	+ 'separator' => 'before',
	997	+ 'range' => [
	998	+ 'px' => [
	999	+ 'max' => 3,
	1000	+ 'step' => 0.1,
	1001	+ ],
	1002	+ ],
	1003	+ 'selectors' => [
	1004	+ '{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
	1005	+ ],
	1006	+ ]
	1007	+ );
	1008	+
	1009	+ $this->end_controls_tab();
	1010	+
	1011	+ $this->end_controls_tabs();
	1012	+
	1013	+ $this->end_controls_section();
	1014	+
	1015	+ $this->start_controls_section(
	1016	+ '_section_masking',
	1017	+ [
	1018	+ 'label' => esc_html__( 'Mask', 'elementor' ),
	1019	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	1020	+ ]
	1021	+ );
	1022	+
	1023	+ $this->add_control(
	1024	+ '_mask_switch',
	1025	+ [
	1026	+ 'label' => esc_html__( 'Mask', 'elementor' ),
	1027	+ 'type' => Controls_Manager::SWITCHER,
	1028	+ 'label_on' => esc_html__( 'On', 'elementor' ),
	1029	+ 'label_off' => esc_html__( 'Off', 'elementor' ),
	1030	+ 'default' => '',
	1031	+ ]
	1032	+ );
	1033	+
	1034	+ $this->add_control( '_mask_shape', [
	1035	+ 'label' => esc_html__( 'Shape', 'elementor' ),
	1036	+ 'type' => Controls_Manager::SELECT,
	1037	+ 'options' => $this->get_shapes(),
	1038	+ 'default' => 'circle',
	1039	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
	1040	+ 'condition' => [
	1041	+ '_mask_switch!' => '',
	1042	+ ],
	1043	+ ] );
	1044	+
	1045	+ $this->add_control(
	1046	+ '_mask_image',
	1047	+ [
	1048	+ 'label' => esc_html__( 'Image', 'elementor' ),
	1049	+ 'type' => Controls_Manager::MEDIA,
	1050	+ 'media_type' => 'image',
	1051	+ 'should_include_svg_inline_option' => true,
	1052	+ 'library_type' => 'image/svg+xml',
	1053	+ 'dynamic' => [
	1054	+ 'active' => true,
	1055	+ ],
	1056	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
	1057	+ 'condition' => [
	1058	+ '_mask_switch!' => '',
	1059	+ '_mask_shape' => 'custom',
	1060	+ ],
	1061	+ ]
	1062	+ );
	1063	+
	1064	+ $this->add_control(
	1065	+ '_mask_notice',
	1066	+ [
	1067	+ 'type' => Controls_Manager::HIDDEN,
	1068	+ 'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
	1069	+ '<br>' .
	1070	+ sprintf(
	1071	+ /* translators: 1: Link open tag, 2: Link close tag. */
	1072	+ esc_html__( 'Explore additional Premium Shape packs and use them in your site. %1$sLearn More%2$s', 'elementor' ),
	1073	+ '<a target="_blank" href="https://go.elementor.com/mask-control">',
	1074	+ '</a>'
	1075	+ ),
	1076	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
	1077	+ 'condition' => [
	1078	+ '_mask_switch!' => '',
	1079	+ ],
	1080	+ ]
	1081	+ );
	1082	+
	1083	+ $this->add_responsive_control(
	1084	+ '_mask_size',
	1085	+ [
	1086	+ 'label' => esc_html__( 'Size', 'elementor' ),
	1087	+ 'type' => Controls_Manager::SELECT,
	1088	+ 'options' => [
	1089	+ 'contain' => esc_html__( 'Fit', 'elementor' ),
	1090	+ 'cover' => esc_html__( 'Fill', 'elementor' ),
	1091	+ 'custom' => esc_html__( 'Custom', 'elementor' ),
	1092	+ ],
	1093	+ 'default' => 'contain',
	1094	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ),
	1095	+ 'condition' => [
	1096	+ '_mask_switch!' => '',
	1097	+ ],
	1098	+ ]
	1099	+ );
	1100	+
	1101	+ $this->add_responsive_control(
	1102	+ '_mask_size_scale',
	1103	+ [
	1104	+ 'label' => esc_html__( 'Scale', 'elementor' ),
	1105	+ 'type' => Controls_Manager::SLIDER,
	1106	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
	1107	+ 'range' => [
	1108	+ 'px' => [
	1109	+ 'min' => 0,
	1110	+ 'max' => 500,
	1111	+ ],
	1112	+ 'em' => [
	1113	+ 'min' => 0,
	1114	+ 'max' => 100,
	1115	+ ],
	1116	+ '%' => [
	1117	+ 'min' => 0,
	1118	+ 'max' => 200,
	1119	+ ],
	1120	+ 'vw' => [
	1121	+ 'min' => 0,
	1122	+ 'max' => 100,
	1123	+ ],
	1124	+ ],
	1125	+ 'default' => [
	1126	+ 'unit' => '%',
	1127	+ 'size' => 100,
	1128	+ ],
	1129	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ),
	1130	+ 'condition' => [
	1131	+ '_mask_switch!' => '',
	1132	+ '_mask_size' => 'custom',
	1133	+ ],
	1134	+ ]
	1135	+ );
	1136	+
	1137	+ $this->add_responsive_control(
	1138	+ '_mask_position',
	1139	+ [
	1140	+ 'label' => esc_html__( 'Position', 'elementor' ),
	1141	+ 'type' => Controls_Manager::SELECT,
	1142	+ 'options' => [
	1143	+ 'center center' => esc_html__( 'Center Center', 'elementor' ),
	1144	+ 'center left' => esc_html__( 'Center Left', 'elementor' ),
	1145	+ 'center right' => esc_html__( 'Center Right', 'elementor' ),
	1146	+ 'top center' => esc_html__( 'Top Center', 'elementor' ),
	1147	+ 'top left' => esc_html__( 'Top Left', 'elementor' ),
	1148	+ 'top right' => esc_html__( 'Top Right', 'elementor' ),
	1149	+ 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
	1150	+ 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
	1151	+ 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
	1152	+ 'custom' => esc_html__( 'Custom', 'elementor' ),
	1153	+ ],
	1154	+ 'default' => 'center center',
	1155	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ),
	1156	+ 'condition' => [
	1157	+ '_mask_switch!' => '',
	1158	+ ],
	1159	+ ]
	1160	+ );
	1161	+
	1162	+ $this->add_responsive_control(
	1163	+ '_mask_position_x',
	1164	+ [
	1165	+ 'label' => esc_html__( 'X Position', 'elementor' ),
	1166	+ 'type' => Controls_Manager::SLIDER,
	1167	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
	1168	+ 'range' => [
	1169	+ 'px' => [
	1170	+ 'min' => -500,
	1171	+ 'max' => 500,
	1172	+ ],
	1173	+ 'em' => [
	1174	+ 'min' => -100,
	1175	+ 'max' => 100,
	1176	+ ],
	1177	+ '%' => [
	1178	+ 'min' => -100,
	1179	+ 'max' => 100,
	1180	+ ],
	1181	+ 'vw' => [
	1182	+ 'min' => -100,
	1183	+ 'max' => 100,
	1184	+ ],
	1185	+ ],
	1186	+ 'default' => [
	1187	+ 'unit' => '%',
	1188	+ 'size' => 0,
	1189	+ ],
	1190	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ),
	1191	+ 'condition' => [
	1192	+ '_mask_switch!' => '',
	1193	+ '_mask_position' => 'custom',
	1194	+ ],
	1195	+ ]
	1196	+ );
	1197	+
	1198	+ $this->add_responsive_control(
	1199	+ '_mask_position_y',
	1200	+ [
	1201	+ 'label' => esc_html__( 'Y Position', 'elementor' ),
	1202	+ 'type' => Controls_Manager::SLIDER,
	1203	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
	1204	+ 'range' => [
	1205	+ 'px' => [
	1206	+ 'min' => -500,
	1207	+ 'max' => 500,
	1208	+ ],
	1209	+ 'em' => [
	1210	+ 'min' => -100,
	1211	+ 'max' => 100,
	1212	+ ],
	1213	+ '%' => [
	1214	+ 'min' => -100,
	1215	+ 'max' => 100,
	1216	+ ],
	1217	+ 'vw' => [
	1218	+ 'min' => -100,
	1219	+ 'max' => 100,
	1220	+ ],
	1221	+ ],
	1222	+ 'default' => [
	1223	+ 'unit' => '%',
	1224	+ 'size' => 0,
	1225	+ ],
	1226	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ),
	1227	+ 'condition' => [
	1228	+ '_mask_switch!' => '',
	1229	+ '_mask_position' => 'custom',
	1230	+ ],
	1231	+ ]
	1232	+ );
	1233	+
	1234	+ $this->add_responsive_control(
	1235	+ '_mask_repeat',
	1236	+ [
	1237	+ 'label' => esc_html__( 'Repeat', 'elementor' ),
	1238	+ 'type' => Controls_Manager::SELECT,
	1239	+ 'options' => [
	1240	+ 'no-repeat' => esc_html__( 'No-Repeat', 'elementor' ),
	1241	+ 'repeat' => esc_html__( 'Repeat', 'elementor' ),
	1242	+ 'repeat-x' => esc_html__( 'Repeat-X', 'elementor' ),
	1243	+ 'repeat-Y' => esc_html__( 'Repeat-Y', 'elementor' ),
	1244	+ 'round' => esc_html__( 'Round', 'elementor' ),
	1245	+ 'space' => esc_html__( 'Space', 'elementor' ),
	1246	+ ],
	1247	+ 'default' => 'no-repeat',
	1248	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ),
	1249	+ 'condition' => [
	1250	+ '_mask_switch!' => '',
	1251	+ '_mask_size!' => 'cover',
	1252	+ ],
	1253	+ ]
	1254	+ );
	1255	+
	1256	+ $this->end_controls_section();
	1257	+
	1258	+ $this->start_controls_section(
	1259	+ '_section_position',
	1260	+ [
	1261	+ 'label' => esc_html__( 'Positioning', 'elementor' ),
	1262	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	1263	+ ]
	1264	+ );
	1265	+
	1266	+ $this->add_responsive_control(
	1267	+ '_element_width',
	1268	+ [
	1269	+ 'label' => esc_html__( 'Width', 'elementor' ),
	1270	+ 'type' => Controls_Manager::SELECT,
	1271	+ 'default' => '',
	1272	+ 'options' => [
	1273	+ '' => esc_html__( 'Default', 'elementor' ),
	1274	+ 'inherit' => esc_html__( 'Full Width', 'elementor' ) . ' (100%)',
	1275	+ 'auto' => esc_html__( 'Inline', 'elementor' ) . ' (auto)',
	1276	+ 'initial' => esc_html__( 'Custom', 'elementor' ),
	1277	+ ],
	1278	+ 'selectors_dictionary' => [
	1279	+ 'inherit' => '100%',
	1280	+ ],
	1281	+ 'prefix_class' => 'elementor-widget%s__width-',
	1282	+ 'selectors' => [
	1283	+ '{{WRAPPER}}' => 'width: {{VALUE}}; max-width: {{VALUE}}',
	1284	+ ],
	1285	+ ]
	1286	+ );
	1287	+
	1288	+ $this->add_responsive_control(
	1289	+ '_element_custom_width',
	1290	+ [
	1291	+ 'label' => esc_html__( 'Custom Width', 'elementor' ),
	1292	+ 'type' => Controls_Manager::SLIDER,
	1293	+ 'range' => [
	1294	+ 'px' => [
	1295	+ 'max' => 1000,
	1296	+ 'step' => 1,
	1297	+ ],
	1298	+ '%' => [
	1299	+ 'max' => 100,
	1300	+ 'step' => 1,
	1301	+ ],
	1302	+ ],
	1303	+ 'condition' => [
	1304	+ '_element_width' => 'initial',
	1305	+ ],
	1306	+ 'device_args' => $this->get_responsive_device_args( [
	1307	+ 'condition' => [
	1308	+ '_element_width_{{DEVICE}}' => [ 'initial' ],
	1309	+ ],
	1310	+ ] ),
	1311	+ 'size_units' => [ 'px', '%', 'vw' ],
	1312	+ 'selectors' => [
	1313	+ '{{WRAPPER}}' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}}',
	1314	+ ],
	1315	+ ]
	1316	+ );
	1317	+
	1318	+ $this->add_responsive_control(
	1319	+ '_element_vertical_align',
	1320	+ [
	1321	+ 'label' => esc_html__( 'Vertical Align', 'elementor' ),
	1322	+ 'type' => Controls_Manager::CHOOSE,
	1323	+ 'options' => [
	1324	+ 'flex-start' => [
	1325	+ 'title' => esc_html__( 'Start', 'elementor' ),
	1326	+ 'icon' => 'eicon-v-align-top',
	1327	+ ],
	1328	+ 'center' => [
	1329	+ 'title' => esc_html__( 'Center', 'elementor' ),
	1330	+ 'icon' => 'eicon-v-align-middle',
	1331	+ ],
	1332	+ 'flex-end' => [
	1333	+ 'title' => esc_html__( 'End', 'elementor' ),
	1334	+ 'icon' => 'eicon-v-align-bottom',
	1335	+ ],
	1336	+ ],
	1337	+ 'condition' => [
	1338	+ '_element_width!' => '',
	1339	+ '_position' => '',
	1340	+ ],
	1341	+ 'selectors' => [
	1342	+ '{{WRAPPER}}' => 'align-self: {{VALUE}}',
	1343	+ ],
	1344	+ ]
	1345	+ );
	1346	+
	1347	+ $this->add_control(
	1348	+ '_position_description',
	1349	+ [
	1350	+ 'raw' => '<strong>' . esc_html__( 'Please note!', 'elementor' ) . '</strong> ' . esc_html__( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ),
	1351	+ 'type' => Controls_Manager::RAW_HTML,
	1352	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
	1353	+ 'render_type' => 'ui',
	1354	+ 'condition' => [
	1355	+ '_position!' => '',
	1356	+ ],
	1357	+ ]
	1358	+ );
	1359	+
	1360	+ $this->add_control(
	1361	+ '_position',
	1362	+ [
	1363	+ 'label' => esc_html__( 'Position', 'elementor' ),
	1364	+ 'type' => Controls_Manager::SELECT,
	1365	+ 'default' => '',
	1366	+ 'options' => [
	1367	+ '' => esc_html__( 'Default', 'elementor' ),
	1368	+ 'absolute' => esc_html__( 'Absolute', 'elementor' ),
	1369	+ 'fixed' => esc_html__( 'Fixed', 'elementor' ),
	1370	+ ],
	1371	+ 'prefix_class' => 'elementor-',
	1372	+ 'frontend_available' => true,
	1373	+ ]
	1374	+ );
	1375	+
	1376	+ $start = is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' );
	1377	+ $end = ! is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' );
	1378	+
	1379	+ $this->add_control(
	1380	+ '_offset_orientation_h',
	1381	+ [
	1382	+ 'label' => esc_html__( 'Horizontal Orientation', 'elementor' ),
	1383	+ 'type' => Controls_Manager::CHOOSE,
	1384	+ 'toggle' => false,
	1385	+ 'default' => 'start',
	1386	+ 'options' => [
	1387	+ 'start' => [
	1388	+ 'title' => $start,
	1389	+ 'icon' => 'eicon-h-align-left',
	1390	+ ],
	1391	+ 'end' => [
	1392	+ 'title' => $end,
	1393	+ 'icon' => 'eicon-h-align-right',
	1394	+ ],
	1395	+ ],
	1396	+ 'classes' => 'elementor-control-start-end',
	1397	+ 'render_type' => 'ui',
	1398	+ 'condition' => [
	1399	+ '_position!' => '',
	1400	+ ],
	1401	+ ]
	1402	+ );
	1403	+
	1404	+ $this->add_responsive_control(
	1405	+ '_offset_x',
	1406	+ [
	1407	+ 'label' => esc_html__( 'Offset', 'elementor' ),
	1408	+ 'type' => Controls_Manager::SLIDER,
	1409	+ 'range' => [
	1410	+ 'px' => [
	1411	+ 'min' => -1000,
	1412	+ 'max' => 1000,
	1413	+ 'step' => 1,
	1414	+ ],
	1415	+ '%' => [
	1416	+ 'min' => -200,
	1417	+ 'max' => 200,
	1418	+ ],
	1419	+ 'vw' => [
	1420	+ 'min' => -200,
	1421	+ 'max' => 200,
	1422	+ ],
	1423	+ 'vh' => [
	1424	+ 'min' => -200,
	1425	+ 'max' => 200,
	1426	+ ],
	1427	+ ],
	1428	+ 'default' => [
	1429	+ 'size' => '0',
	1430	+ ],
	1431	+ 'size_units' => [ 'px', '%', 'vw', 'vh' ],
	1432	+ 'selectors' => [
	1433	+ 'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
	1434	+ 'body.rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
	1435	+ ],
	1436	+ 'condition' => [
	1437	+ '_offset_orientation_h!' => 'end',
	1438	+ '_position!' => '',
	1439	+ ],
	1440	+ ]
	1441	+ );
	1442	+
	1443	+ $this->add_responsive_control(
	1444	+ '_offset_x_end',
	1445	+ [
	1446	+ 'label' => esc_html__( 'Offset', 'elementor' ),
	1447	+ 'type' => Controls_Manager::SLIDER,
	1448	+ 'range' => [
	1449	+ 'px' => [
	1450	+ 'min' => -1000,
	1451	+ 'max' => 1000,
	1452	+ 'step' => 0.1,
	1453	+ ],
	1454	+ '%' => [
	1455	+ 'min' => -200,
	1456	+ 'max' => 200,
	1457	+ ],
	1458	+ 'vw' => [
	1459	+ 'min' => -200,
	1460	+ 'max' => 200,
	1461	+ ],
	1462	+ 'vh' => [
	1463	+ 'min' => -200,
	1464	+ 'max' => 200,
	1465	+ ],
	1466	+ ],
	1467	+ 'default' => [
	1468	+ 'size' => '0',
	1469	+ ],
	1470	+ 'size_units' => [ 'px', '%', 'vw', 'vh' ],
	1471	+ 'selectors' => [
	1472	+ 'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
	1473	+ 'body.rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
	1474	+ ],
	1475	+ 'condition' => [
	1476	+ '_offset_orientation_h' => 'end',
	1477	+ '_position!' => '',
	1478	+ ],
	1479	+ ]
	1480	+ );
	1481	+
	1482	+ $this->add_control(
	1483	+ '_offset_orientation_v',
	1484	+ [
	1485	+ 'label' => esc_html__( 'Vertical Orientation', 'elementor' ),
	1486	+ 'type' => Controls_Manager::CHOOSE,
	1487	+ 'toggle' => false,
	1488	+ 'default' => 'start',
	1489	+ 'options' => [
	1490	+ 'start' => [
	1491	+ 'title' => esc_html__( 'Top', 'elementor' ),
	1492	+ 'icon' => 'eicon-v-align-top',
	1493	+ ],
	1494	+ 'end' => [
	1495	+ 'title' => esc_html__( 'Bottom', 'elementor' ),
	1496	+ 'icon' => 'eicon-v-align-bottom',
	1497	+ ],
	1498	+ ],
	1499	+ 'render_type' => 'ui',
	1500	+ 'condition' => [
	1501	+ '_position!' => '',
	1502	+ ],
	1503	+ ]
	1504	+ );
	1505	+
	1506	+ $this->add_responsive_control(
	1507	+ '_offset_y',
	1508	+ [
	1509	+ 'label' => esc_html__( 'Offset', 'elementor' ),
	1510	+ 'type' => Controls_Manager::SLIDER,
	1511	+ 'range' => [
	1512	+ 'px' => [
	1513	+ 'min' => -1000,
	1514	+ 'max' => 1000,
	1515	+ 'step' => 1,
	1516	+ ],
	1517	+ '%' => [
	1518	+ 'min' => -200,
	1519	+ 'max' => 200,
	1520	+ ],
	1521	+ 'vh' => [
	1522	+ 'min' => -200,
	1523	+ 'max' => 200,
	1524	+ ],
	1525	+ 'vw' => [
	1526	+ 'min' => -200,
	1527	+ 'max' => 200,
	1528	+ ],
	1529	+ ],
	1530	+ 'size_units' => [ 'px', '%', 'vh', 'vw' ],
	1531	+ 'default' => [
	1532	+ 'size' => '0',
	1533	+ ],
	1534	+ 'selectors' => [
	1535	+ '{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
	1536	+ ],
	1537	+ 'condition' => [
	1538	+ '_offset_orientation_v!' => 'end',
	1539	+ '_position!' => '',
	1540	+ ],
	1541	+ ]
	1542	+ );
	1543	+
	1544	+ $this->add_responsive_control(
	1545	+ '_offset_y_end',
	1546	+ [
	1547	+ 'label' => esc_html__( 'Offset', 'elementor' ),
	1548	+ 'type' => Controls_Manager::SLIDER,
	1549	+ 'range' => [
	1550	+ 'px' => [
	1551	+ 'min' => -1000,
	1552	+ 'max' => 1000,
	1553	+ 'step' => 1,
	1554	+ ],
	1555	+ '%' => [
	1556	+ 'min' => -200,
	1557	+ 'max' => 200,
	1558	+ ],
	1559	+ 'vh' => [
	1560	+ 'min' => -200,
	1561	+ 'max' => 200,
	1562	+ ],
	1563	+ 'vw' => [
	1564	+ 'min' => -200,
	1565	+ 'max' => 200,
	1566	+ ],
	1567	+ ],
	1568	+ 'size_units' => [ 'px', '%', 'vh', 'vw' ],
	1569	+ 'default' => [
	1570	+ 'size' => '0',
	1571	+ ],
	1572	+ 'selectors' => [
	1573	+ '{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
	1574	+ ],
	1575	+ 'condition' => [
	1576	+ '_offset_orientation_v' => 'end',
	1577	+ '_position!' => '',
	1578	+ ],
	1579	+ ]
	1580	+ );
	1581	+
	1582	+ $this->end_controls_section();
	1583	+
	1584	+ $this->start_controls_section(
	1585	+ '_section_responsive',
	1586	+ [
	1587	+ 'label' => esc_html__( 'Responsive', 'elementor' ),
	1588	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	1589	+ ]
	1590	+ );
	1591	+
	1592	+ $this->add_control(
	1593	+ 'responsive_description',
	1594	+ [
	1595	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
	1596	+ 'type' => Controls_Manager::RAW_HTML,
	1597	+ 'content_classes' => 'elementor-descriptor',
	1598	+ ]
	1599	+ );
	1600	+
	1601	+ $this->add_hidden_device_controls();
	1602	+
	1603	+ $this->end_controls_section();
	1604	+
	1605	+ Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
	1606	+
	1607	+ Plugin::$instance->controls_manager->add_custom_css_controls( $this );
12	1608	}
13	1609	}