← All changes | includes/widgets/counter.php +1191 -1184 1.2.2 → 1.3.17 View file →

		@@ -1,5 +1,6 @@
1	1	<?php
	2	+
2	3	namespace UiCoreElements;
3	4
4	5	use Elementor\Controls_Manager;
5	6	use Elementor\Icons_Manager;
		@@ -21,31 +22,31 @@
21	22
22	23	class Counter extends UiCoreWidget
23	24	{
24	25
25		- public function get_name()
26		- {
27		- return 'uicore-counter';
28		- }
29		- public function get_title()
30		- {
31		- return __( 'Counter', 'uicore-elements' );
32		- }
33		- public function get_icon()
34		- {
35		- return 'eicon-counter ui-e-widget';
36		- }
	26	+ public function get_name()
	27	+ {
	28	+ return 'uicore-counter';
	29	+ }
	30	+ public function get_title()
	31	+ {
	32	+ return __('Counter', 'uicore-elements');
	33	+ }
	34	+ public function get_icon()
	35	+ {
	36	+ return 'eicon-counter ui-e-widget';
	37	+ }
37	38	public function get_keywords()
38	39	{
39	40	return ['counter', 'count', 'number'];
40	41	}
41		- public function get_categories()
42		- {
43		- return [ 'uicore' ];
44		- }
45		- public function get_styles()
46		- {
47		- return [
	42	+ public function get_categories()
	43	+ {
	44	+ return ['uicore'];
	45	+ }
	46	+ public function get_styles()
	47	+ {
	48	+ return [
48	49	'counter',
49	50	'counter-motion' => [
50	51	'condition' => [
51	52	'counter_animation' => 'motion',
		@@ -51,436 +52,434 @@
51	52	'counter_animation' => 'motion',
52	53	],
53	54	],
54	55	];
55		- }
	56	+ }
56	57	public function get_scripts()
57		- {
58		- return [
59		- 'counter',
60		- 'odometer' => [
61		- 'condition' => [
62		- 'counter_animation' => 'odometer',
63		- ],
64		- ]
65		- ];
66		- }
67		- // TODO: remove or set as false, after 3.30, when the full deprecation of widget innet wrapper is ready
68		- public function has_widget_inner_wrapper(): bool {
69		- return true;
70		- }
71		- protected function register_controls()
72		- {
	58	+ {
	59	+ return [
	60	+ 'counter',
	61	+ 'odometer' => [
	62	+ 'condition' => [
	63	+ 'counter_animation' => 'odometer',
	64	+ ],
	65	+ ]
	66	+ ];
	67	+ }
	68	+ protected function register_controls()
	69	+ {
73	70
74	71	$this->start_controls_section(
75	72	'content_section',
76	73	[
77		- 'label' => __( 'Counter', 'uicore-elements' ),
	74	+ 'label' => __('Counter', 'uicore-elements'),
78	75	'tab' => Controls_Manager::TAB_CONTENT,
79	76	]
80	77	);
81	78
82		- $this->add_control(
83		- 'show_icon',
84		- [
85		- 'label' => esc_html__( 'Show Icon', 'uicore-elements' ),
86		- 'type' => Controls_Manager::SWITCHER,
87		- 'label_on' => esc_html__( 'Show', 'uicore-elements' ),
88		- 'label_off' => esc_html__( 'Hide', 'uicore-elements' ),
89		- 'return_value' => 'true',
90		- 'prefix_class' => 'ui-e-counter-media-',
91		- 'render_type' => 'template',
92		- ]
93		- );
	79	+ $this->add_control(
	80	+ 'show_icon',
	81	+ [
	82	+ 'label' => esc_html__('Show Icon', 'uicore-elements'),
	83	+ 'type' => Controls_Manager::SWITCHER,
	84	+ 'label_on' => esc_html__('Show', 'uicore-elements'),
	85	+ 'label_off' => esc_html__('Hide', 'uicore-elements'),
	86	+ 'return_value' => 'true',
	87	+ 'prefix_class' => 'ui-e-counter-media-',
	88	+ 'render_type' => 'template',
	89	+ ]
	90	+ );
94	91
95		- $this->add_control(
96		- 'icon_type',
97		- [
98		- 'label' => esc_html__( 'Icon Type', 'uicore-elements' ),
99		- 'type' => Controls_Manager::CHOOSE,
100		- 'options' => [
101		- 'icon' => [
102		- 'title' => esc_html__( 'Icon', 'uicore-elements' ),
103		- 'icon' => 'eicon-star',
104		- ],
105		- 'image' => [
106		- 'title' => esc_html__( 'Image', 'uicore-elements' ),
107		- 'icon' => 'eicon-image-bold',
108		- ],
109		-
	92	+ $this->add_control(
	93	+ 'icon_type',
	94	+ [
	95	+ 'label' => esc_html__('Icon Type', 'uicore-elements'),
	96	+ 'type' => Controls_Manager::CHOOSE,
	97	+ 'options' => [
	98	+ 'icon' => [
	99	+ 'title' => esc_html__('Icon', 'uicore-elements'),
	100	+ 'icon' => 'eicon-star',
110	101	],
111		- 'default' => 'icon',
112		- 'toggle' => false,
113		- 'condition' => [
114		- 'show_icon' => 'true',
	102	+ 'image' => [
	103	+ 'title' => esc_html__('Image', 'uicore-elements'),
	104	+ 'icon' => 'eicon-image-bold',
115	105	],
116		- ]
117		- );
118	106
119		- $this->add_control(
120		- 'selected_icon',
121		- [
122		- 'label' => esc_html__( 'Choose icon', 'uicore-elements' ),
123		- 'type' => Controls_Manager::ICONS,
124		- 'condition' => [
125		- 'show_icon' => 'true',
126		- 'icon_type' => 'icon',
127		- ],
128		- ]
129		- );
	107	+ ],
	108	+ 'default' => 'icon',
	109	+ 'toggle' => false,
	110	+ 'condition' => [
	111	+ 'show_icon' => 'true',
	112	+ ],
	113	+ ]
	114	+ );
130	115
131		- $this->add_control(
132		- 'image',
133		- [
134		- 'label' => esc_html__( 'Choose Image', 'uicore-elements' ),
135		- 'type' => Controls_Manager::MEDIA,
136		- 'condition' => [
137		- 'show_icon' => 'true',
138		- 'icon_type' => 'image',
139		- ],
140		- 'dynamic' => [
141		- 'active' => true,
142		- ],
143		- ]
144		- );
	116	+ $this->add_control(
	117	+ 'selected_icon',
	118	+ [
	119	+ 'label' => esc_html__('Choose icon', 'uicore-elements'),
	120	+ 'type' => Controls_Manager::ICONS,
	121	+ 'condition' => [
	122	+ 'show_icon' => 'true',
	123	+ 'icon_type' => 'icon',
	124	+ ],
	125	+ ]
	126	+ );
145	127
146		- $this->add_control(
147		- 'count_start',
148		- [
149		- 'label' => esc_html__( 'Starting number', 'uicore-elements' ),
150		- 'type' => Controls_Manager::NUMBER,
151		- 'step' => 1,
152		- 'default' => 10,
153		- 'frontend_available' => true,
154		- 'dynamic' => [
155		- 'active' => true,
156		- ],
157		- 'condition' =>[
158		- 'counter_animation!' => ['motion'],
159		- ],
160		- ]
161		- );
	128	+ $this->add_control(
	129	+ 'image',
	130	+ [
	131	+ 'label' => esc_html__('Choose Image', 'uicore-elements'),
	132	+ 'type' => Controls_Manager::MEDIA,
	133	+ 'condition' => [
	134	+ 'show_icon' => 'true',
	135	+ 'icon_type' => 'image',
	136	+ ],
	137	+ 'dynamic' => [
	138	+ 'active' => true,
	139	+ ],
	140	+ ]
	141	+ );
162	142
163		- $this->add_control(
164		- 'count_end',
165		- [
166		- 'label' => esc_html__( 'Ending number', 'uicore-elements' ),
167		- 'type' => Controls_Manager::NUMBER,
168		- 'step' => 1,
169		- 'default' => 120,
170		- 'frontend_available' => true,
171		- 'dynamic' => [
172		- 'active' => true,
173		- ],
174		- 'condition' =>[
175		- 'counter_animation!' => ['motion'],
176		- ],
177		- ]
178		- );
	143	+ $this->add_control(
	144	+ 'count_start',
	145	+ [
	146	+ 'label' => esc_html__('Starting number', 'uicore-elements'),
	147	+ 'type' => Controls_Manager::NUMBER,
	148	+ 'step' => 1,
	149	+ 'default' => 10,
	150	+ 'frontend_available' => true,
	151	+ 'dynamic' => [
	152	+ 'active' => true,
	153	+ ],
	154	+ 'condition' => [
	155	+ 'counter_animation!' => ['motion'],
	156	+ ],
	157	+ ]
	158	+ );
179	159
180		- $this->add_control(
181		- 'count_number',
182		- [
183		- 'label' => esc_html__( 'Number', 'uicore-elements' ),
184		- 'type' => Controls_Manager::TEXT,
185		- 'default' => '120,00',
186		- 'frontend_available' => true,
187		- 'label_block' => true,
188		- 'dynamic' => [
189		- 'active' => true,
190		- ],
191		- 'condition' =>[
192		- 'counter_animation' => ['motion'],
193		- ],
194		- ]
195		- );
	160	+ $this->add_control(
	161	+ 'count_end',
	162	+ [
	163	+ 'label' => esc_html__('Ending number', 'uicore-elements'),
	164	+ 'type' => Controls_Manager::NUMBER,
	165	+ 'step' => 1,
	166	+ 'default' => 120,
	167	+ 'frontend_available' => true,
	168	+ 'dynamic' => [
	169	+ 'active' => true,
	170	+ ],
	171	+ 'condition' => [
	172	+ 'counter_animation!' => ['motion'],
	173	+ ],
	174	+ ]
	175	+ );
196	176
197		- $this->add_control(
198		- 'counter_html_tag',
199		- [
200		- 'label' => esc_html__( 'Number HTML class', 'uicore-elements' ),
201		- 'type' => Controls_Manager::SELECT,
202		- 'default' => 'h1',
203		- 'options' => [
204		- 'h1' => esc_html__( 'H1', 'uicore-elements' ),
205		- 'h2' => esc_html__( 'H2', 'uicore-elements' ),
206		- 'h3' => esc_html__( 'H3', 'uicore-elements' ),
207		- 'h4' => esc_html__( 'H4', 'uicore-elements' ),
208		- 'h5' => esc_html__( 'H5', 'uicore-elements' ),
209		- 'h6' => esc_html__( 'H6', 'uicore-elements' ),
210		- 'p' => esc_html__( 'p', 'uicore-elements' ),
211		- 'span' => esc_html__( 'span', 'uicore-elements' ),
212		- ],
213		- ]
214		- );
	177	+ $this->add_control(
	178	+ 'count_number',
	179	+ [
	180	+ 'label' => esc_html__('Number', 'uicore-elements'),
	181	+ 'type' => Controls_Manager::TEXT,
	182	+ 'default' => '120,00',
	183	+ 'frontend_available' => true,
	184	+ 'label_block' => true,
	185	+ 'dynamic' => [
	186	+ 'active' => true,
	187	+ ],
	188	+ 'condition' => [
	189	+ 'counter_animation' => ['motion'],
	190	+ ],
	191	+ ]
	192	+ );
215	193
216		- $this->add_control(
217		- 'content_text',
218		- [
219		- 'label' => esc_html__( 'Title', 'uicore-elements' ),
220		- 'type' => Controls_Manager::TEXT,
221		- 'default' => esc_html__( 'Awesome number', 'uicore-elements' ),
222		- 'placeholder' => esc_html__( 'Type your title here', 'uicore-elements' ),
223		- 'separator' => 'before',
224		- 'label_block' => true,
225		- 'dynamic' => [
226		- 'active' => true,
227		- ],
228		- ]
229		- );
	194	+ $this->add_control(
	195	+ 'counter_html_tag',
	196	+ [
	197	+ 'label' => esc_html__('Number HTML class', 'uicore-elements'),
	198	+ 'type' => Controls_Manager::SELECT,
	199	+ 'default' => 'h1',
	200	+ 'options' => [
	201	+ 'h1' => esc_html__('H1', 'uicore-elements'),
	202	+ 'h2' => esc_html__('H2', 'uicore-elements'),
	203	+ 'h3' => esc_html__('H3', 'uicore-elements'),
	204	+ 'h4' => esc_html__('H4', 'uicore-elements'),
	205	+ 'h5' => esc_html__('H5', 'uicore-elements'),
	206	+ 'h6' => esc_html__('H6', 'uicore-elements'),
	207	+ 'p' => esc_html__('p', 'uicore-elements'),
	208	+ 'span' => esc_html__('span', 'uicore-elements'),
	209	+ ],
	210	+ ]
	211	+ );
230	212
231		- $this->add_control(
232		- 'content_html_tag',
233		- [
234		- 'label' => esc_html__( 'Title HTML tag', 'uicore-elements' ),
235		- 'type' => Controls_Manager::SELECT,
236		- 'default' => 'p',
237		- 'options' => [
238		- 'H1' => esc_html__( 'H1', 'uicore-elements' ),
239		- 'H2' => esc_html__( 'H2', 'uicore-elements' ),
240		- 'H3' => esc_html__( 'H3', 'uicore-elements' ),
241		- 'H4' => esc_html__( 'H4', 'uicore-elements' ),
242		- 'H5' => esc_html__( 'H5', 'uicore-elements' ),
243		- 'H6' => esc_html__( 'H6', 'uicore-elements' ),
244		- 'p' => esc_html__( 'p', 'uicore-elements' ),
245		- 'span' => esc_html__( 'span', 'uicore-elements' ),
246		- ],
247		- ]
248		- );
	213	+ $this->add_control(
	214	+ 'content_text',
	215	+ [
	216	+ 'label' => esc_html__('Title', 'uicore-elements'),
	217	+ 'type' => Controls_Manager::TEXT,
	218	+ 'default' => esc_html__('Awesome number', 'uicore-elements'),
	219	+ 'placeholder' => esc_html__('Type your title here', 'uicore-elements'),
	220	+ 'separator' => 'before',
	221	+ 'label_block' => true,
	222	+ 'dynamic' => [
	223	+ 'active' => true,
	224	+ ],
	225	+ ]
	226	+ );
249	227
250		- $this->add_control(
251		- 'counter_text_inline',
252		- [
253		- 'label' => esc_html__( 'Text inline', 'uicore-elements' ),
254		- 'type' => Controls_Manager::SWITCHER,
255		- 'label_on' => esc_html__( 'True', 'uicore-elements' ),
256		- 'label_off' => esc_html__( 'False', 'uicore-elements' ),
257		- 'return_value' => 'true',
258		- 'prefix_class' => 'ui-e-inline-',
259		- 'render_type' => 'template',
260		- 'default' => false,
261		- ]
262		- );
	228	+ $this->add_control(
	229	+ 'content_html_tag',
	230	+ [
	231	+ 'label' => esc_html__('Title HTML tag', 'uicore-elements'),
	232	+ 'type' => Controls_Manager::SELECT,
	233	+ 'default' => 'p',
	234	+ 'options' => [
	235	+ 'H1' => esc_html__('H1', 'uicore-elements'),
	236	+ 'H2' => esc_html__('H2', 'uicore-elements'),
	237	+ 'H3' => esc_html__('H3', 'uicore-elements'),
	238	+ 'H4' => esc_html__('H4', 'uicore-elements'),
	239	+ 'H5' => esc_html__('H5', 'uicore-elements'),
	240	+ 'H6' => esc_html__('H6', 'uicore-elements'),
	241	+ 'p' => esc_html__('p', 'uicore-elements'),
	242	+ 'span' => esc_html__('span', 'uicore-elements'),
	243	+ ],
	244	+ ]
	245	+ );
263	246
264		- $this->add_control(
265		- 'icon_position',
266		- [
267		- 'label' => esc_html__( 'Icon position', 'uicore-elements' ),
268		- 'type' => Controls_Manager::CHOOSE,
269		- 'options' => [
270		- 'left' => [
271		- 'title' => esc_html__( 'Left', 'uicore-elements' ),
272		- 'icon' => 'eicon-h-align-left',
273		- ],
274		- 'top' => [
275		- 'title' => esc_html__( 'Top', 'uicore-elements' ),
276		- 'icon' => 'eicon-v-align-top',
277		- ],
278		- 'right' => [
279		- 'title' => esc_html__( 'Right', 'uicore-elements' ),
280		- 'icon' => 'eicon-h-align-right',
281		- ],
	247	+ $this->add_control(
	248	+ 'counter_text_inline',
	249	+ [
	250	+ 'label' => esc_html__('Text inline', 'uicore-elements'),
	251	+ 'type' => Controls_Manager::SWITCHER,
	252	+ 'label_on' => esc_html__('True', 'uicore-elements'),
	253	+ 'label_off' => esc_html__('False', 'uicore-elements'),
	254	+ 'return_value' => 'true',
	255	+ 'prefix_class' => 'ui-e-inline-',
	256	+ 'render_type' => 'template',
	257	+ 'default' => false,
	258	+ ]
	259	+ );
	260	+
	261	+ $this->add_control(
	262	+ 'icon_position',
	263	+ [
	264	+ 'label' => esc_html__('Icon position', 'uicore-elements'),
	265	+ 'type' => Controls_Manager::CHOOSE,
	266	+ 'options' => [
	267	+ 'left' => [
	268	+ 'title' => esc_html__('Left', 'uicore-elements'),
	269	+ 'icon' => 'eicon-h-align-left',
282	270	],
283		- 'default' => 'top',
284		- 'toggle' => false,
285		- 'condition' =>[
286		- 'show_icon' => 'true',
287		- 'counter_text_inline!' => 'true',
	271	+ 'top' => [
	272	+ 'title' => esc_html__('Top', 'uicore-elements'),
	273	+ 'icon' => 'eicon-v-align-top',
288	274	],
289		- 'prefix_class' => 'ui-e-',
290		- 'render_type' => 'template',
291		- ]
292		- );
	275	+ 'right' => [
	276	+ 'title' => esc_html__('Right', 'uicore-elements'),
	277	+ 'icon' => 'eicon-h-align-right',
	278	+ ],
	279	+ ],
	280	+ 'default' => 'top',
	281	+ 'toggle' => false,
	282	+ 'condition' => [
	283	+ 'show_icon' => 'true',
	284	+ 'counter_text_inline!' => 'true',
	285	+ ],
	286	+ 'prefix_class' => 'ui-e-',
	287	+ 'render_type' => 'template',
	288	+ ]
	289	+ );
293	290
294		- $this->add_control(
295		- 'icon_position_inline',
296		- [
297		- 'label' => esc_html__( 'Icon position', 'uicore-elements' ),
298		- 'type' => Controls_Manager::CHOOSE,
299		- 'options' => [
300		- 'left' => [
301		- 'title' => esc_html__( 'Left', 'uicore-elements' ),
302		- 'icon' => 'eicon-h-align-left',
303		- ],
304		- 'right' => [
305		- 'title' => esc_html__( 'Right', 'uicore-elements' ),
306		- 'icon' => 'eicon-h-align-right',
307		- ],
	291	+ $this->add_control(
	292	+ 'icon_position_inline',
	293	+ [
	294	+ 'label' => esc_html__('Icon position', 'uicore-elements'),
	295	+ 'type' => Controls_Manager::CHOOSE,
	296	+ 'options' => [
	297	+ 'left' => [
	298	+ 'title' => esc_html__('Left', 'uicore-elements'),
	299	+ 'icon' => 'eicon-h-align-left',
308	300	],
309		- 'default' => 'left',
310		- 'toggle' => false,
311		- 'condition' =>[
312		- 'show_icon' => 'true',
313		- 'counter_text_inline' => 'true',
	301	+ 'right' => [
	302	+ 'title' => esc_html__('Right', 'uicore-elements'),
	303	+ 'icon' => 'eicon-h-align-right',
314	304	],
315		- 'prefix_class' => 'ui-e-',
316		- 'render_type' => 'template',
317		- ]
318		- );
	305	+ ],
	306	+ 'default' => 'left',
	307	+ 'toggle' => false,
	308	+ 'condition' => [
	309	+ 'show_icon' => 'true',
	310	+ 'counter_text_inline' => 'true',
	311	+ ],
	312	+ 'prefix_class' => 'ui-e-',
	313	+ 'render_type' => 'template',
	314	+ ]
	315	+ );
319	316
320		- $this->add_control(
321		- 'vertical_align',
322		- [
323		- 'label' => esc_html__( 'Vertical position', 'uicore-elements' ),
324		- 'type' => Controls_Manager::CHOOSE,
325		- 'options' => [
326		- 'start' => [
327		- 'title' => esc_html__( 'Top', 'uicore-elements' ),
328		- 'icon' => 'eicon-v-align-top',
329		- ],
330		- 'center' => [
331		- 'title' => esc_html__( 'Center', 'uicore-elements' ),
332		- 'icon' => 'eicon-v-align-middle',
333		- ],
334		- 'end' => [
335		- 'title' => esc_html__( 'Bottom', 'uicore-elements' ),
336		- 'icon' => 'eicon-v-align-bottom',
337		- ],
	317	+ $this->add_control(
	318	+ 'vertical_align',
	319	+ [
	320	+ 'label' => esc_html__('Vertical position', 'uicore-elements'),
	321	+ 'type' => Controls_Manager::CHOOSE,
	322	+ 'options' => [
	323	+ 'start' => [
	324	+ 'title' => esc_html__('Top', 'uicore-elements'),
	325	+ 'icon' => 'eicon-v-align-top',
338	326	],
339		- 'default' => 'center',
340		- 'toggle' => false,
341		- 'selectors' => [
342		- '{{WRAPPER}} > div' => 'align-items: {{VALUE}};',
	327	+ 'center' => [
	328	+ 'title' => esc_html__('Center', 'uicore-elements'),
	329	+ 'icon' => 'eicon-v-align-middle',
343	330	],
344		- 'condition' => [
345		- 'icon_position!' => ['top'],
346		- 'counter_text_inline!' => ['true'],
	331	+ 'end' => [
	332	+ 'title' => esc_html__('Bottom', 'uicore-elements'),
	333	+ 'icon' => 'eicon-v-align-bottom',
347	334	],
348		- ]
349		- );
	335	+ ],
	336	+ 'default' => 'center',
	337	+ 'toggle' => false,
	338	+ 'selectors' => [
	339	+ '{{WRAPPER}} > div' => 'align-items: {{VALUE}};',
	340	+ ],
	341	+ 'condition' => [
	342	+ 'icon_position!' => ['top'],
	343	+ 'counter_text_inline!' => ['true'],
	344	+ ],
	345	+ ]
	346	+ );
350	347
351		- $this->add_control(
352		- 'vertical_align_inline',
353		- [
354		- 'label' => esc_html__( 'Vertical position', 'uicore-elements' ),
355		- 'type' => Controls_Manager::CHOOSE,
356		- 'options' => [
357		- 'start' => [
358		- 'title' => esc_html__( 'Top', 'uicore-elements' ),
359		- 'icon' => 'eicon-v-align-top',
360		- ],
361		- 'center' => [
362		- 'title' => esc_html__( 'Center', 'uicore-elements' ),
363		- 'icon' => 'eicon-v-align-middle',
364		- ],
365		- 'end' => [
366		- 'title' => esc_html__( 'Bottom', 'uicore-elements' ),
367		- 'icon' => 'eicon-v-align-bottom',
368		- ],
	348	+ $this->add_control(
	349	+ 'vertical_align_inline',
	350	+ [
	351	+ 'label' => esc_html__('Vertical position', 'uicore-elements'),
	352	+ 'type' => Controls_Manager::CHOOSE,
	353	+ 'options' => [
	354	+ 'start' => [
	355	+ 'title' => esc_html__('Top', 'uicore-elements'),
	356	+ 'icon' => 'eicon-v-align-top',
369	357	],
370		- 'default' => 'center',
371		- 'toggle' => false,
372		- 'selectors' => [
373		- '{{WRAPPER}} > div' => 'align-items: {{VALUE}};',
	358	+ 'center' => [
	359	+ 'title' => esc_html__('Center', 'uicore-elements'),
	360	+ 'icon' => 'eicon-v-align-middle',
374	361	],
375		- 'condition' => [
376		- 'counter_text_inline' => ['true'],
	362	+ 'end' => [
	363	+ 'title' => esc_html__('Bottom', 'uicore-elements'),
	364	+ 'icon' => 'eicon-v-align-bottom',
377	365	],
378		- ]
379		- );
	366	+ ],
	367	+ 'default' => 'center',
	368	+ 'toggle' => false,
	369	+ 'selectors' => [
	370	+ '{{WRAPPER}} > div' => 'align-items: {{VALUE}};',
	371	+ ],
	372	+ 'condition' => [
	373	+ 'counter_text_inline' => ['true'],
	374	+ ],
	375	+ ]
	376	+ );
380	377
381		- $this->add_control(
382		- 'text_align',
383		- [
384		- 'label' => esc_html__( 'Text Align', 'uicore-elements' ),
385		- 'type' => Controls_Manager::CHOOSE,
386		- 'options' => [
387		- 'left' => [
388		- 'title' => esc_html__( 'Left', 'uicore-elements' ),
389		- 'icon' => 'eicon-text-align-left',
390		- ],
391		- 'center' => [
392		- 'title' => esc_html__( 'Center', 'uicore-elements' ),
393		- 'icon' => 'eicon-text-align-center',
394		- ],
395		- 'right' => [
396		- 'title' => esc_html__( 'Right', 'uicore-elements' ),
397		- 'icon' => 'eicon-text-align-right',
398		- ],
	378	+ $this->add_responsive_control(
	379	+ 'text_align',
	380	+ [
	381	+ 'label' => esc_html__('Text Align', 'uicore-elements'),
	382	+ 'type' => Controls_Manager::CHOOSE,
	383	+ 'options' => [
	384	+ 'left' => [
	385	+ 'title' => esc_html__('Left', 'uicore-elements'),
	386	+ 'icon' => 'eicon-text-align-left',
399	387	],
400		- 'toggle' => false,
401		- 'default' => 'center',
402		- 'prefix_class' => 'ui-e-align-',
403		- 'selectors' => [
404		- '{{WRAPPER}} .ui-e-title' => 'text-align: {{VALUE}};',
405		- '{{WRAPPER}} .ui-e-ico' => 'text-align: {{VALUE}};',
	388	+ 'center' => [
	389	+ 'title' => esc_html__('Center', 'uicore-elements'),
	390	+ 'icon' => 'eicon-text-align-center',
406	391	],
	392	+ 'right' => [
	393	+ 'title' => esc_html__('Right', 'uicore-elements'),
	394	+ 'icon' => 'eicon-text-align-right',
	395	+ ],
	396	+ ],
	397	+ 'toggle' => false,
	398	+ 'default' => 'center',
	399	+ 'tablet_default' => 'center',
	400	+ 'mobile_default' => 'center',
	401	+ 'prefix_class' => 'ui-e-align-%s-',
	402	+ 'selectors' => [
	403	+ '{{WRAPPER}} .ui-e-title' => 'text-align: {{VALUE}};',
	404	+ '{{WRAPPER}} .ui-e-ico' => 'text-align: {{VALUE}};',
	405	+ ],
407	406
408		- ]
409		- );
	407	+ ]
	408	+ );
410	409
411		- $this->add_control(
412		- 'icon_offset_toggle',
413		- [
414		- 'label' => esc_html__( 'Icon Offset', 'uicore-elements' ),
415		- 'type' => Controls_Manager::POPOVER_TOGGLE,
416		- 'label_off' => esc_html__( 'Default', 'uicore-elements' ),
417		- 'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
418		- 'return_value' => 'yes',
419		- 'condition' => [
420		- 'show_icon' => 'true',
421		- 'counter_text_inline!' => 'true',
422		- ],
423		- ]
424		- );
	410	+ $this->add_control(
	411	+ 'icon_offset_toggle',
	412	+ [
	413	+ 'label' => esc_html__('Icon Offset', 'uicore-elements'),
	414	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	415	+ 'label_off' => esc_html__('Default', 'uicore-elements'),
	416	+ 'label_on' => esc_html__('Custom', 'uicore-elements'),
	417	+ 'return_value' => 'yes',
	418	+ 'condition' => [
	419	+ 'show_icon' => 'true',
	420	+ 'counter_text_inline!' => 'true',
	421	+ ],
	422	+ ]
	423	+ );
425	424
426		- $this->start_popover();
	425	+ $this->start_popover();
427	426
428		- $this->add_responsive_control(
429		- 'icon_vertical_offset',
430		- [
431		- 'label' => esc_html__( 'Vertical offset', 'uicore-elements' ),
432		- 'type' => Controls_Manager::SLIDER,
433		- 'size_units' => ['px'],
434		- 'range' => [
435		- 'px' => [
436		- 'min' => -100,
437		- 'max' => 100,
438		- 'step' => 1,
439		- ],
440		- ],
441		- 'default' => [
442		- 'unit' => 'px',
443		- 'size' => 0,
444		- ],
445		- 'condition' => [
446		- 'counter_text_inline!' => 'true',
447		- 'icon_offset_toggle' => 'yes',
448		- ],
449		- 'selectors' => [
450		- '{{WRAPPER}}' => '--ui-e-ico-vertical-off: {{SIZE}}{{UNIT}};',
451		- ],
452		- ]
453		- );
	427	+ $this->add_responsive_control(
	428	+ 'icon_vertical_offset',
	429	+ [
	430	+ 'label' => esc_html__('Vertical offset', 'uicore-elements'),
	431	+ 'type' => Controls_Manager::SLIDER,
	432	+ 'size_units' => ['px'],
	433	+ 'range' => [
	434	+ 'px' => [
	435	+ 'min' => -100,
	436	+ 'max' => 100,
	437	+ 'step' => 1,
	438	+ ],
	439	+ ],
	440	+ 'default' => [
	441	+ 'unit' => 'px',
	442	+ 'size' => 0,
	443	+ ],
	444	+ 'condition' => [
	445	+ 'counter_text_inline!' => 'true',
	446	+ 'icon_offset_toggle' => 'yes',
	447	+ ],
	448	+ 'selectors' => [
	449	+ '{{WRAPPER}}' => '--ui-e-ico-vertical-off: {{SIZE}}{{UNIT}};',
	450	+ ],
	451	+ ]
	452	+ );
454	453
455		- $this->add_responsive_control(
456		- 'icon_horizontal_offset',
457		- [
458		- 'label' => esc_html__( 'Horizontal offset', 'uicore-elements' ),
459		- 'type' => Controls_Manager::SLIDER,
460		- 'size_units' => ['px'],
461		- 'range' => [
462		- 'px' => [
463		- 'min' => -100,
464		- 'max' => 100,
465		- 'step' => 1,
466		- ],
467		- ],
468		- 'default' => [
469		- 'unit' => 'px',
470		- 'size' => 0,
471		- ],
472		- 'condition' => [
473		- 'counter_text_inline!' => 'true',
474		- 'icon_offset_toggle' => 'yes',
475		- ],
476		- 'selectors' => [
477		- '{{WRAPPER}}' => '--ui-e-ico-horizontal-off: {{SIZE}}{{UNIT}};',
478		- ],
479		- ]
480		- );
	454	+ $this->add_responsive_control(
	455	+ 'icon_horizontal_offset',
	456	+ [
	457	+ 'label' => esc_html__('Horizontal offset', 'uicore-elements'),
	458	+ 'type' => Controls_Manager::SLIDER,
	459	+ 'size_units' => ['px'],
	460	+ 'range' => [
	461	+ 'px' => [
	462	+ 'min' => -100,
	463	+ 'max' => 100,
	464	+ 'step' => 1,
	465	+ ],
	466	+ ],
	467	+ 'default' => [
	468	+ 'unit' => 'px',
	469	+ 'size' => 0,
	470	+ ],
	471	+ 'condition' => [
	472	+ 'counter_text_inline!' => 'true',
	473	+ 'icon_offset_toggle' => 'yes',
	474	+ ],
	475	+ 'selectors' => [
	476	+ '{{WRAPPER}}' => '--ui-e-ico-horizontal-off: {{SIZE}}{{UNIT}};',
	477	+ ],
	478	+ ]
	479	+ );
481	480
482		- $this->end_popover();
	481	+ $this->end_popover();
483	482
484	483	$this->end_controls_section();
485	484
486	485	$this->start_controls_section(
		@@ -485,107 +484,107 @@
485	484
486	485	$this->start_controls_section(
487	486	'add_op_section',
488	487	[
489		- 'label' => __( 'Additional Options', 'uicore-elements' ),
	488	+ 'label' => __('Additional Options', 'uicore-elements'),
490	489	'tab' => Controls_Manager::TAB_CONTENT,
491	490	]
492	491	);
493	492
494		- $this->add_control(
495		- 'use_grouping',
496		- [
497		- 'label' => esc_html__( 'Use Grouping', 'uicore-elements' ),
498		- 'type' => Controls_Manager::SWITCHER,
499		- 'label_on' => esc_html__( 'True', 'uicore-elements' ),
500		- 'label_off' => esc_html__( 'False', 'uicore-elements' ),
501		- 'return_value' => 'true',
502		- 'default' => 'true',
503		- 'frontend_available' => true,
504		- 'condition' =>[
505		- 'counter_animation!' => ['motion'],
506		- ],
507		- ]
508		- );
	493	+ $this->add_control(
	494	+ 'use_grouping',
	495	+ [
	496	+ 'label' => esc_html__('Use Grouping', 'uicore-elements'),
	497	+ 'type' => Controls_Manager::SWITCHER,
	498	+ 'label_on' => esc_html__('True', 'uicore-elements'),
	499	+ 'label_off' => esc_html__('False', 'uicore-elements'),
	500	+ 'return_value' => 'true',
	501	+ 'default' => 'true',
	502	+ 'frontend_available' => true,
	503	+ 'condition' => [
	504	+ 'counter_animation!' => ['motion'],
	505	+ ],
	506	+ ]
	507	+ );
509	508
510		- $this->add_control(
511		- 'counter_separator',
512		- [
513		- 'label' => esc_html__( 'Thousand symbol', 'uicore-elements' ),
514		- 'type' => Controls_Manager::TEXT,
515		- 'default' => esc_html__( ',', 'uicore-elements' ),
516		- 'condition' =>[
517		- 'use_grouping' => 'true',
518		- 'counter_animation!' => ['motion'],
519		- ],
520		- 'ai' => [
521		- 'active' => false,
522		- ],
523		- 'frontend_available' => true,
524		- ]
525		- );
	509	+ $this->add_control(
	510	+ 'counter_separator',
	511	+ [
	512	+ 'label' => esc_html__('Thousand symbol', 'uicore-elements'),
	513	+ 'type' => Controls_Manager::TEXT,
	514	+ 'default' => esc_html__(',', 'uicore-elements'),
	515	+ 'condition' => [
	516	+ 'use_grouping' => 'true',
	517	+ 'counter_animation!' => ['motion'],
	518	+ ],
	519	+ 'ai' => [
	520	+ 'active' => false,
	521	+ ],
	522	+ 'frontend_available' => true,
	523	+ ]
	524	+ );
526	525
527		- $this->add_control(
528		- 'decimal_places',
529		- [
530		- 'label' => esc_html__( 'Decimal Places', 'uicore-elements' ),
531		- 'type' => Controls_Manager::NUMBER,
532		- 'min' => 0,
533		- 'max' => 4,
534		- 'step' => 1,
535		- 'default' => 0,
536		- 'ai' => [
537		- 'active' => false,
538		- ],
539		- 'frontend_available' => true,
540		- 'condition' => [
541		- 'counter_animation!' => ['motion'],
542		- ],
543		- ]
544		- );
	526	+ $this->add_control(
	527	+ 'decimal_places',
	528	+ [
	529	+ 'label' => esc_html__('Decimal Places', 'uicore-elements'),
	530	+ 'type' => Controls_Manager::NUMBER,
	531	+ 'min' => 0,
	532	+ 'max' => 4,
	533	+ 'step' => 1,
	534	+ 'default' => 0,
	535	+ 'ai' => [
	536	+ 'active' => false,
	537	+ ],
	538	+ 'frontend_available' => true,
	539	+ 'condition' => [
	540	+ 'counter_animation!' => ['motion'],
	541	+ ],
	542	+ ]
	543	+ );
545	544
546		- $this->add_control(
547		- 'decimal_symbol',
548		- [
549		- 'label' => esc_html__( 'Decimal Symbol', 'uicore-elements' ),
550		- 'type' => Controls_Manager::TEXT,
551		- 'default' => esc_html__( '.', 'uicore-elements' ),
552		- 'condition' =>[
553		- 'counter_animation!' => ['motion'],
554		- ],
555		- 'ai' => [
556		- 'active' => false,
557		- ],
558		- 'frontend_available' => true,
559		- ]
560		- );
	545	+ $this->add_control(
	546	+ 'decimal_symbol',
	547	+ [
	548	+ 'label' => esc_html__('Decimal Symbol', 'uicore-elements'),
	549	+ 'type' => Controls_Manager::TEXT,
	550	+ 'default' => esc_html__('.', 'uicore-elements'),
	551	+ 'condition' => [
	552	+ 'counter_animation!' => ['motion'],
	553	+ ],
	554	+ 'ai' => [
	555	+ 'active' => false,
	556	+ ],
	557	+ 'frontend_available' => true,
	558	+ ]
	559	+ );
561	560
562		- $this->add_control(
563		- 'counter_prefix',
564		- [
565		- 'label' => esc_html__( 'Counter Prefix', 'uicore-elements' ),
566		- 'type' => Controls_Manager::TEXT,
567		- 'default' => '',
568		- 'placeholder' => esc_html__( '$', 'uicore-elements' ),
569		- 'ai' => [
570		- 'active' => false,
571		- ],
572		- ]
573		- );
	561	+ $this->add_control(
	562	+ 'counter_prefix',
	563	+ [
	564	+ 'label' => esc_html__('Counter Prefix', 'uicore-elements'),
	565	+ 'type' => Controls_Manager::TEXT,
	566	+ 'default' => '',
	567	+ 'placeholder' => esc_html__('$', 'uicore-elements'),
	568	+ 'ai' => [
	569	+ 'active' => false,
	570	+ ],
	571	+ ]
	572	+ );
574	573
575		- $this->add_control(
576		- 'counter_suffix',
577		- [
578		- 'label' => esc_html__( 'Counter Suffix', 'uicore-elements' ),
579		- 'type' => Controls_Manager::TEXT,
580		- 'default' => '',
581		- 'placeholder' => esc_html__( '+', 'uicore-elements' ),
582		- 'ai' => [
583		- 'active' => false,
584		- ],
585		- 'frontend_available' => true,
586		- ]
587		- );
	574	+ $this->add_control(
	575	+ 'counter_suffix',
	576	+ [
	577	+ 'label' => esc_html__('Counter Suffix', 'uicore-elements'),
	578	+ 'type' => Controls_Manager::TEXT,
	579	+ 'default' => '',
	580	+ 'placeholder' => esc_html__('+', 'uicore-elements'),
	581	+ 'ai' => [
	582	+ 'active' => false,
	583	+ ],
	584	+ 'frontend_available' => true,
	585	+ ]
	586	+ );
588	587
589	588	$this->end_controls_section();
590	589
591	590	$this->start_controls_section(
		@@ -590,280 +589,280 @@
590	589
591	590	$this->start_controls_section(
592	591	'icon_image_section',
593	592	[
594		- 'label' => __( 'Icon/Image', 'uicore-elements' ),
	593	+ 'label' => __('Icon/Image', 'uicore-elements'),
595	594	'tab' => Controls_Manager::TAB_STYLE,
596	595	'condition' => [
597		- 'show_icon' => 'true',
	596	+ 'show_icon' => 'true',
598	597	],
599	598	]
600	599	);
601	600
602		- $this->start_controls_tabs(
603		- 'style_tabs'
604		- );
	601	+ $this->start_controls_tabs(
	602	+ 'style_tabs'
	603	+ );
605	604
606		- $this->start_controls_tab(
607		- 'icon_colors',
608		- [
609		- 'label' => esc_html__( 'Normal', 'uicore-elements' ),
610		- ]
611		- );
	605	+ $this->start_controls_tab(
	606	+ 'icon_colors',
	607	+ [
	608	+ 'label' => esc_html__('Normal', 'uicore-elements'),
	609	+ ]
	610	+ );
612	611
613		- $this->add_control(
614		- 'icon_color',
615		- [
616		- 'label' => esc_html__( 'Icon color', 'uicore-elements' ),
617		- 'type' => Controls_Manager::COLOR,
618		- 'condition' => [
619		- 'icon_type!' => 'image',
620		- ],
621		- 'selectors' => [
622		- '{{WRAPPER}} .ui-e-offset > svg' => 'fill:{{VALUE}};',
623		- '{{WRAPPER}} .ui-e-offset > i' => 'color: {{VALUE}};',
624		- ],
	612	+ $this->add_control(
	613	+ 'icon_color',
	614	+ [
	615	+ 'label' => esc_html__('Icon color', 'uicore-elements'),
	616	+ 'type' => Controls_Manager::COLOR,
	617	+ 'condition' => [
	618	+ 'icon_type!' => 'image',
	619	+ ],
	620	+ 'selectors' => [
	621	+ '{{WRAPPER}} .ui-e-offset > svg' => 'fill:{{VALUE}};',
	622	+ '{{WRAPPER}} .ui-e-offset > i' => 'color: {{VALUE}};',
	623	+ ],
625	624
626		- ]
627		- );
	625	+ ]
	626	+ );
628	627
629		- $this->add_group_control(
630		- Group_Control_Background::get_type(),
631		- [
632		- 'name' => 'icon_background',
633		- 'types' => [ 'classic', 'gradient', 'video' ],
634		- 'selector' => '{{WRAPPER}} .ui-e-ico .ui-e-offset',
635		- ]
636		- );
	628	+ $this->add_group_control(
	629	+ Group_Control_Background::get_type(),
	630	+ [
	631	+ 'name' => 'icon_background',
	632	+ 'types' => ['classic', 'gradient', 'video'],
	633	+ 'selector' => '{{WRAPPER}} .ui-e-ico .ui-e-offset',
	634	+ ]
	635	+ );
637	636
638		- $this->end_controls_tab();
	637	+ $this->end_controls_tab();
639	638
640		- $this->start_controls_tab(
641		- 'icon_colors_hover',
642		- [
643		- 'label' => esc_html__( 'Hover', 'uicore-elements' ),
644		- ]
645		- );
	639	+ $this->start_controls_tab(
	640	+ 'icon_colors_hover',
	641	+ [
	642	+ 'label' => esc_html__('Hover', 'uicore-elements'),
	643	+ ]
	644	+ );
646	645
647		- $this->add_control(
648		- 'icon_color_hover',
649		- [
650		- 'label' => esc_html__( 'Icon color', 'uicore-elements' ),
651		- 'type' => Controls_Manager::COLOR,
652		- 'condition' => [
653		- 'icon_type!' => 'image',
654		- ],
655		- 'selectors' => [
656		- '{{WRAPPER}} > div:hover .ui-e-offset > svg' => 'fill:{{VALUE}};',
657		- '{{WRAPPER}} > div:hover .ui-e-offset > i' => 'color: {{VALUE}};',
658		- ],
	646	+ $this->add_control(
	647	+ 'icon_color_hover',
	648	+ [
	649	+ 'label' => esc_html__('Icon color', 'uicore-elements'),
	650	+ 'type' => Controls_Manager::COLOR,
	651	+ 'condition' => [
	652	+ 'icon_type!' => 'image',
	653	+ ],
	654	+ 'selectors' => [
	655	+ '{{WRAPPER}} > div:hover .ui-e-offset > svg' => 'fill:{{VALUE}};',
	656	+ '{{WRAPPER}} > div:hover .ui-e-offset > i' => 'color: {{VALUE}};',
	657	+ ],
659	658
660		- ]
661		- );
	659	+ ]
	660	+ );
662	661
663		- $this->add_group_control(
664		- Group_Control_Background::get_type(),
665		- [
666		- 'name' => 'icon_background_hover',
667		- 'types' => [ 'classic', 'gradient', 'video' ],
668		- 'selector' => '{{WRAPPER}} > div:hover .ui-e-offset',
	662	+ $this->add_group_control(
	663	+ Group_Control_Background::get_type(),
	664	+ [
	665	+ 'name' => 'icon_background_hover',
	666	+ 'types' => ['classic', 'gradient', 'video'],
	667	+ 'selector' => '{{WRAPPER}} > div:hover .ui-e-offset',
669	668
670		- ]
671		- );
	669	+ ]
	670	+ );
672	671
673		- $this->add_control(
674		- 'border_color_hover',
675		- [
676		- 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
677		- 'type' => Controls_Manager::COLOR,
678		- 'selectors' => [
679		- '{{WRAPPER}} > div:hover .ui-e-offset' => 'border-color: {{VALUE}}',
680		- ],
681		- ]
682		- );
	672	+ $this->add_control(
	673	+ 'border_color_hover',
	674	+ [
	675	+ 'label' => esc_html__('Border Color', 'uicore-elements'),
	676	+ 'type' => Controls_Manager::COLOR,
	677	+ 'selectors' => [
	678	+ '{{WRAPPER}} > div:hover .ui-e-offset' => 'border-color: {{VALUE}}',
	679	+ ],
	680	+ ]
	681	+ );
683	682
684		- $this->end_controls_tab();
	683	+ $this->end_controls_tab();
685	684
686		- $this->end_controls_tabs();
	685	+ $this->end_controls_tabs();
687	686
688		- $this->add_control(
689		- 'hr',
690		- [
691		- 'type' => Controls_Manager::DIVIDER,
692		- ]
693		- );
	687	+ $this->add_control(
	688	+ 'hr',
	689	+ [
	690	+ 'type' => Controls_Manager::DIVIDER,
	691	+ ]
	692	+ );
694	693
695		- $this->add_responsive_control(
696		- 'icon_padding',
697		- [
698		- 'label' => esc_html__( 'Padding', 'uicore-elements' ),
699		- 'type' => Controls_Manager::DIMENSIONS,
700		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
701		- 'range' => [
702		- 'px' => [
703		- 'min' => 0,
704		- 'max' => 10,
705		- 'step' => 1,
706		- ],
707		- '%' => [
708		- 'min' => 0,
709		- 'max' => 20,
710		- ],
	694	+ $this->add_responsive_control(
	695	+ 'icon_padding',
	696	+ [
	697	+ 'label' => esc_html__('Padding', 'uicore-elements'),
	698	+ 'type' => Controls_Manager::DIMENSIONS,
	699	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	700	+ 'range' => [
	701	+ 'px' => [
	702	+ 'min' => 0,
	703	+ 'max' => 10,
	704	+ 'step' => 1,
711	705	],
712		- 'default' => [
713		- 'unit' => 'px',
714		- 'size' => 25,
	706	+ '%' => [
	707	+ 'min' => 0,
	708	+ 'max' => 20,
715	709	],
716		- 'selectors' => [
717		- '{{WRAPPER}} .ui-e-offset' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
718		- ],
	710	+ ],
	711	+ 'default' => [
	712	+ 'unit' => 'px',
	713	+ 'size' => 25,
	714	+ ],
	715	+ 'selectors' => [
	716	+ '{{WRAPPER}} .ui-e-offset' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	717	+ ],
719	718
720		- ]
721		- );
	719	+ ]
	720	+ );
722	721
723		- $this->add_group_control(
724		- Group_Control_Border::get_type(),
725		- [
726		- 'name' => 'icon_border',
727		- 'selector' => '{{WRAPPER}} .ui-e-offset',
	722	+ $this->add_group_control(
	723	+ Group_Control_Border::get_type(),
	724	+ [
	725	+ 'name' => 'icon_border',
	726	+ 'selector' => '{{WRAPPER}} .ui-e-offset',
728	727
729		- ]
730		- );
	728	+ ]
	729	+ );
731	730
732		- $this->add_responsive_control(
733		- 'icon_radius',
734		- [
735		- 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
736		- 'type' => Controls_Manager::DIMENSIONS,
737		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
738		- 'default' => [
739		- 'unit' => 'px',
740		- 'size' => 100,
741		- ],
742		- 'selectors' => [
743		- '{{WRAPPER}} .ui-e-offset' => 'border-top-left-radius: {{TOP}}{{UNIT}}; border-top-right-radius:{{RIGHT}}{{UNIT}}; border-bottom-right-radius:{{BOTTOM}}{{UNIT}}; border-bottom-left-radius:{{LEFT}}{{UNIT}};',
744		- ],
	731	+ $this->add_responsive_control(
	732	+ 'icon_radius',
	733	+ [
	734	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	735	+ 'type' => Controls_Manager::DIMENSIONS,
	736	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	737	+ 'default' => [
	738	+ 'unit' => 'px',
	739	+ 'size' => 100,
	740	+ ],
	741	+ 'selectors' => [
	742	+ '{{WRAPPER}} .ui-e-offset' => 'border-top-left-radius: {{TOP}}{{UNIT}}; border-top-right-radius:{{RIGHT}}{{UNIT}}; border-bottom-right-radius:{{BOTTOM}}{{UNIT}}; border-bottom-left-radius:{{LEFT}}{{UNIT}};',
	743	+ ],
745	744
746		- ]
747		- );
	745	+ ]
	746	+ );
748	747
749		- $this->add_group_control(
750		- Group_Control_Box_Shadow::get_type(),
751		- [
752		- 'name' => 'icon_shadow',
753		- 'selector' => '{{WRAPPER}} .ui-e-offset',
	748	+ $this->add_group_control(
	749	+ Group_Control_Box_Shadow::get_type(),
	750	+ [
	751	+ 'name' => 'icon_shadow',
	752	+ 'selector' => '{{WRAPPER}} .ui-e-offset',
754	753
755		- ]
756		- );
	754	+ ]
	755	+ );
757	756
758		- $this->add_responsive_control(
759		- 'icon_space',
760		- [
761		- 'label' => esc_html__( 'Icon Space', 'uicore-elements' ),
762		- 'type' => Controls_Manager::SLIDER,
763		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
764		- 'range' => [
765		- 'px' => [
766		- 'min' => 0,
767		- 'max' => 60,
768		- 'step' => 1,
769		- ],
770		- '%' => [
771		- 'min' => 0,
772		- 'max' => 20,
773		- ],
	757	+ $this->add_responsive_control(
	758	+ 'icon_space',
	759	+ [
	760	+ 'label' => esc_html__('Icon Space', 'uicore-elements'),
	761	+ 'type' => Controls_Manager::SLIDER,
	762	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	763	+ 'range' => [
	764	+ 'px' => [
	765	+ 'min' => 0,
	766	+ 'max' => 60,
	767	+ 'step' => 1,
774	768	],
775		- 'default' => [
776		- 'unit' => 'px',
777		- 'size' => 8,
	769	+ '%' => [
	770	+ 'min' => 0,
	771	+ 'max' => 20,
778	772	],
779		- 'selectors' => [
780		- '{{WRAPPER}}' => '--ui-e-ico-spacing: {{SIZE}}{{UNIT}}',
781		- ],
	773	+ ],
	774	+ 'default' => [
	775	+ 'unit' => 'px',
	776	+ 'size' => 8,
	777	+ ],
	778	+ 'selectors' => [
	779	+ '{{WRAPPER}}' => '--ui-e-ico-spacing: {{SIZE}}{{UNIT}}',
	780	+ ],
782	781
783		- ]
784		- );
	782	+ ]
	783	+ );
785	784
786		- $this->add_control(
787		- 'image_fullwidth',
788		- [
789		- 'label' => esc_html__( 'Image fullwidth', 'uicore-elements' ),
790		- 'type' => Controls_Manager::SWITCHER,
791		- 'label_on' => esc_html__( 'True', 'uicore-elements' ),
792		- 'label_off' => esc_html__( 'False', 'uicore-elements' ),
793		- 'return_value' => 'true',
794		- 'default' => 'false',
795		- 'condition' => [
796		- 'icon_type' => 'image',
797		- ],
798		- 'selectors' => [
799		- '{{WRAPPER}} .ui-e-offset > *' => 'width: 100%;',
	785	+ $this->add_control(
	786	+ 'image_fullwidth',
	787	+ [
	788	+ 'label' => esc_html__('Image fullwidth', 'uicore-elements'),
	789	+ 'type' => Controls_Manager::SWITCHER,
	790	+ 'label_on' => esc_html__('True', 'uicore-elements'),
	791	+ 'label_off' => esc_html__('False', 'uicore-elements'),
	792	+ 'return_value' => 'true',
	793	+ 'default' => 'false',
	794	+ 'condition' => [
	795	+ 'icon_type' => 'image',
	796	+ ],
	797	+ 'selectors' => [
	798	+ '{{WRAPPER}} .ui-e-offset > *' => 'width: 100%;',
800	799
801		- ],
802		- ]
803		- );
	800	+ ],
	801	+ ]
	802	+ );
804	803
805		- $this->add_responsive_control(
806		- 'image_size',
807		- [
808		- 'label' => esc_html__( 'Image Size', 'uicore-elements' ),
809		- 'type' => Controls_Manager::SLIDER,
810		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
811		- 'range' => [
812		- 'px' => [
813		- 'min' => 0,
814		- 'max' => 991,
815		- 'step' => 1,
816		- ],
817		- '%' => [
818		- 'min' => 0,
819		- 'max' => 100,
820		- ],
	804	+ $this->add_responsive_control(
	805	+ 'image_size',
	806	+ [
	807	+ 'label' => esc_html__('Image Size', 'uicore-elements'),
	808	+ 'type' => Controls_Manager::SLIDER,
	809	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	810	+ 'range' => [
	811	+ 'px' => [
	812	+ 'min' => 0,
	813	+ 'max' => 991,
	814	+ 'step' => 1,
821	815	],
822		- 'default' => [
823		- 'unit' => 'px',
824		- 'size' => 120,
	816	+ '%' => [
	817	+ 'min' => 0,
	818	+ 'max' => 100,
825	819	],
826		- 'condition' => [
827		- 'icon_type' => 'image',
828		- 'image_fullwidth!' => 'true',
829		- ],
830		- 'selectors' => [
831		- '{{WRAPPER}} .ui-e-offset > *' => 'width: {{SIZE}}{{UNIT}};',
	820	+ ],
	821	+ 'default' => [
	822	+ 'unit' => 'px',
	823	+ 'size' => 120,
	824	+ ],
	825	+ 'condition' => [
	826	+ 'icon_type' => 'image',
	827	+ 'image_fullwidth!' => 'true',
	828	+ ],
	829	+ 'selectors' => [
	830	+ '{{WRAPPER}} .ui-e-offset > *' => 'width: {{SIZE}}{{UNIT}};',
832	831
833		- ],
834		- ]
835		- );
	832	+ ],
	833	+ ]
	834	+ );
836	835
837		- $this->add_responsive_control(
838		- 'icon_size',
839		- [
840		- 'label' => esc_html__( 'Icon Size', 'uicore-elements' ),
841		- 'type' => Controls_Manager::SLIDER,
842		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
843		- 'range' => [
844		- 'px' => [
845		- 'min' => 8,
846		- 'max' => 160,
847		- 'step' => 1,
848		- ],
849		- '%' => [
850		- 'min' => 0,
851		- 'max' => 100,
852		- ],
	836	+ $this->add_responsive_control(
	837	+ 'icon_size',
	838	+ [
	839	+ 'label' => esc_html__('Icon Size', 'uicore-elements'),
	840	+ 'type' => Controls_Manager::SLIDER,
	841	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	842	+ 'range' => [
	843	+ 'px' => [
	844	+ 'min' => 8,
	845	+ 'max' => 160,
	846	+ 'step' => 1,
853	847	],
854		- 'default' => [
855		- 'unit' => 'px',
856		- 'size' => 40,
	848	+ '%' => [
	849	+ 'min' => 0,
	850	+ 'max' => 100,
857	851	],
858		- 'condition' => [
859		- 'icon_type' => 'icon',
860		- ],
861		- 'selectors' => [
862		- '{{WRAPPER}}' => '--ui-e-icon-size:{{SIZE}}{{UNIT}}',
863		- ],
864		- ]
865		- );
	852	+ ],
	853	+ 'default' => [
	854	+ 'unit' => 'px',
	855	+ 'size' => 40,
	856	+ ],
	857	+ 'condition' => [
	858	+ 'icon_type' => 'icon',
	859	+ ],
	860	+ 'selectors' => [
	861	+ '{{WRAPPER}}' => '--ui-e-icon-size:{{SIZE}}{{UNIT}}',
	862	+ ],
	863	+ ]
	864	+ );
866	865
867	866	$this->end_controls_section();
868	867
869	868	$this->start_controls_section(
		@@ -868,95 +867,95 @@
868	867
869	868	$this->start_controls_section(
870	869	'counter_number_section',
871	870	[
872		- 'label' => __( 'Number', 'uicore-elements' ),
	871	+ 'label' => __('Number', 'uicore-elements'),
873	872	'tab' => Controls_Manager::TAB_STYLE,
874	873	]
875	874	);
876	875
877		- $this->add_responsive_control(
878		- 'counter_number_space',
879		- [
880		- 'label' => esc_html__( 'Number space', 'uicore-elements' ),
881		- 'type' => Controls_Manager::SLIDER,
882		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
883		- 'range' => [
884		- 'px' => [
885		- 'min' => 0,
886		- 'max' => 100,
887		- 'step' => 1,
888		- ],
889		- '%' => [
890		- 'min' => 0,
891		- 'max' => 100,
892		- ],
	876	+ $this->add_responsive_control(
	877	+ 'counter_number_space',
	878	+ [
	879	+ 'label' => esc_html__('Number space', 'uicore-elements'),
	880	+ 'type' => Controls_Manager::SLIDER,
	881	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	882	+ 'range' => [
	883	+ 'px' => [
	884	+ 'min' => 0,
	885	+ 'max' => 100,
	886	+ 'step' => 1,
893	887	],
894		- 'default' => [
895		- 'unit' => 'px',
896		- 'size' => 0,
	888	+ '%' => [
	889	+ 'min' => 0,
	890	+ 'max' => 100,
897	891	],
898		- 'selectors' => [
899		- '{{WRAPPER}}' => '--ui-e-num-spacing: {{SIZE}}{{UNIT}};',
900		- ],
	892	+ ],
	893	+ 'default' => [
	894	+ 'unit' => 'px',
	895	+ 'size' => 0,
	896	+ ],
	897	+ 'selectors' => [
	898	+ '{{WRAPPER}}' => '--ui-e-num-spacing: {{SIZE}}{{UNIT}};',
	899	+ ],
901	900
902		- ]
903		- );
	901	+ ]
	902	+ );
904	903
905		- $this->start_controls_tabs(
906		- 'counter_tabs'
907		- );
	904	+ $this->start_controls_tabs(
	905	+ 'counter_tabs'
	906	+ );
908	907
909		- $this->start_controls_tab(
910		- 'counter_color_normal',
911		- [
912		- 'label' => esc_html__( 'Normal', 'uicore-elements' ),
913		- ]
914		- );
	908	+ $this->start_controls_tab(
	909	+ 'counter_color_normal',
	910	+ [
	911	+ 'label' => esc_html__('Normal', 'uicore-elements'),
	912	+ ]
	913	+ );
915	914
916		- $this->add_control(
917		- 'counter_number_color',
918		- [
919		- 'label' => esc_html__( 'Number Color', 'uicore-elements' ),
920		- 'type' => Controls_Manager::COLOR,
921		- 'selectors' => [
922		- '{{WRAPPER}} .ui-e-num' => 'color: {{VALUE}}',
923		- '{{WRAPPER}}' => '--ui-e-num-color: {{VALUE}}',
924		- ],
925		- ]
926		- );
	915	+ $this->add_control(
	916	+ 'counter_number_color',
	917	+ [
	918	+ 'label' => esc_html__('Number Color', 'uicore-elements'),
	919	+ 'type' => Controls_Manager::COLOR,
	920	+ 'selectors' => [
	921	+ '{{WRAPPER}} .ui-e-num' => 'color: {{VALUE}}',
	922	+ '{{WRAPPER}}' => '--ui-e-num-color: {{VALUE}}',
	923	+ ],
	924	+ ]
	925	+ );
927	926
928		- $this->end_controls_tab();
	927	+ $this->end_controls_tab();
929	928
930		- $this->start_controls_tab(
931		- 'counter_color_hover',
932		- [
933		- 'label' => esc_html__( 'Hover', 'uicore-elements' ),
934		- ]
935		- );
	929	+ $this->start_controls_tab(
	930	+ 'counter_color_hover',
	931	+ [
	932	+ 'label' => esc_html__('Hover', 'uicore-elements'),
	933	+ ]
	934	+ );
936	935
937		- $this->add_control(
938		- 'counter_number_color_hover',
939		- [
940		- 'label' => esc_html__( 'Number Color', 'uicore-elements' ),
941		- 'type' => Controls_Manager::COLOR,
942		- 'selectors' => [
943		- '{{WRAPPER}} > div:hover .ui-e-num' => 'color: {{VALUE}}',
944		- ],
945		- ]
946		- );
	936	+ $this->add_control(
	937	+ 'counter_number_color_hover',
	938	+ [
	939	+ 'label' => esc_html__('Number Color', 'uicore-elements'),
	940	+ 'type' => Controls_Manager::COLOR,
	941	+ 'selectors' => [
	942	+ '{{WRAPPER}} > div:hover .ui-e-num' => 'color: {{VALUE}}',
	943	+ ],
	944	+ ]
	945	+ );
947	946
948		- $this->end_controls_tab();
	947	+ $this->end_controls_tab();
949	948
950		- $this->end_controls_tabs();
	949	+ $this->end_controls_tabs();
951	950
952		- $this->add_group_control(
953		- Group_Control_Typography::get_type(),
954		- [
955		- 'name' => 'counter_number_typography',
956		- 'selector' => '{{WRAPPER}} .ui-e-num',
957		- ]
958		- );
	951	+ $this->add_group_control(
	952	+ Group_Control_Typography::get_type(),
	953	+ [
	954	+ 'name' => 'counter_number_typography',
	955	+ 'selector' => '{{WRAPPER}} .ui-e-num',
	956	+ ]
	957	+ );
959	958
960	959	$this->end_controls_section();
961	960
962	961	$this->start_controls_section(
		@@ -961,218 +960,227 @@
961	960
962	961	$this->start_controls_section(
963	962	'suffix_prefix_section',
964	963	[
965		- 'label' => __( 'Suffix/Prefix', 'uicore-elements' ),
	964	+ 'label' => __('Prefix', 'uicore-elements'),
966	965	'tab' => Controls_Manager::TAB_STYLE,
967	966	]
968	967	);
969	968
970		- $this->add_control(
971		- 'suffix_prefix_color',
972		- [
973		- 'label' => esc_html__( 'Color', 'uicore-elements' ),
974		- 'type' => Controls_Manager::COLOR,
975		- 'selectors' => [
976		- '{{WRAPPER}} .ui-e-prefix, {{WRAPPER}} .ui-e-suffix' => 'color: {{VALUE}}',
	969	+ // TODO: Prefix colors are also applied to suffix to compatibility purposes,
	970	+ // so the prefix/suffix color and typo styles split dont affect existent widgets.
	971	+ // Due to a lack of a better method to proper handle this styles split, we should
	972	+ // keep the current implementation as is for now.
	973	+ $this->add_control(
	974	+ 'suffix_prefix_color',
	975	+ [
	976	+ 'label' => esc_html__('Color', 'uicore-elements'),
	977	+ 'type' => Controls_Manager::COLOR,
	978	+ 'selectors' => [
	979	+ '{{WRAPPER}} .ui-e-prefix, {{WRAPPER}} .ui-e-suffix' => 'color: {{VALUE}}',
	980	+ ],
	981	+ ]
	982	+ );
	983	+ $this->add_group_control(
	984	+ Group_Control_Typography::get_type(),
	985	+ [
	986	+ 'name' => 'suffix_prefix_typography',
	987	+ 'selector' => '{{WRAPPER}} .ui-e-prefix, {{WRAPPER}} .ui-e-suffix',
	988	+ ]
	989	+ );
	990	+
	991	+ $this->add_responsive_control(
	992	+ 'prefix_h_offset',
	993	+ [
	994	+ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
	995	+ 'type' => Controls_Manager::SLIDER,
	996	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	997	+ 'range' => [
	998	+ 'px' => [
	999	+ 'min' => -200,
	1000	+ 'max' => 200,
	1001	+ 'step' => 1,
977	1002	],
978		- ]
979		- );
980		- $this->add_group_control(
981		- Group_Control_Typography::get_type(),
982		- [
983		- 'name' => 'suffix_prefix_typography',
984		- 'selector' => '{{WRAPPER}} .ui-e-prefix, {{WRAPPER}} .ui-e-suffix',
985		- ]
986		- );
	1003	+ '%' => [
	1004	+ 'min' => -100,
	1005	+ 'max' => 100,
	1006	+ ],
	1007	+ ],
	1008	+ 'default' => [
	1009	+ 'unit' => 'px',
	1010	+ 'size' => 0,
	1011	+ ],
	1012	+ ]
	1013	+ );
	1014	+ $this->add_responsive_control(
	1015	+ 'prefix_v_offset',
	1016	+ [
	1017	+ 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
	1018	+ 'type' => Controls_Manager::SLIDER,
	1019	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	1020	+ 'range' => [
	1021	+ 'px' => [
	1022	+ 'min' => -80,
	1023	+ 'max' => 80,
	1024	+ 'step' => 1,
	1025	+ ],
	1026	+ '%' => [
	1027	+ 'min' => -100,
	1028	+ 'max' => 100,
	1029	+ ],
	1030	+ ],
	1031	+ 'default' => [
	1032	+ 'unit' => 'px',
	1033	+ 'size' => 0,
	1034	+ ],
	1035	+ 'selectors' => [
	1036	+ '{{WRAPPER}} .ui-e-prefix' => 'transform: translate3d( {{prefix_h_offset.SIZE}}{{prefix_h_offset.UNIT}}, {{SIZE}}{{UNIT}}, 0);',
	1037	+ ],
	1038	+ ]
	1039	+ );
987	1040
988		- $this->start_controls_tabs(
989		- 'prefix_suffix_tabs'
990		- );
	1041	+ $this->end_controls_section();
991	1042
992		- $this->start_controls_tab(
993		- 'prefix_tab',
994		- [
995		- 'label' => esc_html__( 'Prefix', 'uicore-elements' ),
996		- ]
997		- );
	1043	+ $this->start_controls_section(
	1044	+ 'suffix_section',
	1045	+ [
	1046	+ 'label' => __('Suffix', 'uicore-elements'),
	1047	+ 'tab' => Controls_Manager::TAB_STYLE,
	1048	+ ]
	1049	+ );
998	1050
999		- $this->add_responsive_control(
1000		- 'prefix_h_offset',
1001		- [
1002		- 'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
1003		- 'type' => Controls_Manager::SLIDER,
1004		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1005		- 'range' => [
1006		- 'px' => [
1007		- 'min' => -200,
1008		- 'max' => 200,
1009		- 'step' => 1,
1010		- ],
1011		- '%' => [
1012		- 'min' => -100,
1013		- 'max' => 100,
1014		- ],
1015		- ],
1016		- 'default' => [
1017		- 'unit' => 'px',
1018		- 'size' => 0,
1019		- ],
1020		- ]
1021		- );
1022		- $this->add_responsive_control(
1023		- 'prefix_v_offset',
1024		- [
1025		- 'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
1026		- 'type' => Controls_Manager::SLIDER,
1027		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1028		- 'range' => [
1029		- 'px' => [
1030		- 'min' => -80,
1031		- 'max' => 80,
1032		- 'step' => 1,
1033		- ],
1034		- '%' => [
1035		- 'min' => -100,
1036		- 'max' => 100,
1037		- ],
1038		- ],
1039		- 'default' => [
1040		- 'unit' => 'px',
1041		- 'size' => 0,
1042		- ],
1043		- 'selectors' => [
1044		- '{{WRAPPER}} .ui-e-prefix' => 'transform: translate3d( {{prefix_h_offset.SIZE}}{{prefix_h_offset.UNIT}}, {{SIZE}}{{UNIT}}, 0);',
1045		- ],
1046		- ]
1047		- );
	1051	+ $this->add_control(
	1052	+ 'suffix_color',
	1053	+ [
	1054	+ 'label' => esc_html__('Color', 'uicore-elements'),
	1055	+ 'type' => Controls_Manager::COLOR,
	1056	+ 'selectors' => [
	1057	+ '{{WRAPPER}} .ui-e-suffix' => 'color: {{VALUE}} !important;',
	1058	+ ],
	1059	+ 'default' => ''
	1060	+ ]
	1061	+ );
	1062	+ $this->add_group_control(
	1063	+ Group_Control_Typography::get_type(),
	1064	+ [
	1065	+ 'name' => 'suffix_typography',
	1066	+ 'selector' => '{{WRAPPER}} .ui-e-suffix',
	1067	+ ]
	1068	+ );
1048	1069
1049		- $this->end_controls_tab();
	1070	+ $this->add_responsive_control(
	1071	+ 'suffix_h_offset',
	1072	+ [
	1073	+ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
	1074	+ 'type' => Controls_Manager::SLIDER,
	1075	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	1076	+ 'range' => [
	1077	+ 'px' => [
	1078	+ 'min' => -200,
	1079	+ 'max' => 200,
	1080	+ 'step' => 1,
	1081	+ ],
	1082	+ '%' => [
	1083	+ 'min' => -100,
	1084	+ 'max' => 100,
	1085	+ ],
	1086	+ ],
	1087	+ 'default' => [
	1088	+ 'unit' => 'px',
	1089	+ 'size' => 0,
	1090	+ ],
	1091	+ ]
	1092	+ );
	1093	+ $this->add_responsive_control(
	1094	+ 'suffix_v_offset',
	1095	+ [
	1096	+ 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
	1097	+ 'type' => Controls_Manager::SLIDER,
	1098	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	1099	+ 'range' => [
	1100	+ 'px' => [
	1101	+ 'min' => -80,
	1102	+ 'max' => 80,
	1103	+ 'step' => 1,
	1104	+ ],
	1105	+ '%' => [
	1106	+ 'min' => -100,
	1107	+ 'max' => 100,
	1108	+ ],
	1109	+ ],
	1110	+ 'default' => [
	1111	+ 'unit' => 'px',
	1112	+ 'size' => 0,
	1113	+ ],
	1114	+ 'selectors' => [
	1115	+ '{{WRAPPER}} .ui-e-suffix' => 'transform: translate3d( {{suffix_h_offset.SIZE}}{{suffix_h_offset.UNIT}}, {{SIZE}}{{UNIT}}, 0);',
	1116	+ ],
	1117	+ ]
	1118	+ );
1050	1119
1051		- $this->start_controls_tab(
1052		- 'suffix_tab',
1053		- [
1054		- 'label' => esc_html__( 'Suffix', 'uicore-elements' ),
1055		- ]
1056		- );
1057		-
1058		- $this->add_responsive_control(
1059		- 'suffix_h_offset',
1060		- [
1061		- 'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
1062		- 'type' => Controls_Manager::SLIDER,
1063		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1064		- 'range' => [
1065		- 'px' => [
1066		- 'min' => -200,
1067		- 'max' => 200,
1068		- 'step' => 1,
1069		- ],
1070		- '%' => [
1071		- 'min' => -100,
1072		- 'max' => 100,
1073		- ],
1074		- ],
1075		- 'default' => [
1076		- 'unit' => 'px',
1077		- 'size' => 0,
1078		- ],
1079		- ]
1080		- );
1081		- $this->add_responsive_control(
1082		- 'suffix_v_offset',
1083		- [
1084		- 'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
1085		- 'type' => Controls_Manager::SLIDER,
1086		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1087		- 'range' => [
1088		- 'px' => [
1089		- 'min' => -80,
1090		- 'max' => 80,
1091		- 'step' => 1,
1092		- ],
1093		- '%' => [
1094		- 'min' => -100,
1095		- 'max' => 100,
1096		- ],
1097		- ],
1098		- 'default' => [
1099		- 'unit' => 'px',
1100		- 'size' => 0,
1101		- ],
1102		- 'selectors' => [
1103		- '{{WRAPPER}} .ui-e-suffix' => 'transform: translate3d( {{suffix_h_offset.SIZE}}{{suffix_h_offset.UNIT}}, {{SIZE}}{{UNIT}}, 0);',
1104		- ],
1105		- ]
1106		- );
1107		-
1108		- $this->end_controls_tab();
1109		-
1110		- $this->end_controls_tabs();
1111		-
1112	1120	$this->end_controls_section();
1113	1121
1114	1122	$this->start_controls_section(
1115	1123	'content_text_section',
1116	1124	[
1117		- 'label' => __( 'Text', 'uicore-elements' ),
	1125	+ 'label' => __('Text', 'uicore-elements'),
1118	1126	'tab' => Controls_Manager::TAB_STYLE,
1119	1127	]
1120	1128	);
1121	1129
1122		- $this->start_controls_tabs(
1123		- 'content_text_tabs'
1124		- );
	1130	+ $this->start_controls_tabs(
	1131	+ 'content_text_tabs'
	1132	+ );
1125	1133
1126		- $this->start_controls_tab(
1127		- 'content_text_normal',
1128		- [
1129		- 'label' => esc_html__( 'Normal', 'uicore-elements' ),
1130		- ]
1131		- );
	1134	+ $this->start_controls_tab(
	1135	+ 'content_text_normal',
	1136	+ [
	1137	+ 'label' => esc_html__('Normal', 'uicore-elements'),
	1138	+ ]
	1139	+ );
1132	1140
1133		- $this->add_control(
1134		- 'content_text_color',
1135		- [
1136		- 'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1137		- 'type' => Controls_Manager::COLOR,
1138		- 'selectors' => [
1139		- '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}}',
1140		- ],
1141		- ]
1142		- );
	1141	+ $this->add_control(
	1142	+ 'content_text_color',
	1143	+ [
	1144	+ 'label' => esc_html__('Text Color', 'uicore-elements'),
	1145	+ 'type' => Controls_Manager::COLOR,
	1146	+ 'selectors' => [
	1147	+ '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}}',
	1148	+ ],
	1149	+ ]
	1150	+ );
1143	1151
1144		- $this->end_controls_tab();
	1152	+ $this->end_controls_tab();
1145	1153
1146		- $this->start_controls_tab(
1147		- 'content_text_hover',
1148		- [
1149		- 'label' => esc_html__( 'Hover', 'uicore-elements' ),
1150		- ]
1151		- );
	1154	+ $this->start_controls_tab(
	1155	+ 'content_text_hover',
	1156	+ [
	1157	+ 'label' => esc_html__('Hover', 'uicore-elements'),
	1158	+ ]
	1159	+ );
1152	1160
1153		- $this->add_control(
1154		- 'content_text_color_hover',
1155		- [
1156		- 'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1157		- 'type' => Controls_Manager::COLOR,
1158		- 'selectors' => [
1159		- '{{WRAPPER}} > div:hover .ui-e-title' => 'color: {{VALUE}}',
1160		- ],
1161		- ]
1162		- );
	1161	+ $this->add_control(
	1162	+ 'content_text_color_hover',
	1163	+ [
	1164	+ 'label' => esc_html__('Text Color', 'uicore-elements'),
	1165	+ 'type' => Controls_Manager::COLOR,
	1166	+ 'selectors' => [
	1167	+ '{{WRAPPER}} > div:hover .ui-e-title' => 'color: {{VALUE}}',
	1168	+ ],
	1169	+ ]
	1170	+ );
1163	1171
1164		- $this->end_controls_tab();
	1172	+ $this->end_controls_tab();
1165	1173
1166		- $this->end_controls_tabs();
	1174	+ $this->end_controls_tabs();
1167	1175
1168		- $this->add_group_control(
1169		- Group_Control_Typography::get_type(),
1170		- [
1171		- 'name' => 'content_text_typography',
1172		- 'selector' => '{{WRAPPER}} .ui-e-title',
1173		- ]
1174		- );
	1176	+ $this->add_group_control(
	1177	+ Group_Control_Typography::get_type(),
	1178	+ [
	1179	+ 'name' => 'content_text_typography',
	1180	+ 'selector' => '{{WRAPPER}} .ui-e-title',
	1181	+ ]
	1182	+ );
1175	1183
1176	1184	$this->end_controls_section();
1177	1185
1178	1186	$this->start_controls_section(
		@@ -1177,39 +1185,39 @@
1177	1185
1178	1186	$this->start_controls_section(
1179	1187	'additional_section',
1180	1188	[
1181		- 'label' => __( 'Additional', 'uicore-elements' ),
	1189	+ 'label' => __('Additional', 'uicore-elements'),
1182	1190	'tab' => Controls_Manager::TAB_STYLE,
1183	1191	]
1184	1192	);
1185	1193
1186		- $this->add_responsive_control(
1187		- 'content_padding',
1188		- [
1189		- 'label' => esc_html__( 'Content Padding', 'uicore-elements' ),
1190		- 'type' => Controls_Manager::DIMENSIONS,
1191		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1192		- 'range' => [
1193		- 'px' => [
1194		- 'min' => 0,
1195		- 'max' => 80,
1196		- 'step' => 5,
1197		- ],
1198		- '%' => [
1199		- 'min' => 0,
1200		- 'max' => 100,
1201		- ],
	1194	+ $this->add_responsive_control(
	1195	+ 'content_padding',
	1196	+ [
	1197	+ 'label' => esc_html__('Content Padding', 'uicore-elements'),
	1198	+ 'type' => Controls_Manager::DIMENSIONS,
	1199	+ 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
	1200	+ 'range' => [
	1201	+ 'px' => [
	1202	+ 'min' => 0,
	1203	+ 'max' => 80,
	1204	+ 'step' => 5,
1202	1205	],
1203		- 'default' => [
1204		- 'unit' => 'px',
1205		- 'size' => 15,
	1206	+ '%' => [
	1207	+ 'min' => 0,
	1208	+ 'max' => 100,
1206	1209	],
1207		- 'selectors' => [
1208		- '{{WRAPPER}} > div' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1209		- ],
1210		- ]
1211		- );
	1210	+ ],
	1211	+ 'default' => [
	1212	+ 'unit' => 'px',
	1213	+ 'size' => 15,
	1214	+ ],
	1215	+ 'selectors' => [
	1216	+ '{{WRAPPER}} > div' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	1217	+ ],
	1218	+ ]
	1219	+ );
1212	1220
1213	1221	$this->end_controls_section();
1214	1222
1215	1223	$this->start_controls_section(
		@@ -1214,224 +1222,223 @@
1214	1222
1215	1223	$this->start_controls_section(
1216	1224	'animation_section',
1217	1225	[
1218		- 'label' => __( 'Animations', 'uicore-elements' ),
	1226	+ 'label' => __('Animations', 'uicore-elements'),
1219	1227	'tab' => Controls_Manager::TAB_STYLE,
1220	1228	]
1221	1229	);
1222	1230
1223		- $this->add_control(
1224		- 'counter_animation',
1225		- [
1226		- 'label' => esc_html__( 'Number animation', 'uicore-elements' ),
1227		- 'type' => Controls_Manager::SELECT,
1228		- 'default' => 'simple',
1229		- 'options' => [
1230		- 'simple' => esc_html__( 'Simple', 'uicore-elements' ),
1231		- 'odometer' => esc_html__( 'Odometer', 'uicore-elements' ),
1232		- 'motion' => esc_html__( 'Motion Blur', 'uicore-elements' ),
1233		- ],
1234		- 'frontend_available' => true,
1235		- 'prefix_class' => 'ui-e-counter-',
1236		- 'render_type' => 'template',
1237		- ]
1238		- );
1239		- $this->add_control(
1240		- 'duration',
1241		- [
1242		- 'label' => esc_html__( 'Duration (in seconds)', 'uicore-elements' ),
1243		- 'type' => Controls_Manager::NUMBER,
1244		- 'min' => 0.1,
1245		- 'max' => 8.0,
1246		- 'step' => 0.1,
1247		- 'default' => 2.5,
1248		- 'condition' => [
1249		- 'counter_animation!' => 'motion',
1250		- ],
1251		- 'frontend_available' => true,
1252		- ]
1253		- );
1254		- $this->add_control(
1255		- 'motion_heading',
1256		- [
1257		- 'label' => esc_html__( 'Motion Durations (in ms)', 'uicore-elements' ),
1258		- 'type' => Controls_Manager::HEADING,
1259		- 'condition' => [
1260		- 'counter_animation' => 'motion',
1261		- ],
1262		- 'separator' => 'before',
1263		- ]
1264		- );
1265		- $this->add_control(
1266		- 'motion_translate_duration',
1267		- [
1268		- 'label' => esc_html__( 'Numbers translate', 'uicore-elements' ),
1269		- 'type' => Controls_Manager::NUMBER,
1270		- 'min' => 0.1,
1271		- 'max' => 8.0,
1272		- 'step' => 0.1,
1273		- 'default' => 0.32,
1274		- 'condition' => [
1275		- 'counter_animation' => 'motion',
1276		- ],
1277		- 'selectors' => [
1278		- '{{WRAPPER}}' => '--ui-e-motion-translate: {{VALUE}}s;',
1279		- ],
1280		- ]
1281		- );
1282		- $this->add_control(
1283		- 'motion_opacity_duration',
1284		- [
1285		- 'label' => esc_html__( 'Numbers opacity', 'uicore-elements' ),
1286		- 'type' => Controls_Manager::NUMBER,
1287		- 'min' => 0.1,
1288		- 'max' => 8.0,
1289		- 'step' => 0.1,
1290		- 'default' => 0.2,
1291		- 'condition' => [
1292		- 'counter_animation' => 'motion',
1293		- ],
1294		- 'selectors' => [
1295		- '{{WRAPPER}}' => '--ui-e-motion-opacity: {{VALUE}}s;',
1296		- ],
1297		- ]
1298		- );
1299		- $this->add_control(
1300		- 'motion_blur_duration',
1301		- [
1302		- 'label' => esc_html__( 'Blur effect', 'uicore-elements' ),
1303		- 'type' => Controls_Manager::NUMBER,
1304		- 'min' => 0.1,
1305		- 'max' => 8.0,
1306		- 'step' => 0.1,
1307		- 'default' => 0.36,
1308		- 'condition' => [
1309		- 'counter_animation' => 'motion',
1310		- ],
1311		- 'selectors' => [
1312		- '{{WRAPPER}}' => '--ui-e-motion-blur: {{VALUE}}s;',
1313		- ],
1314		- ]
1315		- );
1316		- $this->add_control(
1317		- 'motion_delay',
1318		- [
1319		- 'label' => esc_html__( 'Delay between numbers', 'uicore-elements' ),
1320		- 'type' => Controls_Manager::NUMBER,
1321		- 'min' => 0.1,
1322		- 'max' => 8.0,
1323		- 'step' => 0.1,
1324		- 'default' => 0.2,
1325		- 'condition' => [
1326		- 'counter_animation' => 'motion',
1327		- ],
1328		- 'selectors' => [
1329		- '{{WRAPPER}}' => '--ui-e-motion-delay: {{VALUE}}s;',
1330		- ],
1331		- ]
1332		- );
1333		- $this->add_control(
1334		- 'animate_suffix',
1335		- [
1336		- 'label' => esc_html__( 'Animate suffix', 'uicore-elements' ),
1337		- 'type' => Controls_Manager::SWITCHER,
1338		- 'label_on' => esc_html__( 'True', 'uicore-elements' ),
1339		- 'label_off' => esc_html__( 'False', 'uicore-elements' ),
1340		- 'return_value' => 'true',
1341		- 'frontend_available' => true,
1342		- 'description' => esc_html__('Add the suffix to the Odometer animation, but removes any suffix custom styling.', 'uicore-elements' ),
1343		- 'condition' =>[
1344		- 'counter_animation' => ['odometer'],
1345		- ],
1346		- ]
1347		- );
	1231	+ $this->add_control(
	1232	+ 'counter_animation',
	1233	+ [
	1234	+ 'label' => esc_html__('Number animation', 'uicore-elements'),
	1235	+ 'type' => Controls_Manager::SELECT,
	1236	+ 'default' => 'simple',
	1237	+ 'options' => [
	1238	+ 'simple' => esc_html__('Simple', 'uicore-elements'),
	1239	+ 'odometer' => esc_html__('Odometer', 'uicore-elements'),
	1240	+ 'motion' => esc_html__('Motion Blur', 'uicore-elements'),
	1241	+ ],
	1242	+ 'frontend_available' => true,
	1243	+ 'prefix_class' => 'ui-e-counter-',
	1244	+ 'render_type' => 'template',
	1245	+ ]
	1246	+ );
	1247	+ $this->add_control(
	1248	+ 'duration',
	1249	+ [
	1250	+ 'label' => esc_html__('Duration (in seconds)', 'uicore-elements'),
	1251	+ 'type' => Controls_Manager::NUMBER,
	1252	+ 'min' => 0.1,
	1253	+ 'max' => 8.0,
	1254	+ 'step' => 0.1,
	1255	+ 'default' => 2.5,
	1256	+ 'condition' => [
	1257	+ 'counter_animation!' => 'motion',
	1258	+ ],
	1259	+ 'frontend_available' => true,
	1260	+ ]
	1261	+ );
	1262	+ $this->add_control(
	1263	+ 'motion_heading',
	1264	+ [
	1265	+ 'label' => esc_html__('Motion Durations (in ms)', 'uicore-elements'),
	1266	+ 'type' => Controls_Manager::HEADING,
	1267	+ 'condition' => [
	1268	+ 'counter_animation' => 'motion',
	1269	+ ],
	1270	+ 'separator' => 'before',
	1271	+ ]
	1272	+ );
	1273	+ $this->add_control(
	1274	+ 'motion_translate_duration',
	1275	+ [
	1276	+ 'label' => esc_html__('Numbers translate', 'uicore-elements'),
	1277	+ 'type' => Controls_Manager::NUMBER,
	1278	+ 'min' => 0.1,
	1279	+ 'max' => 8.0,
	1280	+ 'step' => 0.1,
	1281	+ 'default' => 0.32,
	1282	+ 'condition' => [
	1283	+ 'counter_animation' => 'motion',
	1284	+ ],
	1285	+ 'selectors' => [
	1286	+ '{{WRAPPER}}' => '--ui-e-motion-translate: {{VALUE}}s;',
	1287	+ ],
	1288	+ ]
	1289	+ );
	1290	+ $this->add_control(
	1291	+ 'motion_opacity_duration',
	1292	+ [
	1293	+ 'label' => esc_html__('Numbers opacity', 'uicore-elements'),
	1294	+ 'type' => Controls_Manager::NUMBER,
	1295	+ 'min' => 0.1,
	1296	+ 'max' => 8.0,
	1297	+ 'step' => 0.1,
	1298	+ 'default' => 0.2,
	1299	+ 'condition' => [
	1300	+ 'counter_animation' => 'motion',
	1301	+ ],
	1302	+ 'selectors' => [
	1303	+ '{{WRAPPER}}' => '--ui-e-motion-opacity: {{VALUE}}s;',
	1304	+ ],
	1305	+ ]
	1306	+ );
	1307	+ $this->add_control(
	1308	+ 'motion_blur_duration',
	1309	+ [
	1310	+ 'label' => esc_html__('Blur effect', 'uicore-elements'),
	1311	+ 'type' => Controls_Manager::NUMBER,
	1312	+ 'min' => 0.1,
	1313	+ 'max' => 8.0,
	1314	+ 'step' => 0.1,
	1315	+ 'default' => 0.36,
	1316	+ 'condition' => [
	1317	+ 'counter_animation' => 'motion',
	1318	+ ],
	1319	+ 'selectors' => [
	1320	+ '{{WRAPPER}}' => '--ui-e-motion-blur: {{VALUE}}s;',
	1321	+ ],
	1322	+ ]
	1323	+ );
	1324	+ $this->add_control(
	1325	+ 'motion_delay',
	1326	+ [
	1327	+ 'label' => esc_html__('Delay between numbers', 'uicore-elements'),
	1328	+ 'type' => Controls_Manager::NUMBER,
	1329	+ 'min' => 0.1,
	1330	+ 'max' => 8.0,
	1331	+ 'step' => 0.1,
	1332	+ 'default' => 0.2,
	1333	+ 'condition' => [
	1334	+ 'counter_animation' => 'motion',
	1335	+ ],
	1336	+ 'selectors' => [
	1337	+ '{{WRAPPER}}' => '--ui-e-motion-delay: {{VALUE}}s;',
	1338	+ ],
	1339	+ ]
	1340	+ );
	1341	+ $this->add_control(
	1342	+ 'animate_suffix',
	1343	+ [
	1344	+ 'label' => esc_html__('Animate suffix', 'uicore-elements'),
	1345	+ 'type' => Controls_Manager::SWITCHER,
	1346	+ 'label_on' => esc_html__('True', 'uicore-elements'),
	1347	+ 'label_off' => esc_html__('False', 'uicore-elements'),
	1348	+ 'return_value' => 'true',
	1349	+ 'frontend_available' => true,
	1350	+ 'description' => esc_html__('Add the suffix to the Odometer animation, but removes any suffix custom styling.', 'uicore-elements'),
	1351	+ 'condition' => [
	1352	+ 'counter_animation' => ['odometer'],
	1353	+ ],
	1354	+ ]
	1355	+ );
1348	1356
1349	1357	$this->end_controls_section();
1350		- }
1351		- protected function render()
1352		- {
	1358	+ }
	1359	+ protected function render()
	1360	+ {
1353	1361
1354		- $settings = $this->get_settings_for_display();
	1362	+ $settings = $this->get_settings_for_display();
1355	1363
1356		- $icon_type = $settings['icon_type'];
1357		- $num_tag = $settings['counter_html_tag'];
1358		- $txt_tag = $settings['content_html_tag'];
1359		- $prefix = $settings['counter_prefix'];
1360		- $suffix = $settings['counter_suffix'];
1361		- $media = $settings['show_icon'] ? true : false; // Check if media is enabled,
	1364	+ $icon_type = $settings['icon_type'];
	1365	+ $num_tag = $settings['counter_html_tag'];
	1366	+ $txt_tag = $settings['content_html_tag'];
	1367	+ $prefix = $settings['counter_prefix'];
	1368	+ $suffix = $settings['counter_suffix'];
	1369	+ $media = $settings['show_icon'] ? true : false; // Check if media is enabled,
1362	1370
1363		- if ($media) {
1364		- switch($icon_type){
1365		- case 'icon' :
	1371	+ if ($media) {
	1372	+ switch ($icon_type) {
	1373	+ case 'icon':
1366	1374	$icon = $settings['selected_icon'];
1367	1375	break;
1368		- case 'image' :
	1376	+ case 'image':
1369	1377	$icon = $settings['image'];
1370	1378	break;
1371		- }
1372		- $icon_width = ( $icon_type === 'image' && $this->is_option('image_fullwidth', 'true') )
	1379	+ }
	1380	+ $icon_width = ($icon_type === 'image' && $this->is_option('image_fullwidth', 'true'))
1373	1381	? esc_attr('large')
1374	1382	: esc_attr('thumbnail');
1375		- }
	1383	+ }
1376	1384
1377		- $stack = $settings['counter_text_inline'] ? false : true; // If text inline, no stack wrapper between elements is needed
1378		- $title = !empty($settings['content_text']) ?
1379		- '<' . esc_html($txt_tag) . ' class="ui-e-title">' . wp_kses_data($settings['content_text']) . '</' . esc_html($txt_tag) . '>' :
1380		- "<!-- no title -->";
1381		- $html = '<' . esc_html($num_tag) . ' class="ui-e-num">';
	1385	+ $stack = $settings['counter_text_inline'] ? false : true; // If text inline, no stack wrapper between elements is needed
	1386	+ $title = !empty($settings['content_text']) ?
	1387	+ '<' . Helper::esc_tag($txt_tag) . ' class="ui-e-title">' . wp_kses_data($settings['content_text']) . '</' . esc_html($txt_tag) . '>' :
	1388	+ "<!-- no title -->";
	1389	+ $html = '<' . Helper::esc_tag($num_tag) . ' class="ui-e-num">';
1382	1390
1383	1391	// Motion animation markup
1384		- if ($settings['counter_animation'] == 'motion'){
1385		- $value = $settings['count_number'];
1386		- $numbers = str_split($value);
	1392	+ if ($settings['counter_animation'] == 'motion') {
	1393	+ $value = $settings['count_number'];
	1394	+ $numbers = str_split($value);
1387	1395
1388		- foreach ($numbers as $n => $value) {
	1396	+ foreach ($numbers as $n => $value) {
1389	1397	$index = 'style="--index:' . $n . '"';
1390	1398
1391	1399	// prefix
1392		- if ( $n === 0 && !empty($prefix) ) {
	1400	+ if ($n === 0 && !empty($prefix)) {
1393	1401	$html .= '<span class="ui-e-prefix" ' . $index . '>' . esc_html($prefix) . '</span>';
1394	1402	}
1395	1403
1396	1404	// number
1397		- $html .= '<span ' . $index . '>' . esc_html($value). ' </span>';
	1405	+ $html .= '<span ' . $index . '>' . esc_html($value) . ' </span>';
1398	1406
1399	1407	// suffix
1400	1408	if ($n === count($numbers) - 1 && !empty($suffix)) {
1401	1409	$html .= '<span class="ui-e-suffix" ' . $index . '>' . esc_html($suffix) . '</span>';
1402	1410	}
1403		- }
	1411	+ }
1404	1412
1405		- // Default markup
1406		- }else{
	1413	+ // Default markup
	1414	+ } else {
1407	1415	$html .= '<span class="ui-e-prefix">' . $prefix . '</span>';
1408		- $html .= '<span class="value"> 0 </span>';
	1416	+ $html .= '<span class="value"> 0 </span>';
1409	1417	$html .= $settings['animate_suffix'] == 'true' ? '' : '<span class="ui-e-suffix">' . $suffix . '</span>'; // Suffix might be animated by Odometer animation
1410		- }
	1418	+ }
1411	1419
1412		- $html .= '</' . esc_html($num_tag) . '>';
	1420	+ $html .= '</' . esc_html($num_tag) . '>';
1413	1421
1414		- // Build the widget HTML
1415		- if($media) : ?>
1416		- <div class="ui-e-ico">
1417		- <div class="ui-e-offset">
1418		- <?php if($icon_type === 'icon') {
1419		- Icons_Manager::render_icon( $icon, [ 'aria-hidden' => 'true' ] );
1420		- } else {
1421		- echo wp_get_attachment_image( $icon['id'], $icon_width );
1422		- } ?>
1423		- </div>
1424		- </div>
1425		- <?php endif;
	1422	+ // Build the widget HTML
	1423	+ if ($media) : ?>
	1424	+ <div class="ui-e-ico">
	1425	+ <div class="ui-e-offset">
	1426	+ <?php if ($icon_type === 'icon') {
	1427	+ Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']);
	1428	+ } else {
	1429	+ echo wp_get_attachment_image($icon['id'], $icon_width);
	1430	+ } ?>
	1431	+ </div>
	1432	+ </div>
	1433	+ <?php endif;
1426	1434
1427		- if($stack) {
1428		- ?> <div class="ui-e-wrp"> <?php
1429		- }
1430		- echo wp_kses_post($html . $title);
1431		- if($stack) {
1432		- ?> </div> <?php
1433		- }
1434		- }
1435		-
1436		-}
1437		-\Elementor\Plugin::instance()->widgets_manager->register(new Counter());
	1435	+ if ($stack) {
	1436	+ ?> <div class="ui-e-wrp"> <?php
	1437	+ }
	1438	+ echo wp_kses_post($html . $title);
	1439	+ if ($stack) {
	1440	+ ?> </div> <?php
	1441	+ }
	1442	+ }
	1443	+ }
	1444	+ \Elementor\Plugin::instance()->widgets_manager->register(new Counter());