counter.php: 1.3.17 vs 1.0.14 · UiCore Elements – Free widgets and templates for Elementor

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