easy-elements / widgets / icon-box / icon.php

icon.php in Easy Elements for Elementor – Addons & Website Templates 1.2.1, at widgets/icon-box/icon.php

1,563 lines 59.4 KB

Raw Download Zip

1	<?php
2	use Elementor\Utils;
3	use Elementor\Controls_Manager;
4	use Elementor\Responsive_Control;
5	use Elementor\Group_Control_Image_Size;
6
7	defined( 'ABSPATH' ) \|\| die();
8	class Easyel_Icon_Box__Widget extends \Elementor\Widget_Base {
9
10	public function get_style_depends() {
11	$handle = 'eel-icon-box-style';
12	$css_path = plugin_dir_path( __FILE__ ) . 'css/icon-box.min.css';
13
14	if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
15	wp_register_style( $handle, plugins_url( 'css/icon-box.min.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : EASYELEMENTS_VER );
16	}
17	return [ $handle ];
18	}
19
20	public function get_name() {
21	return 'eel-icon-box';
22	}
23
24	public function get_title() {
25	return esc_html__( 'Info Box', 'easy-elements' );
26	}
27
28	public function get_icon() {
29	return 'easyicon easyelIcon-iconbox';
30	}
31
32	public function get_categories() {
33	return [ 'easyelements_category' ];
34	}
35
36	public function get_keywords() {
37	return [ 'box', 'sevice', 'icon', 'icon-box', 'text' ];
38	}
39
40	protected function register_controls() {
41	$this->start_controls_section(
42	'_section_logo',
43	[
44	'label' => esc_html__( 'Icon Box Settings', 'easy-elements' ),
45	'tab' => Controls_Manager::TAB_CONTENT,
46	]
47	);
48
49
50	$this->add_control(
51	'icon_type',
52	[
53	'label' => esc_html__( 'Type', 'easy-elements' ),
54	'type' => \Elementor\Controls_Manager::CHOOSE,
55	'options' => [
56	'icon' => [
57	'title' => esc_html__( 'Icon', 'easy-elements' ),
58	'icon' => 'eicon-star',
59	],
60	'image' => [
61	'title' => esc_html__( 'Image', 'easy-elements' ),
62	'icon' => 'eicon-image-bold',
63	],
64	],
65	'default' => 'icon',
66	'toggle' => false,
67	]
68	);
69
70	$this->add_control(
71	'icon',
72	[
73	'label' => esc_html__( 'Icon', 'easy-elements' ),
74	'type' => \Elementor\Controls_Manager::ICONS,
75	'label_block' => true,
76	'default' => [
77	'value' => 'fas fa-star',
78	'library' => 'fa-solid',
79	],
80	'condition' => [
81	'icon_type' => 'icon',
82	],
83	]
84	);
85
86	$this->add_control(
87	'icon_image',
88	[
89	'label' => esc_html__( 'Upload Image', 'easy-elements' ),
90	'type' => \Elementor\Controls_Manager::MEDIA,
91	'default' => [
92	'url' => \Elementor\Utils::get_placeholder_image_src(),
93	],
94	'condition' => [
95	'icon_type' => 'image',
96	],
97	]
98	);
99
100
101	$this->add_control(
102	'number_title',
103	[
104	'label' => esc_html__( 'Number', 'easy-elements' ),
105	'type' => \Elementor\Controls_Manager::TEXT,
106	'default' => '',
107	'label_block' => true,
108	]
109	);
110
111	$this->add_control(
112	'number_gradeint',
113	[
114	'label' => esc_html__('Number Show Gradient', 'easy-elements'),
115	'type' => \Elementor\Controls_Manager::SWITCHER,
116	'label_on' => esc_html__('Show', 'easy-elements'),
117	'label_off' => esc_html__('Hide', 'easy-elements'),
118	'return_value' => 'yes',
119	'default' => '',
120	'condition' => [
121	'number_title!' => ''
122	],
123	]
124	);
125
126	$this->add_control(
127	'procs_title',
128	[
129	'label' => esc_html__( 'Title', 'easy-elements' ),
130	'type' => \Elementor\Controls_Manager::TEXT,
131	'default' => esc_html__( 'Manufacturing Industrial', 'easy-elements' ),
132	'label_block' => true,
133	]
134	);
135
136	$this->add_control(
137	'_description',
138	[
139	'label' => esc_html__( 'Description', 'easy-elements' ),
140	'type' => \Elementor\Controls_Manager::TEXTAREA,
141	'default' => esc_html__( 'Optimizing production and supply chain operations and generational transitions', 'easy-elements' ),
142	]
143	);
144
145	$this->add_control(
146	'link',
147	[
148	'label' => esc_html__('Link', 'easy-elements'),
149	'type' => Controls_Manager::URL,
150	'placeholder' => 'https://example.com',
151	]
152	);
153
154
155	$this->add_control(
156	'show_read_more',
157	[
158	'label' => esc_html__('Show Read More', 'easy-elements'),
159	'type' => \Elementor\Controls_Manager::SWITCHER,
160	'label_on' => esc_html__('Show', 'easy-elements'),
161	'label_off' => esc_html__('Hide', 'easy-elements'),
162	'return_value' => 'yes',
163	'default' => '',
164	]
165	);
166
167	$this->add_control(
168	'read_more_type',
169	[
170	'label' => esc_html__('Read More Type', 'easy-elements'),
171	'type' => \Elementor\Controls_Manager::SELECT,
172	'options' => [
173	'read_text' => esc_html__('Text', 'easy-elements'),
174	'read_icon' => esc_html__('Icon', 'easy-elements'),
175	'read_icon_to_text' => esc_html__('Icon Hover to Text Show', 'easy-elements'),
176	],
177	'default' => 'read_text',
178	'condition' => [
179	'show_read_more' => 'yes',
180	],
181	]
182	);
183
184	$this->add_control(
185	'read_more_text',
186	[
187	'label' => esc_html__('Read More Text', 'easy-elements'),
188	'type' => \Elementor\Controls_Manager::TEXT,
189	'default' => esc_html__('Read More', 'easy-elements'),
190	'condition' => [
191	'show_read_more' => 'yes',
192	'read_more_type' => ['read_text','read_icon_to_text'],
193	],
194	]
195	);
196
197	$this->add_control(
198	'read_more_icon',
199	[
200	'label' => esc_html__('Read More Icon', 'easy-elements'),
201	'type' => \Elementor\Controls_Manager::ICONS,
202	'condition' => [
203	'show_read_more' => 'yes',
204	'read_more_type' => 'read_icon',
205	],
206	]
207	);
208
209	$this->add_control(
210	'read_more_text_icon',
211	[
212	'label' => esc_html__('Text Button Icon', 'easy-elements'),
213	'type' => \Elementor\Controls_Manager::ICONS,
214	'condition' => [
215	'show_read_more' => 'yes',
216	'read_more_type' => ['read_text','read_icon_to_text'],
217	'read_more_text_icon_show' => 'yes',
218	],
219	]
220	);
221
222	$this->add_control(
223	'read_more_text_icon_show',
224	[
225	'label' => esc_html__('Show Icon Next to Text', 'easy-elements'),
226	'type' => \Elementor\Controls_Manager::SWITCHER,
227	'label_on' => esc_html__('Show', 'easy-elements'),
228	'label_off' => esc_html__('Hide', 'easy-elements'),
229	'return_value' => 'yes',
230	'default' => 'yes',
231	'condition' => [
232	'show_read_more' => 'yes',
233	'read_more_type' => ['read_text','read_icon_to_text'],
234	],
235	]
236	);
237
238	$this->add_control(
239	'title_tag',
240	[
241	'label' => esc_html__( 'Title HTML Tag', 'easy-elements' ),
242	'type' => \Elementor\Controls_Manager::SELECT,
243	'default' => 'h3',
244	'options' => [
245	'h1' => 'H1',
246	'h2' => 'H2',
247	'h3' => 'H3',
248	'h4' => 'H4',
249	'h5' => 'H5',
250	'h6' => 'H6',
251	'div' => 'div',
252	'span' => 'span',
253	'p' => 'p',
254	],
255	]
256	);
257
258	$this->end_controls_section();
259
260	$this->start_controls_section(
261	'section_styles_item',
262	[
263	'label' => esc_html__( 'Item', 'easy-elements' ),
264	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
265	]
266	);
267
268	$this->add_control(
269	'icon_direction',
270	[
271	'label' => esc_html__( 'Direction', 'easy-elements' ),
272	'type' => \Elementor\Controls_Manager::CHOOSE,
273	'default' => 'top',
274	'options' => [
275	'left' => [
276	'title' => esc_html__( 'Left', 'easy-elements' ),
277	'icon' => 'eicon-h-align-left',
278	],
279	'top' => [
280	'title' => esc_html__( 'Top', 'easy-elements' ),
281	'icon' => 'eicon-v-align-top',
282	],
283	'right' => [
284	'title' => esc_html__( 'Right', 'easy-elements' ),
285	'icon' => 'eicon-h-align-right',
286	],
287	],
288	'toggle' => false,
289	]
290	);
291
292	// Vertical Alignment Control
293	$this->add_responsive_control(
294	'icon_vertical_alignment',
295	[
296	'label' => esc_html__( 'Vertical Alignment', 'easy-elements' ),
297	'type' => \Elementor\Controls_Manager::CHOOSE,
298	'default' => 'center',
299	'options' => [
300	'flex-start' => [
301	'title' => esc_html__( 'Top', 'easy-elements' ),
302	'icon' => 'eicon-v-align-top',
303	],
304	'center' => [
305	'title' => esc_html__( 'Middle', 'easy-elements' ),
306	'icon' => 'eicon-v-align-middle',
307	],
308	'flex-end' => [
309	'title' => esc_html__( 'Bottom', 'easy-elements' ),
310	'icon' => 'eicon-v-align-bottom',
311	],
312	],
313	'selectors' => [
314	'{{WRAPPER}} .ee--icon-box.right, {{WRAPPER}} .ee--icon-box.left' => 'align-items: {{VALUE}};',
315	],
316	'condition' => [
317	'icon_direction' => ['left', 'right'],
318	],
319	]
320	);
321
322	$this->add_responsive_control(
323	'_text_align',
324	[
325	'label' => esc_html__( 'Alignment', 'easy-elements' ),
326	'type' => \Elementor\Controls_Manager::CHOOSE,
327	'options' => [
328	'left' => [
329	'title' => esc_html__( 'Left', 'easy-elements' ),
330	'icon' => 'eicon-text-align-left',
331	],
332	'center' => [
333	'title' => esc_html__( 'Center', 'easy-elements' ),
334	'icon' => 'eicon-text-align-center',
335	],
336	'right' => [
337	'title' => esc_html__( 'Right', 'easy-elements' ),
338	'icon' => 'eicon-text-align-right',
339	],
340	],
341	'default' => 'center',
342	'selectors' => [
343	'{{WRAPPER}} .ee--icon-box, {{WRAPPER}} .eel-pro-number' => 'text-align: {{VALUE}};',
344	],
345	]
346	);
347	$this->add_responsive_control('item_spacing', [
348	'label' => __('Item Spacing', 'easy-elements'),
349	'type' => \Elementor\Controls_Manager::SLIDER,
350	'condition' => [
351	'icon_direction' => ['left', 'right'],
352	],
353	'selectors' => [
354	'{{WRAPPER}} .ee--icon-box.right, {{WRAPPER}} .ee--icon-box.left' => 'gap: {{SIZE}}px;',
355	],
356	]);
357
358	$this->start_controls_tabs('item_background_tabs');
359
360	$this->start_controls_tab('item_background_normal', [
361	'label' => __('Normal', 'easy-elements'),
362	]);
363
364	$this->add_group_control(
365	\Elementor\Group_Control_Background::get_type(),
366	[
367	'name' => 'item_normal_bg',
368	'label' => __('Background', 'easy-elements'),
369	'types' => ['classic', 'gradient'],
370	'selector' => '{{WRAPPER}} .ee--icon-box',
371	]
372	);
373
374	$this->add_group_control(
375	\Elementor\Group_Control_Border::get_type(),
376	[
377	'name' => 'item_normal_border',
378	'label' => __('Border', 'easy-elements'),
379	'selector' => '{{WRAPPER}} .ee--icon-box',
380	]
381	);
382
383	$this->add_group_control(
384	\Elementor\Group_Control_Box_Shadow::get_type(),
385	[
386	'name' => 'item_normal_box_shadow',
387	'label' => __('Box Shadow', 'easy-elements'),
388	'selector' => '{{WRAPPER}} .ee--icon-box',
389	]
390	);
391
392	$this->add_responsive_control(
393	'item_normal_border_radius',
394	[
395	'label' => __('Border Radius', 'easy-elements'),
396	'type' => \Elementor\Controls_Manager::DIMENSIONS,
397	'size_units' => ['px', '%', 'em'],
398	'selectors' => [
399	'{{WRAPPER}} .ee--icon-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
400	'{{WRAPPER}} .ee--icon-box::before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
401	],
402	]
403	);
404
405	$this->add_responsive_control(
406	'item_normal_padding',
407	[
408	'label' => __('Padding', 'easy-elements'),
409	'type' => \Elementor\Controls_Manager::DIMENSIONS,
410	'size_units' => ['px', 'em', '%'],
411	'selectors' => [
412	'{{WRAPPER}} .ee--icon-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
413	],
414	]
415	);
416
417	$this->add_responsive_control(
418	'item_normal_margin',
419	[
420	'label' => __('Margin', 'easy-elements'),
421	'type' => \Elementor\Controls_Manager::DIMENSIONS,
422	'size_units' => ['px', 'em', '%'],
423	'selectors' => [
424	'{{WRAPPER}} .ee--icon-box' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
425	],
426	]
427	);
428
429	$this->end_controls_tab();
430
431	$this->start_controls_tab('item_background_hover', [
432	'label' => __('Hover', 'easy-elements'),
433	]);
434
435	$this->add_control(
436	'item_bg_hover_styles',
437	[
438	'label' => esc_html__( 'Background Direction', 'easy-elements' ),
439	'type' => \Elementor\Controls_Manager::SELECT,
440	'default' => 'default',
441	'options' => [
442	'default' => esc_html__( 'Default', 'easy-elements' ),
443	'left' => esc_html__( 'Left', 'easy-elements' ),
444	'right' => esc_html__( 'Right', 'easy-elements' ),
445	'top' => esc_html__( 'Top', 'easy-elements' ),
446	'bottom' => esc_html__( 'Bottom', 'easy-elements' ),
447	'middle' => esc_html__( 'Middle', 'easy-elements' ),
448	],
449	]
450	);
451
452	$this->add_group_control(
453	\Elementor\Group_Control_Background::get_type(),
454	[
455	'name' => 'item_hover_bg',
456	'label' => __('Background', 'easy-elements'),
457	'types' => ['classic', 'gradient'],
458	'selector' => '{{WRAPPER}} .ee--icon-box:hover::before',
459	]
460	);
461
462	$this->add_group_control(
463	\Elementor\Group_Control_Border::get_type(),
464	[
465	'name' => 'item_border_hover',
466	'label' => __('Border', 'easy-elements'),
467	'selector' => '{{WRAPPER}} .ee--icon-box:hover',
468	]
469	);
470
471	$this->add_group_control(
472	\Elementor\Group_Control_Box_Shadow::get_type(),
473	[
474	'name' => 'item_shadow_hover',
475	'label' => __('Box Shadow', 'easy-elements'),
476	'selector' => '{{WRAPPER}} .ee--icon-box:hover',
477	]
478	);
479
480	$this->end_controls_tab();
481	$this->end_controls_tabs();
482	$this->end_controls_section();
483
484	$this->start_controls_section(
485	'section_style_image',
486	[
487	'label' => esc_html__( 'Image', 'easy-elements' ),
488	'tab' => Controls_Manager::TAB_STYLE,
489	'condition' => [
490	'icon_type' => 'image',
491	],
492	]
493	);
494
495	$this->add_responsive_control(
496	'image_size',
497	[
498	'label' => esc_html__( 'Size', 'easy-elements' ),
499	'type' => Controls_Manager::SLIDER,
500	'range' => [
501	'px' => [
502	'min' => 10,
503	'max' => 150,
504	],
505	],
506	'selectors' => [
507	'{{WRAPPER}} .ee--icon-box .eel-icon.eel-icon-image img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
508	],
509	]
510	);
511
512	$this->add_responsive_control(
513	'image_margin',
514	[
515	'label' => esc_html__( 'Margin', 'easy-elements' ),
516	'type' => \Elementor\Controls_Manager::DIMENSIONS,
517	'size_units' => [ 'px', '%', 'em', 'rem' ],
518	'selectors' => [
519	'{{WRAPPER}} .ee--icon-box .eel-icon.eel-icon-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
520	],
521	]
522	);
523
524	$this->add_responsive_control(
525	'image_padding',
526	[
527	'label' => esc_html__( 'Padding', 'easy-elements' ),
528	'type' => \Elementor\Controls_Manager::DIMENSIONS,
529	'size_units' => [ 'px', '%', 'em', 'rem' ],
530	'selectors' => [
531	'{{WRAPPER}} .ee--icon-box .eel-icon.eel-icon-image img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
532	],
533	]
534	);
535
536	$this->add_control(
537	'image__border_radius',
538	[
539	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
540	'type' => \Elementor\Controls_Manager::DIMENSIONS,
541	'size_units' => [ 'px', '%' ],
542	'selectors' => [
543	'{{WRAPPER}} .ee--icon-box .eel-icon.eel-icon-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
544	],
545	]
546	);
547
548	$this->add_group_control(
549	\Elementor\Group_Control_Border::get_type(),
550	[
551	'name' => 'image_border',
552	'selector' => '{{WRAPPER}} .ee--icon-box .eel-icon.eel-icon-image img',
553	]
554	);
555
556	// Vertical Alignment Control
557	$this->add_responsive_control(
558	'img_vertical_alignment',
559	[
560	'label' => esc_html__( 'Vertical Alignment', 'easy-elements' ),
561	'type' => \Elementor\Controls_Manager::CHOOSE,
562	'default' => 'center',
563	'options' => [
564	'flex-start' => [
565	'title' => esc_html__( 'Top', 'easy-elements' ),
566	'icon' => 'eicon-v-align-top',
567	],
568	'center' => [
569	'title' => esc_html__( 'Middle', 'easy-elements' ),
570	'icon' => 'eicon-v-align-middle',
571	],
572	'flex-end' => [
573	'title' => esc_html__( 'Bottom', 'easy-elements' ),
574	'icon' => 'eicon-v-align-bottom',
575	],
576	],
577	'selectors' => [
578	'{{WRAPPER}} .ee--icon-box.right, {{WRAPPER}} .ee--icon-box.left' => 'align-items: {{VALUE}};',
579	],
580	'condition' => [
581	'icon_direction' => ['left', 'right'],
582	],
583	]
584	);
585
586
587	$this->add_responsive_control(
588	'_textimg_align',
589	[
590	'label' => esc_html__( 'Alignment', 'easy-elements' ),
591	'type' => \Elementor\Controls_Manager::CHOOSE,
592	'options' => [
593	'left' => [
594	'title' => esc_html__( 'Left', 'easy-elements' ),
595	'icon' => 'eicon-text-align-left',
596	],
597	'center' => [
598	'title' => esc_html__( 'Center', 'easy-elements' ),
599	'icon' => 'eicon-text-align-center',
600	],
601	'right' => [
602	'title' => esc_html__( 'Right', 'easy-elements' ),
603	'icon' => 'eicon-text-align-right',
604	],
605	],
606	'default' => 'center',
607	'selectors' => [
608	'{{WRAPPER}} .ee--icon-box, {{WRAPPER}} .eel-pro-number' => 'text-align: {{VALUE}};',
609	],
610	]
611	);
612
613	$this->end_controls_section();
614
615	$this->start_controls_section(
616	'section_style_icon',
617	[
618	'label' => esc_html__( 'Icon', 'easy-elements' ),
619	'tab' => Controls_Manager::TAB_STYLE,
620	'condition' => [
621	'icon_type' => 'icon',
622	],
623	]
624	);
625
626	$this->start_controls_tabs('background_tabs');
627
628	$this->start_controls_tab('background_normal', [
629	'label' => __('Normal', 'easy-elements'),
630	]);
631
632	$this->add_control(
633	'icon_color',
634	[
635	'label' => esc_html__( 'Color', 'easy-elements' ),
636	'type' => Controls_Manager::COLOR,
637	'selectors' => [
638	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'color: {{VALUE}}; fill-opacity: 1;',
639	'{{WRAPPER}} .ee--icon-box .eel-icon svg' => 'fill: {{VALUE}}; fill-opacity: 1;',
640	'{{WRAPPER}} .ee--icon-box .eel-icon svg path' => 'fill: {{VALUE}}; fill-opacity: 1;',
641	],
642	]
643	);
644
645	$this->add_control(
646	'icon_bg_color',
647	[
648	'label' => esc_html__( 'Background', 'easy-elements' ),
649	'type' => Controls_Manager::COLOR,
650	'selectors' => [
651	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'background-color: {{VALUE}};',
652	],
653	]
654	);
655
656	$this->add_group_control(
657	\Elementor\Group_Control_Background::get_type(),
658	[
659	'name' => 'background_gradiant',
660	'types' => [ 'classic', 'gradient'],
661	'selector' => '{{WRAPPER}} .ee--icon-box .eel-icon',
662	]
663	);
664
665	$this->add_group_control(
666	\Elementor\Group_Control_Typography::get_type(),
667	[
668	'name' => 'icon_typography',
669	'label' => esc_html__( 'Icon Typography', 'easy-elements' ),
670	'selector' => '{{WRAPPER}} .ee--icon-box .eel-icon',
671	]
672	);
673
674	$this->add_group_control(
675	\Elementor\Group_Control_Border::get_type(),
676	[
677	'name' => 'icon_border',
678	'selector' => '{{WRAPPER}} .ee--icon-box .eel-icon',
679	]
680	);
681
682
683	$this->add_control(
684	'icon__border_radius',
685	[
686	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
687	'type' => \Elementor\Controls_Manager::DIMENSIONS,
688	'size_units' => [ 'px', '%' ],
689	'selectors' => [
690	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
691	],
692	]
693	);
694
695	// gradient border color
696	$this->add_control(
697	'gradient_border',
698	[
699	'label' => esc_html__( 'Gradient Border', 'easy-elements' ),
700	'type' => \Elementor\Controls_Manager::SWITCHER,
701	'label_on' => esc_html__( 'Show', 'easy-elements' ),
702	'label_off' => esc_html__( 'Hide', 'easy-elements' ),
703	'return_value' => 'yes',
704	'default' => 'no',
705	]
706	);
707
708	$this->add_responsive_control(
709	'icon_margin',
710	[
711	'label' => esc_html__( 'Margin', 'easy-elements' ),
712	'type' => \Elementor\Controls_Manager::DIMENSIONS,
713	'size_units' => [ 'px', '%', 'em', 'rem' ],
714	'selectors' => [
715	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
716	],
717	]
718	);
719
720	$this->add_responsive_control(
721	'icon_box_size',
722	[
723	'label' => esc_html__( 'Box Size', 'easy-elements' ),
724	'type' => Controls_Manager::SLIDER,
725	'range' => [
726	'px' => [
727	'min' => 10,
728	'max' => 150,
729	],
730	],
731	'selectors' => [
732	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'min-width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
733	],
734	]
735	);
736
737	$this->add_group_control(
738	\Elementor\Group_Control_Box_Shadow::get_type(),
739	[
740	'name' => 'icon_box_shadow',
741	'label' => esc_html__( 'Box Shadow', 'easy-elements' ),
742	'selector' => '{{WRAPPER}} .ee--icon-box .eel-icon',
743	]
744	);
745
746	$this->add_control(
747	'icon_rotate',
748	[
749	'label' => esc_html__( 'Rotate', 'easy-elements' ),
750	'type' => \Elementor\Controls_Manager::SLIDER,
751	'size_units' => [ 'deg' ],
752	'range' => [
753	'deg' => [
754	'min' => 0,
755	'max' => 360,
756	'step' => 1,
757	],
758	],
759	'selectors' => [
760	'{{WRAPPER}} .ee--icon-box .eel-icon svg, {{WRAPPER}} .ee--icon-box .eel-icon i' => 'transform: rotate({{SIZE}}deg);',
761	],
762	]
763	);
764	$this->end_controls_tab();
765
766	$this->start_controls_tab('background_hover', [
767	'label' => __('Hover', 'easy-elements'),
768	]);
769
770	$this->add_control(
771	'icon_hover_color',
772	[
773	'label' => esc_html__( 'Color', 'easy-elements' ),
774	'type' => Controls_Manager::COLOR,
775	'selectors' => [
776	'{{WRAPPER}} .ee--icon-box:hover .eel-icon' => 'color: {{VALUE}};',
777	'{{WRAPPER}} .ee--icon-box:hover .eel-icon svg path' => 'fill: {{VALUE}};',
778	],
779
780	]
781	);
782
783	$this->add_control(
784	'icon_hover_bg_color',
785	[
786	'label' => esc_html__( 'Background', 'easy-elements' ),
787	'type' => Controls_Manager::COLOR,
788	'selectors' => [
789	'{{WRAPPER}} .ee--icon-box:hover .eel-icon' => 'background-color: {{VALUE}};',
790	],
791	]
792	);
793
794	$this->add_group_control(
795	\Elementor\Group_Control_Background::get_type(),
796	[
797	'name' => 'icon_hover_bg_gradient',
798	'types' => [ 'classic', 'gradient'],
799	'selector' => '{{WRAPPER}} .ee--icon-box:hover .eel-icon',
800	]
801	);
802	$this->end_controls_tab();
803	$this->end_controls_tabs();
804	$this->end_controls_section();
805
806	$this->start_controls_section(
807	'section_style_number',
808	[
809	'label' => esc_html__( 'Number', 'easy-elements' ),
810	'tab' => Controls_Manager::TAB_STYLE,
811	'condition' => [
812	'number_title!' => '',
813	],
814	]
815	);
816
817	$this->add_control(
818	'number_title_color',
819	[
820	'label' => esc_html__( 'Color', 'easy-elements' ),
821	'type' => \Elementor\Controls_Manager::COLOR,
822	'selectors' => [
823	'{{WRAPPER}} .eel-pro-number' => 'color: {{VALUE}};',
824	],
825	'condition' => [
826	'number_gradeint' => '',
827	],
828	]
829	);
830
831	$this->add_control(
832	'number_bg_color',
833	[
834	'label' => esc_html__( 'Background', 'easy-elements' ),
835	'type' => \Elementor\Controls_Manager::COLOR,
836	'selectors' => [
837	'{{WRAPPER}} .eel-pro-number' => 'background: {{VALUE}};',
838	],
839	]
840	);
841
842	$this->add_group_control(
843	\Elementor\Group_Control_Background::get_type(),
844	[
845	'name' => 'number_title_background',
846	'label' => esc_html__( 'Background Color', 'easy-elements' ),
847	'types' => [ 'classic', 'gradient' ],
848	'selector' => '{{WRAPPER}} .eel-pro-number',
849	'condition' => [
850	'number_gradeint' => 'yes',
851	'number_title!' => ''
852	],
853	]
854	);
855
856	$this->add_group_control(
857	\Elementor\Group_Control_Typography::get_type(),
858	[
859	'name' => 'number_title_typography',
860	'label' => esc_html__( 'Typography', 'easy-elements' ),
861	'selector' => '{{WRAPPER}} .eel-pro-number',
862	]
863	);
864
865	$this->add_group_control(
866	\Elementor\Group_Control_Text_Stroke::get_type(),
867	[
868	'name' => 'number_title_text_stroke',
869	'selector' => '{{WRAPPER}} .eel-pro-number',
870	]
871	);
872
873	$this->add_group_control(
874	\Elementor\Group_Control_Border::get_type(),
875	[
876	'name' => 'number_border',
877	'selector' => '{{WRAPPER}} .eel-pro-number',
878	]
879	);
880
881	$this->add_control(
882	'number_border_radius',
883	[
884	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
885	'type' => \Elementor\Controls_Manager::DIMENSIONS,
886	'size_units' => [ 'px', '%' ],
887	'selectors' => [
888	'{{WRAPPER}} .eel-pro-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
889	],
890	]
891	);
892
893	$this->add_responsive_control(
894	'number_padding',
895	[
896	'label' => esc_html__( 'Padding', 'easy-elements' ),
897	'type' => \Elementor\Controls_Manager::DIMENSIONS,
898	'size_units' => [ 'px', '%', 'em', 'rem' ],
899	'selectors' => [
900	'{{WRAPPER}} .eel-pro-number' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
901	],
902	]
903	);
904
905	$this->add_responsive_control(
906	'number_margin',
907	[
908	'label' => esc_html__( 'Margin', 'easy-elements' ),
909	'type' => \Elementor\Controls_Manager::DIMENSIONS,
910	'size_units' => [ 'px', '%', 'em', 'rem' ],
911	'selectors' => [
912	'{{WRAPPER}} .eel-pro-number' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
913	],
914	]
915	);
916
917	$this->add_responsive_control(
918	'box_size',
919	[
920	'label' => esc_html__( 'Size', 'easy-elements' ),
921	'type' => Controls_Manager::SLIDER,
922	'range' => [
923	'px' => [
924	'min' => 10,
925	'max' => 150,
926	],
927	],
928	'selectors' => [
929	'{{WRAPPER}} .eel-pro-number, {{WRAPPER}} .eel-pro-number *' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
930	],
931	]
932	);
933
934	$this->end_controls_section();
935
936	$this->start_controls_section(
937	'section_style_title',
938	[
939	'label' => esc_html__( 'Title', 'easy-elements' ),
940	'tab' => Controls_Manager::TAB_STYLE,
941	]
942	);
943
944	$this->start_controls_tabs('title_style');
945
946	$this->start_controls_tab('title_normal', [
947	'label' => __('Normal', 'easy-elements'),
948	]);
949
950	$this->add_control(
951	'title_color',
952	[
953	'label' => esc_html__( 'Color', 'easy-elements' ),
954	'type' => Controls_Manager::COLOR,
955	'selectors' => [
956	'{{WRAPPER}} .icon-box-title' => 'color: {{VALUE}}; transition: all 0.3s ease-in;',
957	],
958	]
959	);
960
961	$this->add_group_control(
962	\Elementor\Group_Control_Typography::get_type(),
963	[
964	'name' => '_title_typography',
965	'label' => esc_html__( 'Typography', 'easy-elements' ),
966	'selector' => '{{WRAPPER}} .icon-box-title',
967	]
968	);
969
970	$this->add_responsive_control(
971	'title_margin',
972	[
973	'label' => esc_html__( 'Margin', 'easy-elements' ),
974	'type' => \Elementor\Controls_Manager::DIMENSIONS,
975	'size_units' => [ 'px', '%', 'em', 'rem' ],
976	'selectors' => [
977	'{{WRAPPER}} .ee--icon-box .icon-box-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
978	],
979	]
980	);
981
982	$this->end_controls_tab();
983
984	$this->start_controls_tab('title_hover', [
985	'label' => __('Hover', 'easy-elements'),
986	]);
987
988	$this->add_control(
989	'title_hover_color',
990	[
991	'label' => esc_html__( 'Color', 'easy-elements' ),
992	'type' => Controls_Manager::COLOR,
993	'selectors' => [
994	'{{WRAPPER}} .ee--icon-box:hover .icon-box-title' => 'color: {{VALUE}};',
995	],
996	]
997	);
998
999	$this->end_controls_tab();
1000
1001	$this->end_controls_tabs();
1002
1003	$this->end_controls_section();
1004
1005	$this->start_controls_section(
1006	'section_style_description',
1007	[
1008	'label' => esc_html__( 'Description', 'easy-elements' ),
1009	'tab' => Controls_Manager::TAB_STYLE,
1010	]
1011	);
1012
1013	$this->start_controls_tabs('desc_style');
1014
1015	$this->start_controls_tab('desc_normal', [
1016	'label' => __('Normal', 'easy-elements'),
1017	]);
1018
1019	$this->add_control(
1020	'desc_color',
1021	[
1022	'label' => esc_html__( 'Color', 'easy-elements' ),
1023	'type' => Controls_Manager::COLOR,
1024	'selectors' => [
1025	'{{WRAPPER}} .icon-box-description' => 'color: {{VALUE}};',
1026	],
1027	]
1028	);
1029	$this->add_group_control(
1030	\Elementor\Group_Control_Typography::get_type(),
1031	[
1032	'name' => 'box_desc_typography',
1033	'label' => esc_html__( 'Typography', 'easy-elements' ),
1034	'selector' => '{{WRAPPER}} .icon-box-description',
1035	]
1036	);
1037	$this->add_responsive_control(
1038	'description_margin',
1039	[
1040	'label' => esc_html__( 'Margin', 'easy-elements' ),
1041	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1042	'size_units' => [ 'px', '%', 'em', 'rem' ],
1043	'selectors' => [
1044	'{{WRAPPER}} .ee--icon-box .icon-box-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1045	],
1046	]
1047	);
1048
1049	$this->end_controls_tab();
1050
1051	$this->start_controls_tab('desc_hover', [
1052	'label' => __('Hover', 'easy-elements'),
1053	]);
1054
1055	$this->add_control(
1056	'desc_hover_color',
1057	[
1058	'label' => esc_html__( 'Color', 'easy-elements' ),
1059	'type' => Controls_Manager::COLOR,
1060	'selectors' => [
1061	'{{WRAPPER}} .ee--icon-box:hover .icon-box-description' => 'color: {{VALUE}};',
1062	],
1063	]
1064	);
1065
1066	$this->end_controls_tabs();
1067
1068	$this->end_controls_section();
1069
1070	$this->start_controls_section(
1071	'section_button_style',
1072	[
1073	'label' => esc_html__( 'Button', 'easy-elements' ),
1074	'tab' => Controls_Manager::TAB_STYLE,
1075	'condition' => [
1076	'show_read_more' => 'yes',
1077	]
1078	]
1079	);
1080
1081	$this->start_controls_tabs('button_tabs_style');
1082
1083	$this->start_controls_tab('button_normal_tab_style', [
1084	'label' => __('Normal', 'easy-elements'),
1085	]);
1086
1087	$this->add_control(
1088	'read_more_icon_color',
1089	[
1090	'label' => esc_html__('Icon Color', 'easy-elements'),
1091	'type' => \Elementor\Controls_Manager::COLOR,
1092	'selectors' => [
1093	'{{WRAPPER}} .eel-read-more-icon svg' => 'fill: {{VALUE}};',
1094	'{{WRAPPER}} .eel-read-more-icon svg path' => 'fill: {{VALUE}};',
1095	'{{WRAPPER}} .eel-read-more-icon i' => 'color: {{VALUE}};',
1096	],
1097	'condition' => [
1098	'show_read_more' => 'yes',
1099	'read_more_type' => 'read_icon',
1100	],
1101	]
1102	);
1103
1104	$this->add_control(
1105	'read_more_icon_bg_color',
1106	[
1107	'label' => esc_html__('Icon Background Color', 'easy-elements'),
1108	'type' => \Elementor\Controls_Manager::COLOR,
1109	'selectors' => [
1110	'{{WRAPPER}} .ee--icon-box .eel-read-more-icon' => 'background-color: {{VALUE}};',
1111	],
1112	'condition' => [
1113	'show_read_more' => 'yes',
1114	'read_more_type' => 'read_icon',
1115	],
1116	]
1117	);
1118
1119	$this->add_responsive_control(
1120	'read_more_icon_padding',
1121	[
1122	'label' => esc_html__('Padding', 'easy-elements'),
1123	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1124	'size_units' => [ 'px', 'em', '%' ],
1125	'selectors' => [
1126	'{{WRAPPER}} .ee--icon-box .eel-read-more-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1127	],
1128	'condition' => [
1129	'show_read_more' => 'yes',
1130	'read_more_type' => 'read_icon',
1131	],
1132	]
1133	);
1134
1135	$this->add_control(
1136	'border_radius_icon',
1137	[
1138	'label' => __('Border Radius', 'easy-elements'),
1139	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1140	'size_units' => ['px', '%', 'em'],
1141	'selectors' => [
1142	'{{WRAPPER}} .ee--icon-box .eel-read-more-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1143	],
1144	'condition' => [
1145	'show_read_more' => 'yes',
1146	'read_more_type' => 'read_icon',
1147	],
1148	]
1149	);
1150
1151	$this->add_responsive_control(
1152	'read_more_icon_size',
1153	[
1154	'label' => esc_html__('Icon Size', 'easy-elements'),
1155	'type' => \Elementor\Controls_Manager::SLIDER,
1156	'range' => [
1157	'px' => [
1158	'min' => 10,
1159	'max' => 100,
1160	],
1161	],
1162	'selectors' => [
1163	'{{WRAPPER}} .eel-read-more-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1164	'{{WRAPPER}} .eel-read-more-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
1165	],
1166	'condition' => [
1167	'show_read_more' => 'yes',
1168	'read_more_type' => 'read_icon',
1169	],
1170	]
1171	);
1172
1173
1174	$this->add_group_control(
1175	\Elementor\Group_Control_Typography::get_type(),
1176	[
1177	'name' => 'read_m_read_mr_typography',
1178	'label' => esc_html__( 'Typography', 'easy-elements' ),
1179	'selector' => '{{WRAPPER}} .eel-read-more-text',
1180	'condition' => [
1181	'show_read_more' => 'yes',
1182	'read_more_type' => ['read_text','read_icon_to_text'],
1183	],
1184	]
1185	);
1186
1187	$this->add_control(
1188	'read_more_text_color',
1189	[
1190	'label' => esc_html__('Text Color', 'easy-elements'),
1191	'type' => \Elementor\Controls_Manager::COLOR,
1192	'selectors' => [
1193	'{{WRAPPER}} .eel-read-more-text' => 'color: {{VALUE}};',
1194	'{{WRAPPER}} .eel-read-more-text svg' => 'fill: {{VALUE}};',
1195	'{{WRAPPER}} .eel-read-more-text svg path' => 'fill: {{VALUE}};',
1196	],
1197	'condition' => [
1198	'show_read_more' => 'yes',
1199	'read_more_type' => ['read_text','read_icon_to_text'],
1200	],
1201	]
1202	);
1203
1204	$this->add_control(
1205	'read_more_text_bg_color',
1206	[
1207	'label' => esc_html__('Background Color', 'easy-elements'),
1208	'type' => \Elementor\Controls_Manager::COLOR,
1209	'selectors' => [
1210	'{{WRAPPER}} .eel-read-more-text' => 'background-color: {{VALUE}};',
1211	],
1212	'condition' => [
1213	'show_read_more' => 'yes',
1214	'read_more_type' => ['read_text','read_icon_to_text'],
1215	],
1216	]
1217	);
1218
1219	$this->add_group_control(
1220	\Elementor\Group_Control_Border::get_type(),
1221	[
1222	'name' => 'read_more_text_border',
1223	'label' => esc_html__('Border', 'easy-elements'),
1224	'selector' => '{{WRAPPER}} .eel-read-more-text, {{WRAPPER}} .eel-read-more-icon',
1225	'condition' => [
1226	'show_read_more' => 'yes',
1227	],
1228	]
1229	);
1230
1231	$this->add_responsive_control(
1232	'top_btm',
1233	[
1234	'label' => esc_html__( 'Top/Bottom', 'easy-elements' ),
1235	'type' => \Elementor\Controls_Manager::SLIDER,
1236	'size_units' => [ 'px', '%' ],
1237	'range' => [
1238	'px' => [
1239	'min' => -100,
1240	'max' => 100,
1241	],
1242	'%' => [
1243	'min' => -100,
1244	'max' => 100,
1245	],
1246	],
1247	'selectors' => [
1248	'{{WRAPPER}} .eel-read-more-text-icon' => 'top: {{SIZE}}{{UNIT}}; position: relative;',
1249	],
1250	'condition' => [
1251	'show_read_more' => 'yes',
1252	'read_more_type' => ['read_text','read_icon_to_text'],
1253	'read_more_text_icon_show' => 'yes',
1254	],
1255	]
1256	);
1257
1258	$this->add_responsive_control(
1259	'icon_left_right',
1260	[
1261	'label' => esc_html__( 'Left/Right', 'easy-elements' ),
1262	'type' => \Elementor\Controls_Manager::SLIDER,
1263	'size_units' => [ 'px', '%' ],
1264	'range' => [
1265	'px' => [
1266	'min' => -100,
1267	'max' => 100,
1268	],
1269	'%' => [
1270	'min' => -100,
1271	'max' => 100,
1272	],
1273	],
1274	'selectors' => [
1275	'{{WRAPPER}} .eel-read-more-text-icon' => 'left: {{SIZE}}{{UNIT}}; position: relative;',
1276	],
1277	'condition' => [
1278	'show_read_more' => 'yes',
1279	'read_more_type' => ['read_text','read_icon_to_text'],
1280	'read_more_text_icon_show' => 'yes',
1281	],
1282	]
1283	);
1284
1285	$this->add_responsive_control(
1286	'read_more_text_icon_size',
1287	[
1288	'label' => esc_html__('Button Icon Size', 'easy-elements'),
1289	'type' => \Elementor\Controls_Manager::SLIDER,
1290	'range' => [
1291	'px' => [
1292	'min' => 10,
1293	'max' => 100,
1294	],
1295	],
1296	'selectors' => [
1297	'{{WRAPPER}} .eel-read-more-text-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1298	'{{WRAPPER}} .eel-read-more-text-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
1299	],
1300	'condition' => [
1301	'show_read_more' => 'yes',
1302	'read_more_type' => ['read_text','read_icon_to_text'],
1303	'read_more_text_icon_show' => 'yes',
1304	],
1305	]
1306	);
1307
1308	$this->add_responsive_control(
1309	'read_more_text_border_radius',
1310	[
1311	'label' => esc_html__('Border Radius', 'easy-elements'),
1312	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1313	'size_units' => [ 'px', '%' ],
1314	'selectors' => [
1315	'{{WRAPPER}} .eel-read-more-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1316	],
1317	'condition' => [
1318	'show_read_more' => 'yes',
1319	'read_more_type' => ['read_text','read_icon_to_text'],
1320	],
1321	]
1322	);
1323
1324	$this->add_responsive_control(
1325	'read_more_text_padding',
1326	[
1327	'label' => esc_html__('Padding', 'easy-elements'),
1328	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1329	'size_units' => [ 'px', 'em', '%' ],
1330	'selectors' => [
1331	'{{WRAPPER}} .eel-read-more-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; display: inline-block;',
1332	],
1333	'condition' => [
1334	'show_read_more' => 'yes',
1335	'read_more_type' => ['read_text','read_icon_to_text'],
1336	],
1337	]
1338	);
1339
1340	$this->end_controls_tab();
1341
1342	$this->start_controls_tab( 'button_hover_tab_style', [
1343	'label' => __('Hover', 'easy-elements'),
1344	]);
1345
1346	$this->add_control(
1347	'read_more_text_color_hover',
1348	[
1349	'label' => esc_html__('Color', 'easy-elements'),
1350	'type' => \Elementor\Controls_Manager::COLOR,
1351	'selectors' => [
1352	'{{WRAPPER}} .ee--icon-box .eel-read-more-text:hover' => 'color: {{VALUE}};',
1353	'{{WRAPPER}} .eel-read-more-text:hover svg' => 'fill: {{VALUE}};',
1354	'{{WRAPPER}} .eel-read-more-text:hover svg path' => 'fill: {{VALUE}};',
1355	],
1356	'condition' => [
1357	'show_read_more' => 'yes',
1358	'read_more_type' => ['read_text','read_icon_to_text'],
1359	],
1360	]
1361	);
1362
1363	$this->add_control(
1364	'read_more_text_color_item_hover',
1365	[
1366	'label' => esc_html__('Hover Color For Item', 'easy-elements'),
1367	'type' => \Elementor\Controls_Manager::COLOR,
1368	'selectors' => [
1369	'{{WRAPPER}} .elementor-widget-container:hover .eel-read-more-text' => 'color: {{VALUE}};',
1370	'{{WRAPPER}} .elementor-widget-container:hover .eel-read-more-text svg' => 'fill: {{VALUE}};',
1371	'{{WRAPPER}} .elementor-widget-container:hover .eel-read-more-text svg path' => 'fill: {{VALUE}};',
1372	],
1373	'condition' => [
1374	'show_read_more' => 'yes',
1375	'read_more_type' => ['read_text','read_icon_to_text'],
1376	],
1377	]
1378	);
1379
1380	$this->add_control(
1381	'read_more_bg_hover',
1382	[
1383	'label' => esc_html__('Background', 'easy-elements'),
1384	'type' => \Elementor\Controls_Manager::COLOR,
1385	'selectors' => [
1386	'{{WRAPPER}} .ee--icon-box .eel-read-more-text:hover' => 'background: {{VALUE}};',
1387	],
1388	'condition' => [
1389	'show_read_more' => 'yes',
1390	'read_more_type' => ['read_text','read_icon_to_text'],
1391	],
1392	]
1393	);
1394
1395	$this->add_control(
1396	'read_more_text_bg_item_hover',
1397	[
1398	'label' => esc_html__('Background Color For Item', 'easy-elements'),
1399	'type' => \Elementor\Controls_Manager::COLOR,
1400	'selectors' => [
1401	'{{WRAPPER}} .elementor-widget-container:hover .eel-read-more-text' => 'background-color: {{VALUE}}; border-color: {{VALUE}};',
1402	],
1403	'condition' => [
1404	'show_read_more' => 'yes',
1405	'read_more_type' => ['read_text','read_icon_to_text'],
1406	],
1407	]
1408	);
1409
1410	$this->add_control(
1411	'read_more_hover_border_color',
1412	[
1413	'label' => esc_html__('Border Color', 'easy-elements'),
1414	'type' => \Elementor\Controls_Manager::COLOR,
1415	'selectors' => [
1416	'{{WRAPPER}} .ee--icon-box .eel-read-more-text:hover' => 'border-color: {{VALUE}};',
1417	],
1418	'condition' => [
1419	'show_read_more' => 'yes',
1420	'read_more_type' => ['read_text','read_icon_to_text'],
1421	],
1422	]
1423	);
1424
1425	$this->end_controls_tab();
1426	$this->end_controls_tabs();
1427
1428	$this->end_controls_section();
1429	}
1430
1431	protected function render() {
1432	$settings = $this->get_settings_for_display();
1433	$gradient_border = ( isset( $settings['gradient_border'] ) && $settings['gradient_border'] === 'yes' ) ? 'ee--gradient-border' : '';
1434
1435	?>
1436	<div class="eel-icon-box-wraps">
1437	<?php
1438	$icon_direction = isset($settings['icon_direction']) ? esc_attr($settings['icon_direction']) : '';
1439	$link = isset($settings['link']['url']) ? esc_url($settings['link']['url']) : '';
1440	$target = ! empty( $settings['link']['is_external'] ) ? ' target="_blank"' : '';
1441	$nofollow = ! empty( $settings['link']['nofollow'] ) ? ' rel="nofollow"' : '';
1442	$item_hover_styles = !empty( $settings['item_bg_hover_styles'] ) ? $settings['item_bg_hover_styles'] : '';
1443
1444	?>
1445	<?php if ( $link ) : ?>
1446	<a href="<?php echo esc_url($link); ?>"<?php echo esc_attr($target) . esc_attr($nofollow); ?>>
1447	<?php endif; ?>
1448	<div class="ee--icon-box <?php echo esc_attr($icon_direction); ?> eel-bf-<?php echo esc_attr( $item_hover_styles ); ?>">
1449	<?php if ( isset( $settings['icon']['value'] ) && $settings['icon']['value'] ) : ?>
1450	<span class="eel-icon">
1451	<?php
1452	\Elementor\Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] );
1453	?>
1454	</span>
1455	<?php elseif ( 'image' === $settings['icon_type'] && ! empty( $settings['icon_image']['url'] ) ) : ?>
1456	<span class="eel-icon eel-icon-image">
1457	<?php
1458	if ( ! empty( $settings['icon_image']['id'] ) ) {
1459	echo wp_get_attachment_image(
1460	$settings['icon_image']['id'],
1461	'full',
1462	false,
1463	['alt' => $settings['icon_image']['alt'] ?? '']
1464	);
1465	} elseif ( ! empty( $settings['icon_image']['url'] ) ) {
1466	echo '<img src="' . esc_url( $settings['icon_image']['url'] ) . '" alt="">';
1467	}
1468	?>
1469	</span>
1470	<?php endif; ?>
1471
1472	<?php if ( ! empty( $settings['number_title'] ) ) : ?>
1473	<div class="eel-pro-number easyel-gradeint-<?php echo esc_attr($settings['number_gradeint']) ?>"><?php echo esc_html( $settings['number_title'] ); ?></div>
1474	<?php endif; ?>
1475
1476	<?php if ( $settings['icon_direction'] === 'left' \|\| $settings['icon_direction'] === 'right' ) : ?>
1477	<div class="eel-title-content-wrap">
1478	<?php endif; ?>
1479
1480	<?php if ( ! empty( $settings['procs_title'] ) ) :
1481	$this->add_inline_editing_attributes( 'procs_title' );
1482	$title_tag = isset( $settings['title_tag'] ) ? esc_attr( $settings['title_tag'] ) : 'h3';
1483	?>
1484	<<?php echo tag_escape( $title_tag ); ?> class="icon-box-title elementor-inline-editing" <?php
1485	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1486	echo $this->get_render_attribute_string( 'procs_title' ); ?>>
1487	<?php echo wp_kses_post( $settings['procs_title'] ); ?>
1488	</<?php echo tag_escape( $title_tag ); ?>>
1489	<?php endif; ?>
1490
1491
1492	<?php if ( ! empty( $settings['_description'] ) ) :
1493	$this->add_inline_editing_attributes( '_description' );
1494	?>
1495	<div class="icon-box-description elementor-inline-editing" <?php
1496	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1497	echo $this->get_render_attribute_string( '_description' ); ?>>
1498	<?php echo wp_kses_post( $settings['_description'] ); ?></div>
1499	<?php endif; ?>
1500
1501	<?php if ( !empty($settings['show_read_more']) && $settings['show_read_more'] === 'yes' ) : ?>
1502	<div class="eel-read-more">
1503	<?php if ( $settings['read_more_type'] === 'read_icon' ) : ?>
1504	<span class="eel-read-more-icon">
1505	<?php
1506	if ( !empty($settings['read_more_icon']['value']) ) {
1507	\Elementor\Icons_Manager::render_icon( $settings['read_more_icon'], [ 'aria-hidden' => 'true' ] );
1508	} else {
1509	echo '<i class="unicon-arrow-up-right"></i>';
1510	}
1511	?>
1512	</span>
1513	<?php elseif ( $settings['read_more_type'] === 'read_text' && !empty($settings['read_more_text']) ) : ?>
1514	<span class="eel-read-more-text">
1515	<?php echo esc_html( $settings['read_more_text'] ); ?>
1516	<?php
1517	if (
1518	!empty($settings['read_more_text_icon_show']) &&
1519	$settings['read_more_text_icon_show'] === 'yes'
1520	) {
1521	echo '<span class="eel-read-more-text-icon">';
1522	if (!empty($settings['read_more_text_icon']['value'])) {
1523	\Elementor\Icons_Manager::render_icon( $settings['read_more_text_icon'], [ 'aria-hidden' => 'true' ] );
1524	} else {
1525	echo '<i class="unicon-arrow-up-right"></i>';
1526	}
1527	echo '</span>';
1528	}
1529	?>
1530	</span>
1531	<?php elseif ( $settings['read_more_type'] === 'read_icon_to_text' && !empty($settings['read_more_text']) ) : ?>
1532	<span class="eel-read-more-text eel-icon-to-text">
1533	<span class="eel-text"><?php echo esc_html( $settings['read_more_text'] ); ?></span>
1534	<?php
1535	if (
1536	!empty($settings['read_more_text_icon_show']) &&
1537	$settings['read_more_text_icon_show'] === 'yes'
1538	) {
1539	echo '<span class="eel-read-more-text-icon">';
1540	if (!empty($settings['read_more_text_icon']['value'])) {
1541	\Elementor\Icons_Manager::render_icon( $settings['read_more_text_icon'], [ 'aria-hidden' => 'true' ] );
1542	} else {
1543	echo '<i class="unicon-add"></i>';
1544	}
1545	echo '</span>';
1546	}
1547	?>
1548	</span>
1549	<?php endif; ?>
1550	</div>
1551	<?php endif; ?>
1552
1553	<?php if ( $settings['icon_direction'] === 'left' \|\| $settings['icon_direction'] === 'right' ) : ?>
1554	</div>
1555	<?php endif; ?>
1556	</div>
1557	<?php if ( $link ) : ?>
1558	</a>
1559	<?php endif; ?>
1560	</div>
1561	<?php
1562	}
1563	} ?>