← All changes | includes/widgets/common.php +1510 -1 4.2.3 → 3.5.0-dev9 View file →

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