← All changes | includes/widgets/common.php +1732 -1 4.1.0 → 3.10.0-dev1 View file →

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