← All changes | widgets/process-list/process-list.php +421 -423 1.3.0 → 1.0.7 View file →

		@@ -1,6 +1,5 @@
1	1	<?php
2		-namespace Easyel\EasyElements\Widgets;
3	2	use Elementor\Utils;
4	3	use Elementor\Controls_Manager;
5	4	use Elementor\Responsive_Control;
6	5	use Elementor\Group_Control_Image_Size;
		@@ -5,488 +4,487 @@
5	4	use Elementor\Responsive_Control;
6	5	use Elementor\Group_Control_Image_Size;
7	6
8	7	defined( 'ABSPATH' ) || die();
	8	+if ( ! class_exists( 'Easyel_Process_list_Widget' ) ) {
	9	+ class Easyel_Process_list_Widget extends \Elementor\Widget_Base {
9	10
10		-class Easyel_Process_lists_Widget extends \Elementor\Widget_Base {
	11	+ public function get_style_depends() {
	12	+ $handle = 'eel-process-list';
	13	+ $css_path = plugin_dir_path( __FILE__ ) . 'css/process-list.css';
	14	+
	15	+ if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
	16	+ wp_register_style( $handle, plugins_url( 'css/process-list.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : '1.0.0' );
	17	+ }
11	18
12		- public function get_name() {
13		- return 'eel-process-list';
14		- }
	19	+ return [ $handle ];
	20	+ }
15	21
16		- public function get_title() {
17		- return esc_html__( 'Process List', 'easy-elements' );
18		- }
	22	+ public function get_name() {
	23	+ return 'eel-process-list';
	24	+ }
19	25
20		- public function get_icon() {
21		- return 'easyicon easyelIcon-process-list';
22		- }
	26	+ public function get_title() {
	27	+ return esc_html__( 'Process List', 'easy-elements' );
	28	+ }
23	29
24		- public function get_categories() {
25		- return [ 'easyelements_category' ];
26		- }
	30	+ public function get_icon() {
	31	+ return 'easyicon easyelIcon-process-list';
	32	+ }
27	33
28		- public function get_keywords() {
29		- return [ 'process', 'sevice', 'icon', 'process-box', 'text' ];
30		- }
	34	+ public function get_categories() {
	35	+ return [ 'easyelements_category' ];
	36	+ }
31	37
32		- public function get_style_depends() {
33		- return [
34		- 'eel-process-list',
35		- ];
36		- }
	38	+ public function get_keywords() {
	39	+ return [ 'process', 'sevice', 'icon', 'process-box', 'text' ];
	40	+ }
37	41
	42	+ protected function register_controls() {
	43	+ $this->start_controls_section(
	44	+ '_section_logo',
	45	+ [
	46	+ 'label' => esc_html__( 'Process Settings', 'easy-elements' ),
	47	+ 'tab' => Controls_Manager::TAB_CONTENT,
	48	+ ]
	49	+ );
38	50
39		- protected function register_controls() {
40		- $this->start_controls_section(
41		- '_section_logo',
42		- [
43		- 'label' => esc_html__( 'Process Settings', 'easy-elements' ),
44		- 'tab' => Controls_Manager::TAB_CONTENT,
45		- ]
46		- );
	51	+ $this->add_control(
	52	+ 'icon',
	53	+ [
	54	+ 'label' => esc_html__( 'Icon', 'easy-elements' ),
	55	+ 'type' => \Elementor\Controls_Manager::ICONS,
	56	+ 'label_block' => true,
	57	+ 'default' => [
	58	+ 'value' => 'fas fa-star',
	59	+ 'library' => 'fa-solid',
	60	+ ],
	61	+ ]
	62	+ );
47	63
48		- $this->add_control(
49		- 'icon',
50		- [
51		- 'label' => esc_html__( 'Icon', 'easy-elements' ),
52		- 'type' => \Elementor\Controls_Manager::ICONS,
53		- 'label_block' => true,
54		- 'default' => [
55		- 'value' => 'fas fa-star',
56		- 'library' => 'fa-solid',
57		- ],
58		- ]
59		- );
	64	+ $this->add_control(
	65	+ 'process_title',
	66	+ [
	67	+ 'label' => esc_html__( 'Title', 'easy-elements' ),
	68	+ 'type' => \Elementor\Controls_Manager::TEXT,
	69	+ 'default' => esc_html__( 'Initial Consultation', 'easy-elements' ),
	70	+ 'label_block' => true,
	71	+ ]
	72	+ );
60	73
61		- $this->add_control(
62		- 'process_title',
63		- [
64		- 'label' => esc_html__( 'Title', 'easy-elements' ),
65		- 'type' => \Elementor\Controls_Manager::TEXT,
66		- 'default' => esc_html__( 'Initial Consultation', 'easy-elements' ),
67		- 'label_block' => true,
68		- ]
69		- );
	74	+ $this->add_control(
	75	+ '_description',
	76	+ [
	77	+ 'label' => esc_html__( 'Description', 'easy-elements' ),
	78	+ 'type' => \Elementor\Controls_Manager::TEXTAREA,
	79	+ 'default' => esc_html__( 'We start by understanding your vision, needs, lifestyle, and budget to establish the foundation of your project.', 'easy-elements' ),
	80	+ ]
	81	+ );
70	82
71		- $this->add_control(
72		- '_description',
73		- [
74		- 'label' => esc_html__( 'Description', 'easy-elements' ),
75		- 'type' => \Elementor\Controls_Manager::TEXTAREA,
76		- 'default' => esc_html__( 'We start by understanding your vision, needs, lifestyle, and budget to establish the foundation of your project.', 'easy-elements' ),
77		- ]
78		- );
	83	+ $this->add_control(
	84	+ 'link',
	85	+ [
	86	+ 'label' => esc_html__('Link', 'easy-elements'),
	87	+ 'type' => Controls_Manager::URL,
	88	+ 'placeholder' => 'https://example.com',
	89	+ ]
	90	+ );
79	91
80		- $this->add_control(
81		- 'link',
82		- [
83		- 'label' => esc_html__('Link', 'easy-elements'),
84		- 'type' => Controls_Manager::URL,
85		- 'placeholder' => 'https://example.com',
86		- ]
87		- );
	92	+ $this->add_control(
	93	+ 'process_number',
	94	+ [
	95	+ 'label' => esc_html__( 'Process Number', 'easy-elements' ),
	96	+ 'type' => \Elementor\Controls_Manager::TEXT,
	97	+ 'default' => '01',
	98	+ 'placeholder' => 'Enter a number',
	99	+ ]
	100	+ );
88	101
89		- $this->add_control(
90		- 'process_number',
91		- [
92		- 'label' => esc_html__( 'Process Number', 'easy-elements' ),
93		- 'type' => \Elementor\Controls_Manager::TEXT,
94		- 'default' => '01',
95		- 'placeholder' => 'Enter a number',
96		- ]
97		- );
	102	+ $this->add_control(
	103	+ 'title_tag',
	104	+ [
	105	+ 'label' => esc_html__( 'Title HTML Tag', 'easy-elements' ),
	106	+ 'type' => \Elementor\Controls_Manager::SELECT,
	107	+ 'default' => 'h3',
	108	+ 'options' => [
	109	+ 'h1' => 'H1',
	110	+ 'h2' => 'H2',
	111	+ 'h3' => 'H3',
	112	+ 'h4' => 'H4',
	113	+ 'h5' => 'H5',
	114	+ 'h6' => 'H6',
	115	+ 'div' => 'div',
	116	+ 'span' => 'span',
	117	+ 'p' => 'p',
	118	+ ],
	119	+ ]
	120	+ );
98	121
99		- $this->add_control(
100		- 'title_tag',
101		- [
102		- 'label' => esc_html__( 'Title HTML Tag', 'easy-elements' ),
103		- 'type' => \Elementor\Controls_Manager::SELECT,
104		- 'default' => 'h3',
105		- 'options' => [
106		- 'h1' => 'H1',
107		- 'h2' => 'H2',
108		- 'h3' => 'H3',
109		- 'h4' => 'H4',
110		- 'h5' => 'H5',
111		- 'h6' => 'H6',
112		- 'div' => 'div',
113		- 'span' => 'span',
114		- 'p' => 'p',
115		- ],
116		- ]
117		- );
	122	+ $this->add_responsive_control(
	123	+ 'flex_align_vertical',
	124	+ [
	125	+ 'label' => esc_html__( 'Vertical Align', 'easy-elements' ),
	126	+ 'type' => \Elementor\Controls_Manager::CHOOSE,
	127	+ 'options' => [
	128	+ 'flex-start' => [
	129	+ 'title' => esc_html__( 'Top', 'easy-elements' ),
	130	+ 'icon' => 'eicon-v-align-top',
	131	+ ],
	132	+ 'center' => [
	133	+ 'title' => esc_html__( 'Center', 'easy-elements' ),
	134	+ 'icon' => 'eicon-v-align-middle',
	135	+ ],
	136	+ 'flex-end' => [
	137	+ 'title' => esc_html__( 'Bottom', 'easy-elements' ),
	138	+ 'icon' => 'eicon-v-align-bottom',
	139	+ ],
	140	+ ],
	141	+ 'default' => 'center',
	142	+ 'toggle' => true,
	143	+ 'selectors' => [
	144	+ '{{WRAPPER}} .eel--process-list' => 'align-items: {{VALUE}};',
	145	+ ],
	146	+ ]
	147	+ );
118	148
119		- $this->add_responsive_control(
120		- 'flex_align_vertical',
121		- [
122		- 'label' => esc_html__( 'Vertical Align', 'easy-elements' ),
123		- 'type' => \Elementor\Controls_Manager::CHOOSE,
124		- 'options' => [
125		- 'flex-start' => [
126		- 'title' => esc_html__( 'Top', 'easy-elements' ),
127		- 'icon' => 'eicon-v-align-top',
	149	+ $this->add_responsive_control(
	150	+ 'item_gap',
	151	+ [
	152	+ 'label' => esc_html__( 'Gap', 'easy-elements' ),
	153	+ 'type' => \Elementor\Controls_Manager::SLIDER,
	154	+ 'size_units' => [ 'px', 'em', 'rem' ],
	155	+ 'range' => [
	156	+ 'px' => [
	157	+ 'min' => 0,
	158	+ 'max' => 100,
	159	+ 'step' => 1,
	160	+ ],
	161	+ 'em' => [
	162	+ 'min' => 0,
	163	+ 'max' => 10,
	164	+ 'step' => 0.1,
	165	+ ],
128	166	],
129		- 'center' => [
130		- 'title' => esc_html__( 'Center', 'easy-elements' ),
131		- 'icon' => 'eicon-v-align-middle',
	167	+ 'default' => [
	168	+ 'size' => 64,
	169	+ 'unit' => 'px',
132	170	],
133		- 'flex-end' => [
134		- 'title' => esc_html__( 'Bottom', 'easy-elements' ),
135		- 'icon' => 'eicon-v-align-bottom',
	171	+ 'selectors' => [
	172	+ '{{WRAPPER}} .eel--process-list' => 'gap: {{SIZE}}{{UNIT}};',
136	173	],
137		- ],
138		- 'default' => 'center',
139		- 'toggle' => true,
140		- 'selectors' => [
141		- '{{WRAPPER}} .eel--process-list' => 'align-items: {{VALUE}};',
142		- ],
143		- ]
144		- );
	174	+ ]
	175	+ );
145	176
146		- $this->add_responsive_control(
147		- 'item_gap',
148		- [
149		- 'label' => esc_html__( 'Gap', 'easy-elements' ),
150		- 'type' => \Elementor\Controls_Manager::SLIDER,
151		- 'size_units' => [ 'px', 'em', 'rem' ],
152		- 'range' => [
153		- 'px' => [
154		- 'min' => 0,
155		- 'max' => 100,
156		- 'step' => 1,
	177	+ $this->end_controls_section();
	178	+
	179	+ $this->start_controls_section(
	180	+ 'section_style_icon',
	181	+ [
	182	+ 'label' => esc_html__( 'Icon', 'easy-elements' ),
	183	+ 'tab' => Controls_Manager::TAB_STYLE,
	184	+ ]
	185	+ );
	186	+
	187	+ $this->add_control(
	188	+ 'icon_color',
	189	+ [
	190	+ 'label' => esc_html__( 'Color', 'easy-elements' ),
	191	+ 'type' => Controls_Manager::COLOR,
	192	+ 'selectors' => [
	193	+ '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'color: {{VALUE}};',
	194	+ '{{WRAPPER}} .eel--process-list .eel-process-icon svg' => 'fill: {{VALUE}};',
157	195	],
158		- 'em' => [
159		- 'min' => 0,
160		- 'max' => 10,
161		- 'step' => 0.1,
	196	+ ]
	197	+ );
	198	+
	199	+ $this->add_control(
	200	+ 'icon_bg_color',
	201	+ [
	202	+ 'label' => esc_html__( 'Background', 'easy-elements' ),
	203	+ 'type' => Controls_Manager::COLOR,
	204	+ 'selectors' => [
	205	+ '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'background-color: {{VALUE}};',
162	206	],
163		- ],
164		- 'default' => [
165		- 'size' => 64,
166		- 'unit' => 'px',
167		- ],
168		- 'selectors' => [
169		- '{{WRAPPER}} .eel--process-list' => 'gap: {{SIZE}}{{UNIT}};',
170		- ],
171		- ]
172		- );
	207	+ ]
	208	+ );
173	209
174		- $this->end_controls_section();
	210	+ $this->add_group_control(
	211	+ \Elementor\Group_Control_Background::get_type(),
	212	+ [
	213	+ 'name' => 'icon_background',
	214	+ 'label' => esc_html__( 'Background', 'easy-elements' ),
	215	+ 'types' => [ 'classic', 'gradient' ],
	216	+ 'selector' => '{{WRAPPER}} .eel--process-list .eel-process-icon',
	217	+ ]
	218	+ );
175	219
176		- $this->start_controls_section(
177		- 'section_style_icon',
178		- [
179		- 'label' => esc_html__( 'Icon', 'easy-elements' ),
180		- 'tab' => Controls_Manager::TAB_STYLE,
181		- ]
182		- );
	220	+ $this->add_responsive_control(
	221	+ 'icon_size',
	222	+ [
	223	+ 'label' => esc_html__( 'Icon Size', 'easy-elements' ),
	224	+ 'type' => \Elementor\Controls_Manager::SLIDER,
	225	+ 'range' => [
	226	+ 'px' => [
	227	+ 'min' => 10,
	228	+ 'max' => 76,
	229	+ 'step' => 1,
	230	+ ],
	231	+ ],
	232	+ 'selectors' => [
	233	+ '{{WRAPPER}} .eel--process-list .eel-process-icon svg' => 'width: {{SIZE}}{{UNIT}};',
	234	+ '{{WRAPPER}} .eel--process-list .eel-process-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
	235	+ ],
	236	+ ]
	237	+ );
183	238
184		- $this->add_control(
185		- 'icon_color',
186		- [
187		- 'label' => esc_html__( 'Color', 'easy-elements' ),
188		- 'type' => Controls_Manager::COLOR,
189		- 'selectors' => [
190		- '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'color: {{VALUE}};',
191		- '{{WRAPPER}} .eel--process-list .eel-process-icon svg' => 'fill: {{VALUE}};',
192		- ],
193		- ]
194		- );
195	239
196		- $this->add_control(
197		- 'icon_bg_color',
198		- [
199		- 'label' => esc_html__( 'Background', 'easy-elements' ),
200		- 'type' => Controls_Manager::COLOR,
201		- 'selectors' => [
202		- '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'background-color: {{VALUE}};',
203		- ],
204		- ]
205		- );
	240	+ $this->add_group_control(
	241	+ \Elementor\Group_Control_Border::get_type(),
	242	+ [
	243	+ 'name' => 'icon_border',
	244	+ 'selector' => '{{WRAPPER}} .eel--process-list .eel-process-icon',
	245	+ ]
	246	+ );
206	247
207		- $this->add_group_control(
208		- \Elementor\Group_Control_Background::get_type(),
209		- [
210		- 'name' => 'icon_background',
211		- 'label' => esc_html__( 'Background', 'easy-elements' ),
212		- 'types' => [ 'classic', 'gradient' ],
213		- 'selector' => '{{WRAPPER}} .eel--process-list .eel-process-icon',
214		- ]
215		- );
	248	+ $this->add_control(
	249	+ 'icon__border_radius',
	250	+ [
	251	+ 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
	252	+ 'type' => \Elementor\Controls_Manager::DIMENSIONS,
	253	+ 'size_units' => [ 'px', '%' ],
	254	+ 'selectors' => [
	255	+ '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	256	+ ],
	257	+ ]
	258	+ );
216	259
217		- $this->add_responsive_control(
218		- 'icon_size',
219		- [
220		- 'label' => esc_html__( 'Icon Size', 'easy-elements' ),
221		- 'type' => \Elementor\Controls_Manager::SLIDER,
222		- 'range' => [
223		- 'px' => [
224		- 'min' => 10,
225		- 'max' => 76,
226		- 'step' => 1,
	260	+ $this->add_responsive_control(
	261	+ 'icon_padding',
	262	+ [
	263	+ 'label' => esc_html__( 'Padding', 'easy-elements' ),
	264	+ 'type' => \Elementor\Controls_Manager::DIMENSIONS,
	265	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
	266	+ 'selectors' => [
	267	+ '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
227	268	],
228		- ],
229		- 'selectors' => [
230		- '{{WRAPPER}} .eel--process-list .eel-process-icon svg' => 'width: {{SIZE}}{{UNIT}};',
231		- '{{WRAPPER}} .eel--process-list .eel-process-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
232		- ],
233		- ]
234		- );
	269	+ ]
	270	+ );
235	271
	272	+ $this->add_group_control(
	273	+ \Elementor\Group_Control_Box_Shadow::get_type(),
	274	+ [
	275	+ 'name' => 'icon_box_shadow',
	276	+ 'label' => esc_html__( 'Box Shadow', 'easy-elements' ),
	277	+ 'selector' => '{{WRAPPER}} .eel--process-list .eel-process-icon',
	278	+ ]
	279	+ );
236	280
237		- $this->add_group_control(
238		- \Elementor\Group_Control_Border::get_type(),
239		- [
240		- 'name' => 'icon_border',
241		- 'selector' => '{{WRAPPER}} .eel--process-list .eel-process-icon',
242		- ]
243		- );
	281	+ $this->add_responsive_control(
	282	+ 'icon_box_size',
	283	+ [
	284	+ 'label' => esc_html__( 'Box Size', 'easy-elements' ),
	285	+ 'type' => Controls_Manager::SLIDER,
	286	+ 'range' => [
	287	+ 'px' => [
	288	+ 'min' => 30,
	289	+ 'max' => 150,
	290	+ ],
	291	+ ],
	292	+ 'selectors' => [
	293	+ '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'width: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
	294	+ ],
	295	+ ]
	296	+ );
244	297
245		- $this->add_control(
246		- 'icon__border_radius',
247		- [
248		- 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
249		- 'type' => \Elementor\Controls_Manager::DIMENSIONS,
250		- 'size_units' => [ 'px', '%' ],
251		- 'selectors' => [
252		- '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
253		- ],
254		- ]
255		- );
	298	+ $this->end_controls_section();
256	299
257		- $this->add_responsive_control(
258		- 'icon_padding',
259		- [
260		- 'label' => esc_html__( 'Padding', 'easy-elements' ),
261		- 'type' => \Elementor\Controls_Manager::DIMENSIONS,
262		- 'size_units' => [ 'px', 'em', '%', 'rem' ],
263		- 'selectors' => [
264		- '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
265		- ],
266		- ]
267		- );
	300	+ $this->start_controls_section(
	301	+ 'section_style_title',
	302	+ [
	303	+ 'label' => esc_html__( 'Title', 'easy-elements' ),
	304	+ 'tab' => Controls_Manager::TAB_STYLE,
	305	+ ]
	306	+ );
268	307
269		- $this->add_group_control(
270		- \Elementor\Group_Control_Box_Shadow::get_type(),
271		- [
272		- 'name' => 'icon_box_shadow',
273		- 'label' => esc_html__( 'Box Shadow', 'easy-elements' ),
274		- 'selector' => '{{WRAPPER}} .eel--process-list .eel-process-icon',
275		- ]
276		- );
277		-
278		- $this->add_responsive_control(
279		- 'icon_box_size',
280		- [
281		- 'label' => esc_html__( 'Box Size', 'easy-elements' ),
282		- 'type' => Controls_Manager::SLIDER,
283		- 'range' => [
284		- 'px' => [
285		- 'min' => 30,
286		- 'max' => 150,
	308	+ $this->add_control(
	309	+ 'title_color',
	310	+ [
	311	+ 'label' => esc_html__( 'Color', 'easy-elements' ),
	312	+ 'type' => Controls_Manager::COLOR,
	313	+ 'selectors' => [
	314	+ '{{WRAPPER}} .icon-box-title' => 'color: {{VALUE}};',
287	315	],
288		- ],
289		- 'selectors' => [
290		- '{{WRAPPER}} .eel--process-list .eel-process-icon' => 'width: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
291		- ],
292		- ]
293		- );
	316	+ ]
	317	+ );
294	318
295		- $this->end_controls_section();
	319	+ $this->add_group_control(
	320	+ \Elementor\Group_Control_Typography::get_type(),
	321	+ [
	322	+ 'name' => 'box_title_typography',
	323	+ 'label' => esc_html__( 'Typography', 'easy-elements' ),
	324	+ 'selector' => '{{WRAPPER}} .icon-box-title',
	325	+ ]
	326	+ );
296	327
297		- $this->start_controls_section(
298		- 'section_style_title',
299		- [
300		- 'label' => esc_html__( 'Title', 'easy-elements' ),
301		- 'tab' => Controls_Manager::TAB_STYLE,
302		- ]
303		- );
	328	+ $this->add_responsive_control(
	329	+ 'title_margin',
	330	+ [
	331	+ 'label' => esc_html__( 'Margin', 'easy-elements' ),
	332	+ 'type' => \Elementor\Controls_Manager::DIMENSIONS,
	333	+ 'size_units' => [ 'px', '%', 'em', 'rem' ],
	334	+ 'selectors' => [
	335	+ '{{WRAPPER}} .eel--process-list .icon-box-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	336	+ ],
	337	+ ]
	338	+ );
304	339
305		- $this->add_control(
306		- 'title_color',
307		- [
308		- 'label' => esc_html__( 'Color', 'easy-elements' ),
309		- 'type' => Controls_Manager::COLOR,
310		- 'selectors' => [
311		- '{{WRAPPER}} .icon-box-title' => 'color: {{VALUE}};',
312		- ],
313		- ]
314		- );
	340	+ $this->end_controls_section();
315	341
316		- $this->add_group_control(
317		- \Elementor\Group_Control_Typography::get_type(),
318		- [
319		- 'name' => 'box_title_typography',
320		- 'label' => esc_html__( 'Typography', 'easy-elements' ),
321		- 'selector' => '{{WRAPPER}} .icon-box-title',
322		- ]
323		- );
	342	+ $this->start_controls_section(
	343	+ 'title_sub_style',[
	344	+ 'label' => esc_html__( 'Title Sub', 'easy-elements' ),
	345	+ 'tab' => Controls_Manager::TAB_STYLE,
	346	+ ]
	347	+ );
324	348
325		- $this->add_responsive_control(
326		- 'title_margin',
327		- [
328		- 'label' => esc_html__( 'Margin', 'easy-elements' ),
329		- 'type' => \Elementor\Controls_Manager::DIMENSIONS,
330		- 'size_units' => [ 'px', '%', 'em', 'rem' ],
331		- 'selectors' => [
332		- '{{WRAPPER}} .eel--process-list .icon-box-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
333		- ],
334		- ]
335		- );
	349	+ $this->add_control(
	350	+ 'title_sub_color',
	351	+ [
	352	+ 'label' => esc_html__( 'Color', 'easy-elements' ),
	353	+ 'type' => Controls_Manager::COLOR,
	354	+ 'selectors' => [
	355	+ '{{WRAPPER}} .icon-box-title span' => 'color: {{VALUE}};',
	356	+ ],
	357	+ ]
	358	+ );
336	359
337		- $this->end_controls_section();
	360	+ $this->add_group_control(
	361	+ \Elementor\Group_Control_Typography::get_type(),
	362	+ [
	363	+ 'name' => 'title_sub_typography',
	364	+ 'label' => esc_html__( 'Typography', 'easy-elements' ),
	365	+ 'selector' => '{{WRAPPER}} .icon-box-title span',
	366	+ ]
	367	+ );
	368	+
	369	+ $this->add_responsive_control(
	370	+ 'title_sub_margin',
	371	+ [
	372	+ 'label' => esc_html__( 'Margin', 'easy-elements' ),
	373	+ 'type' => \Elementor\Controls_Manager::DIMENSIONS,
	374	+ 'size_units' => [ 'px', '%', 'em', 'rem' ],
	375	+ 'selectors' => [
	376	+ '{{WRAPPER}} .eel--process-list .icon-box-title span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	377	+ ],
	378	+ ]
	379	+ );
338	380
339		- $this->start_controls_section(
340		- 'title_sub_style',[
341		- 'label' => esc_html__( 'Highlight Title', 'easy-elements' ),
342		- 'tab' => Controls_Manager::TAB_STYLE,
343		- ]
344		- );
	381	+ $this->end_controls_section();
345	382
346		- $this->add_control(
347		- 'title_highlight_note',
348		- [
349		- 'type' => \Elementor\Controls_Manager::RAW_HTML,
350		- 'raw' => __( 'Highlight options work only when part of the title is wrapped in a &lt;span&gt; tag.', 'easy-elements' ),
351		- 'content_classes' => 'elementor-control-field-description',
352		- ]
353		- );
	383	+ $this->start_controls_section(
	384	+ 'section_style_description',
	385	+ [
	386	+ 'label' => esc_html__( 'Description', 'easy-elements' ),
	387	+ 'tab' => Controls_Manager::TAB_STYLE,
	388	+ ]
	389	+ );
354	390
355		- $this->add_control(
356		- 'title_sub_color',
357		- [
358		- 'label' => esc_html__( 'Color', 'easy-elements' ),
359		- 'type' => Controls_Manager::COLOR,
360		- 'selectors' => [
361		- '{{WRAPPER}} .icon-box-title span' => 'color: {{VALUE}};',
362		- ],
363		- ]
364		- );
	391	+ $this->add_control(
	392	+ 'desc_color',
	393	+ [
	394	+ 'label' => esc_html__( 'Color', 'easy-elements' ),
	395	+ 'type' => Controls_Manager::COLOR,
	396	+ 'selectors' => [
	397	+ '{{WRAPPER}} .icon-box-description' => 'color: {{VALUE}};',
	398	+ ],
	399	+ ]
	400	+ );
365	401
366		- $this->add_group_control(
367		- \Elementor\Group_Control_Typography::get_type(),
368		- [
369		- 'name' => 'title_sub_typography',
370		- 'label' => esc_html__( 'Typography', 'easy-elements' ),
371		- 'selector' => '{{WRAPPER}} .icon-box-title span',
372		- ]
373		- );
374		-
375		- $this->add_responsive_control(
376		- 'title_sub_margin',
377		- [
378		- 'label' => esc_html__( 'Margin', 'easy-elements' ),
379		- 'type' => \Elementor\Controls_Manager::DIMENSIONS,
380		- 'size_units' => [ 'px', '%', 'em', 'rem' ],
381		- 'selectors' => [
382		- '{{WRAPPER}} .eel--process-list .icon-box-title span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
383		- ],
384		- ]
385		- );
	402	+ $this->add_group_control(
	403	+ \Elementor\Group_Control_Typography::get_type(),
	404	+ [
	405	+ 'name' => 'box_desc_typography',
	406	+ 'label' => esc_html__( 'Typography', 'easy-elements' ),
	407	+ 'selector' => '{{WRAPPER}} .icon-box-description',
	408	+ ]
	409	+ );
386	410
387		- $this->end_controls_section();
	411	+ $this->end_controls_section();
388	412
389		- $this->start_controls_section(
390		- 'section_style_description',
391		- [
392		- 'label' => esc_html__( 'Description', 'easy-elements' ),
393		- 'tab' => Controls_Manager::TAB_STYLE,
394		- ]
395		- );
	413	+ $this->start_controls_section(
	414	+ 'section_process_number',
	415	+ [
	416	+ 'label' => esc_html__( 'Number', 'easy-elements' ),
	417	+ 'tab' => Controls_Manager::TAB_STYLE,
	418	+ ]
	419	+ );
396	420
397		- $this->add_control(
398		- 'desc_color',
	421	+ $this->add_control(
	422	+ 'process_number_color',
399	423	[
400	424	'label' => esc_html__( 'Color', 'easy-elements' ),
401		- 'type' => Controls_Manager::COLOR,
	425	+ 'type' => \Elementor\Controls_Manager::COLOR,
402	426	'selectors' => [
403		- '{{WRAPPER}} .icon-box-description' => 'color: {{VALUE}};',
	427	+ '{{WRAPPER}} .eel-pro-number' => 'color: {{VALUE}};',
404	428	],
405	429	]
406		- );
	430	+ );
407	431
408		- $this->add_group_control(
409		- \Elementor\Group_Control_Typography::get_type(),
410		- [
411		- 'name' => 'box_desc_typography',
412		- 'label' => esc_html__( 'Typography', 'easy-elements' ),
413		- 'selector' => '{{WRAPPER}} .icon-box-description',
414		- ]
415		- );
	432	+ $this->add_group_control(
	433	+ \Elementor\Group_Control_Typography::get_type(),
	434	+ [
	435	+ 'name' => 'number_typography',
	436	+ 'label' => esc_html__( 'Typography', 'easy-elements' ),
	437	+ 'selector' => '{{WRAPPER}} .eel-pro-number',
	438	+ ]
	439	+ );
416	440
417		- $this->end_controls_section();
	441	+ $this->end_controls_section();
	442	+ }
418	443
419		- $this->start_controls_section(
420		- 'section_process_number',
421		- [
422		- 'label' => esc_html__( 'Number', 'easy-elements' ),
423		- 'tab' => Controls_Manager::TAB_STYLE,
424		- ]
425		- );
	444	+ protected function render() {
	445	+ $settings = $this->get_settings_for_display();
	446	+ $link = $settings['link']['url'] ?? '';
	447	+ $target = ! empty( $settings['link']['is_external'] ) ? ' target="_blank"' : '';
	448	+ $nofollow = ! empty( $settings['link']['nofollow'] ) ? ' rel="nofollow"' : '';
	449	+ ?>
	450	+ <div class="eel-process-wrap-list">
	451	+ <div class="eel--process-list">
	452	+ <?php if ( $link ) : ?>
	453	+ <a href="<?php echo esc_url( $link ); ?>" <?php echo esc_attr( $target ); ?> <?php echo esc_attr( $nofollow ); ?>>
	454	+ <?php endif; ?>
426	455
427		- $this->add_control(
428		- 'process_number_color',
429		- [
430		- 'label' => esc_html__( 'Color', 'easy-elements' ),
431		- 'type' => \Elementor\Controls_Manager::COLOR,
432		- 'selectors' => [
433		- '{{WRAPPER}} .eel-pro-number' => 'color: {{VALUE}};',
434		- ],
435		- ]
436		- );
	456	+ <?php if ( ! empty( $settings['process_number'] ) ) : ?>
	457	+ <span class="eel-pro-number"><?php echo esc_html( $settings['process_number'] ); ?></span>
	458	+ <?php endif; ?>
437	459
438		- $this->add_group_control(
439		- \Elementor\Group_Control_Typography::get_type(),
440		- [
441		- 'name' => 'number_typography',
442		- 'label' => esc_html__( 'Typography', 'easy-elements' ),
443		- 'selector' => '{{WRAPPER}} .eel-pro-number',
444		- ]
445		- );
	460	+ <?php
	461	+ if ( isset( $settings['icon']['value'] ) && ! empty( $settings['icon']['value'] ) ) { ?>
	462	+ <span class="eel-process-icon"><?php \Elementor\Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] ); ?></span>
	463	+ <?php } ?>
	464	+
	465	+ <div class="eel-process-wrap">
	466	+ <?php if ( ! empty( $settings['process_title'] ) ) :
	467	+ $title_tag = isset( $settings['title_tag'] ) ? $settings['title_tag'] : 'h3'; ?>
	468	+ <<?php echo esc_attr( $title_tag ); ?> class="icon-box-title">
	469	+ <?php
	470	+ $allowed_tags = wp_kses_allowed_html('post');
	471	+ echo wp_kses( $settings['process_title'], $allowed_tags );
	472	+ ?>
	473	+ </<?php echo esc_attr( $title_tag ); ?>>
	474	+ <?php endif; ?>
446	475
447		- $this->end_controls_section();
448		- }
	476	+ <?php if ( ! empty( $settings['_description'] ) ) : ?>
	477	+ <div class="icon-box-description"><?php echo wp_kses_post( $settings['_description'] ); ?></div>
	478	+ <?php endif; ?>
	479	+ </div>
449	480
450		- protected function render() {
451		- $settings = $this->get_settings_for_display();
452		- $link = $settings['link']['url'] ?? '';
453		- $target = ! empty( $settings['link']['is_external'] ) ? ' target="_blank"' : '';
454		- $nofollow = ! empty( $settings['link']['nofollow'] ) ? ' rel="nofollow"' : '';
455		- ?>
456		- <div class="eel-process-wrap-list">
457		- <?php if ( $link ) : ?>
458		- <a href="<?php echo esc_url( $link ); ?>" <?php echo esc_attr( $target ); ?> <?php echo esc_attr( $nofollow ); ?>>
459		- <?php endif; ?>
460		- <div class="eel--process-list">
461		- <?php if ( ! empty( $settings['process_number'] ) ) : ?>
462		- <span class="eel-pro-number"><?php echo esc_html( $settings['process_number'] ); ?></span>
463		- <?php endif; ?>
464		-
465		- <?php
466		- if ( isset( $settings['icon']['value'] ) && ! empty( $settings['icon']['value'] ) ) { ?>
467		- <span class="eel-process-icon"><?php \Elementor\Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] ); ?></span>
468		- <?php } ?>
469		-
470		- <div class="eel-process-wrap">
471		- <?php if ( ! empty( $settings['process_title'] ) ) :
472		- $title_tag = isset( $settings['title_tag'] ) ? $settings['title_tag'] : 'h3'; ?>
473		- <<?php echo esc_attr( $title_tag ); ?> class="icon-box-title">
474		- <?php
475		- $allowed_tags = wp_kses_allowed_html('post');
476		- echo wp_kses( $settings['process_title'], $allowed_tags );
477		- ?>
478		- </<?php echo esc_attr( $title_tag ); ?>>
	481	+ <?php if ( $link ) : ?>
	482	+ </a>
479	483	<?php endif; ?>
480		-
481		- <?php if ( ! empty( $settings['_description'] ) ) : ?>
482		- <div class="icon-box-description"><?php echo wp_kses_post( $settings['_description'] ); ?></div>
483		- <?php endif; ?>
484		- </div>
485		- </div>
486		- <?php if ( $link ) : ?>
487		- </a>
488		- <?php endif; ?>
489		- </div>
490		- <?php
	484	+ </div>
	485	+ </div>
	486	+ <?php
	487	+ }
491	488	}
492		-}
	489	+}
	490	+?>