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

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