PluginProbe
UiCore Elements – Free widgets and templates for Elementor / 1.3.18
UiCore Elements – Free widgets and templates for Elementor v1.3.18
1.3.18 1.3.17 1.3.16 trunk 1.0.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.16 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.2.0 1.2.1 1.2.2 1.2.3 All 42 releases
← All changes | includes/widgets/icon-list.php +1328 -1290 1.0.0 → 1.3.18 View file →
@@ -1,1290 +1,1328 @@
1 -<?php
2 -namespace UiCoreElements;
3 -
4 -use Elementor\Repeater;
5 -use Elementor\Controls_Manager;
6 -use Elementor\Icons_Manager;
7 -use Elementor\Group_Control_Border;
8 -use Elementor\Group_Control_Box_Shadow;
9 -use Elementor\Group_Control_Typography;
10 -use Elementor\Group_Control_Background;
11 -use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
12 -use UiCoreElements\UiCoreWidget;
13 -use UiCoreELements\Helper;
14 -
15 -defined('ABSPATH') || exit();
16 -
17 -/**
18 - * Icon List
19 - *
20 - * @author Lucas Marini Falbo <[email protected]>
21 - * @since 1.0.0
22 - */
23 -
24 -class IconList extends UiCoreWidget
25 -{
26 -
27 - public function get_name()
28 - {
29 - return 'uicore-icon-list';
30 - }
31 - public function get_title()
32 - {
33 - return esc_html__('Icon List', 'uicore-elements');
34 - }
35 - public function get_icon()
36 - {
37 - return 'eicon-post-list ui-e-widget';
38 - }
39 - public function get_categories()
40 - {
41 - return ['uicore'];
42 - }
43 - public function get_styles()
44 - {
45 - return ['icon-list'];
46 - }
47 - public function get_scripts()
48 - {
49 - return [];
50 - }
51 - public function get_keywords()
52 - {
53 - return ['icon', 'list', 'uicore'];
54 - }
55 - protected function register_controls()
56 - {
57 -
58 - $this->start_controls_section(
59 - 'section_layout',
60 - [
61 - 'label' => esc_html__('Items', 'uicore-elements'),
62 - ]
63 - );
64 -
65 - $repeater = new Repeater();
66 -
67 - $repeater->add_control(
68 - 'text',
69 - [
70 - 'label' => esc_html__('Title', 'uicore-elements'),
71 - 'type' => Controls_Manager::TEXT,
72 - 'label_block' => true,
73 - 'placeholder' => esc_html__('List Item', 'uicore-elements'),
74 - 'default' => esc_html__('List Item', 'uicore-elements'),
75 - 'dynamic' => [
76 - 'active' => true,
77 - ],
78 - ]
79 - );
80 -
81 - $repeater->add_control(
82 - 'text_details',
83 - [
84 - 'label' => esc_html__('Subtitle', 'uicore-elements'),
85 - 'type' => Controls_Manager::TEXT,
86 - 'label_block' => true,
87 - 'placeholder' => esc_html__('Subtitle', 'uicore-elements'),
88 - 'dynamic' => [
89 - 'active' => true,
90 - ],
91 - ]
92 - );
93 -
94 - $repeater->add_control(
95 - 'list_icon',
96 - [
97 - 'label' => esc_html__('Icon', 'uicore-elements'),
98 - 'type' => Controls_Manager::ICONS,
99 - 'label_block' => false,
100 - 'skin' => 'inline',
101 - 'default' => [
102 - 'value' => 'fas fa-check',
103 - 'library' => 'fa-solid',
104 - ],
105 - ]
106 - );
107 -
108 - $repeater->add_control(
109 - 'img',
110 - [
111 - 'label' => esc_html__('Image', 'uicore-elements'),
112 - 'type' => Controls_Manager::MEDIA,
113 - 'dynamic' => [
114 - 'active' => true,
115 - ],
116 - 'label_block' => false,
117 -
118 - ]
119 - );
120 -
121 - $repeater->add_control(
122 - 'link',
123 - [
124 - 'label' => esc_html__('Link', 'uicore-elements'),
125 - 'type' => Controls_Manager::URL,
126 - 'options' => [ 'url', 'is_external', 'nofollow' ],
127 - 'default' => [
128 - 'url' => '',
129 - 'is_external' => false,
130 - 'nofollow' => false,
131 - ],
132 - 'dynamic' => [
133 - 'active' => true,
134 - ],
135 - 'label_block' => true,
136 - ]
137 - );
138 -
139 - $this->add_control(
140 - 'icon_list',
141 - [
142 - 'label' => '',
143 - 'type' => Controls_Manager::REPEATER,
144 - 'fields' => $repeater->get_controls(),
145 - 'default' => [
146 - [
147 - 'text' => esc_html__('List Item #1', 'uicore-elements'),
148 - ],
149 - [
150 - 'text' => esc_html__('List Item #2', 'uicore-elements'),
151 - ],
152 - [
153 - 'text' => esc_html__('List Item #3', 'uicore-elements'),
154 - ],
155 - ],
156 - 'title_field' => '{{{ elementor.helpers.renderIcon( this, list_icon, {}, "i", "panel" ) || \'<i class="{{ icon }}" aria-hidden="true"></i>\' }}} {{{ text }}}',
157 - ]
158 - );
159 -
160 - $this->add_responsive_control(
161 - 'columns',
162 - [
163 - 'label' => esc_html__('Columns', 'uicore-elements'),
164 - 'type' => Controls_Manager::SELECT,
165 - 'default' => '1',
166 - 'tablet_default' => '1',
167 - 'mobile_default' => '1',
168 - 'options' => [
169 - '1' => '1',
170 - '2' => '2',
171 - '3' => '3',
172 - '4' => '4',
173 - '5' => '5',
174 - '6' => '6',
175 - ],
176 - 'render_type' => 'template',
177 - 'selectors' => [
178 - '{{WRAPPER}} ul' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
179 - ],
180 - 'separator' => 'before',
181 - ]
182 - );
183 -
184 - $this->add_responsive_control(
185 - 'list_item_space_between',
186 - [
187 - 'label' => esc_html__('Grid Gap', 'uicore-elements'),
188 - 'type' => Controls_Manager::SLIDER,
189 - 'range' => [
190 - 'px' => [
191 - 'min' => 0,
192 - 'max' => 50,
193 - ],
194 - ],
195 - 'default' => [
196 - 'unit' => 'px',
197 - 'size' => 10,
198 - ],
199 - 'selectors' => [
200 - '{{WRAPPER}} li' => '--ui-e-grid-gap: {{SIZE}}{{UNIT}};',
201 - ],
202 - ]
203 - );
204 -
205 - $this->add_control(
206 - 'show_number_icon',
207 - [
208 - 'label' => esc_html__('Show Number Count', 'uicore-elements'),
209 - 'type' => Controls_Manager::SWITCHER,
210 - ]
211 - );
212 -
213 - $this->add_control(
214 - 'vertical_alignment_number',
215 - [
216 - 'label' => esc_html__('Number Vertical Alignment', 'uicore-elements'),
217 - 'type' => Controls_Manager::CHOOSE,
218 - 'toggle' => false,
219 - 'default' => 'center',
220 - 'options' => [
221 - 'start' => [
222 - 'title' => esc_html__('Top', 'uicore-elements'),
223 - 'icon' => 'eicon-v-align-top',
224 - ],
225 - 'center' => [
226 - 'title' => esc_html__('Center', 'uicore-elements'),
227 - 'icon' => 'eicon-v-align-middle',
228 - ],
229 - 'end' => [
230 - 'title' => esc_html__('Bottom', 'uicore-elements'),
231 - 'icon' => 'eicon-v-align-bottom',
232 - ],
233 - ],
234 - 'condition' => [
235 - 'show_number_icon' => 'yes'
236 - ],
237 - 'selectors' => [
238 - '{{WRAPPER}} .ui-e-number' => 'align-self: {{VALUE}}',
239 - ],
240 - ]
241 - );
242 -
243 - $this->add_control(
244 - 'connector_line',
245 - [
246 - 'label' => esc_html__('Connector Line', 'uicore-elements'),
247 - 'type' => Controls_Manager::SWITCHER,
248 - 'prefix_class' => 'ui-e-connector-line-'
249 - ]
250 - );
251 -
252 - $this->add_control(
253 - 'title_tags',
254 - [
255 - 'label' => esc_html__('Title HTML Tag', 'uicore-elements'),
256 - 'type' => Controls_Manager::SELECT,
257 - 'default' => 'span',
258 - 'options' => Helper::get_title_tags(),
259 - ]
260 - );
261 -
262 - $this->add_responsive_control(
263 - 'icon_position',
264 - [
265 - 'label' => esc_html__('Icon Position', 'uicore-elements'),
266 - 'type' => Controls_Manager::CHOOSE,
267 - 'toggle' => false,
268 - 'options' => [
269 - 'left' => [
270 - 'title' => esc_html__('Left', 'uicore-elements'),
271 - 'icon' => 'eicon-h-align-left',
272 - ],
273 - 'right' => [
274 - 'title' => esc_html__('Right', 'uicore-elements'),
275 - 'icon' => 'eicon-h-align-right',
276 - ],
277 - ],
278 - 'default' => 'left',
279 - 'prefix_class' => 'ui-e-icon-',
280 - 'separator' => 'before'
281 - ]
282 - );
283 -
284 - $this->add_responsive_control(
285 - 'vertical_alignment',
286 - [
287 - 'label' => esc_html__('Icon Vertical Alignment', 'uicore-elements'),
288 - 'type' => Controls_Manager::CHOOSE,
289 - 'toggle' => false,
290 - 'options' => [
291 - 'start' => [
292 - 'title' => esc_html__('Top', 'uicore-elements'),
293 - 'icon' => 'eicon-v-align-top',
294 - ],
295 - 'center' => [
296 - 'title' => esc_html__('Center', 'uicore-elements'),
297 - 'icon' => 'eicon-v-align-middle',
298 - ],
299 - 'end' => [
300 - 'title' => esc_html__('Bottom', 'uicore-elements'),
301 - 'icon' => 'eicon-v-align-bottom',
302 - ],
303 - ],
304 - 'default' => 'center',
305 - 'selectors' => [
306 - '{{WRAPPER}} .ui-e-icon' => 'align-self: {{VALUE}}',
307 - ],
308 - ]
309 - );
310 -
311 - $this->add_control(
312 - 'vertical_alignment_offset',
313 - [
314 - 'label' => esc_html__( 'Vertical Alignment Offset', 'uicore-elements' ),
315 - 'type' => \Elementor\Controls_Manager::SLIDER,
316 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
317 - 'range' => [
318 - 'px' => [
319 - 'min' => -25,
320 - 'max' => 25,
321 - 'step' => 1,
322 - ],
323 - '%' => [
324 - 'min' => -100,
325 - 'max' => 100,
326 - 'step' => 5,
327 - ],
328 - ],
329 - 'default' => [
330 - 'size' => 0,
331 - 'unit' => 'px',
332 - ],
333 - 'selectors' => [
334 - '{{WRAPPER}} .ui-e-icon' => 'transform: translate3d(0,{{SIZE}}{{UNIT}},0);',
335 - ],
336 - ]
337 - );
338 -
339 - $this->add_control(
340 - 'content_position',
341 - [
342 - 'label' => esc_html__('Content Position', 'uicore-elements'),
343 - 'type' => Controls_Manager::CHOOSE,
344 - 'toggle' => false,
345 - 'options' => [
346 - 'left' => [
347 - 'title' => esc_html__('Left', 'uicore-elements'),
348 - 'icon' => 'eicon-h-align-left',
349 - ],
350 - 'right' => [
351 - 'title' => esc_html__('Right', 'uicore-elements'),
352 - 'icon' => 'eicon-h-align-right',
353 - ],
354 - ],
355 - 'default' => is_rtl() ? 'right' : 'left',
356 - 'prefix_class' => 'ui-e-',
357 - ]
358 - );
359 -
360 - $this->add_responsive_control(
361 - 'list_item_align',
362 - [
363 - 'label' => esc_html__('Alignment', 'uicore-elements'),
364 - 'type' => Controls_Manager::CHOOSE,
365 - 'toggle' => false,
366 - 'options' => [
367 - 'left' => [
368 - 'title' => esc_html__('Left', 'uicore-elements'),
369 - 'icon' => 'eicon-h-align-left',
370 - ],
371 - 'center' => [
372 - 'title' => esc_html__('Center', 'uicore-elements'),
373 - 'icon' => 'eicon-h-align-center',
374 - ],
375 - 'right' => [
376 - 'title' => esc_html__('Right', 'uicore-elements'),
377 - 'icon' => 'eicon-h-align-right',
378 - ],
379 - ],
380 - 'default' => is_rtl() ? 'right' : 'left',
381 - 'prefix_class' => 'elementor%s-align-',
382 - ]
383 - );
384 -
385 - $this->end_controls_section();
386 -
387 - $this->start_controls_section(
388 - 'section_list_items',
389 - [
390 - 'label' => esc_html__('List Item', 'uicore-elements'),
391 - 'tab' => Controls_Manager::TAB_STYLE,
392 - ]
393 - );
394 -
395 - $this->start_controls_tabs(
396 - 'list_item_tabs'
397 - );
398 -
399 - $this->start_controls_tab(
400 - 'list_item_tabs_normal',
401 - [
402 - 'label' => esc_html__('Normal', 'uicore-elements'),
403 - ]
404 - );
405 -
406 - $this->add_group_control(
407 - Group_Control_Background::get_type(),
408 - [
409 - 'name' => 'list_item_bg_color',
410 - 'selector' => '{{WRAPPER}} .ui-e-wrap',
411 - ]
412 - );
413 -
414 - $this->add_group_control(
415 - Group_Control_Border::get_type(),
416 - [
417 - 'name' => 'list_item_border',
418 - 'label' => esc_html__('Border', 'uicore-elements'),
419 - 'selector' => '{{WRAPPER}} .ui-e-wrap',
420 - ]
421 - );
422 -
423 - $this->add_group_control(
424 - Group_Control_Box_Shadow::get_type(),
425 - [
426 - 'name' => 'list_item_box_shadow',
427 - 'label' => esc_html__('Box Shadow', 'uicore-elements'),
428 - 'selector' => '{{WRAPPER}} .ui-e-wrap',
429 - ]
430 - );
431 -
432 - $this->end_controls_tab();
433 -
434 - $this->start_controls_tab(
435 - 'list_item_tabs_hover',
436 - [
437 - 'label' => esc_html__('Hover', 'uicore-elements'),
438 - ]
439 - );
440 -
441 - $this->add_group_control(
442 - Group_Control_Background::get_type(),
443 - [
444 - 'name' => 'list_item_hover_bg_color',
445 - 'selector' => '{{WRAPPER}} .ui-e-wrap:hover',
446 - ]
447 - );
448 -
449 - $this->add_control(
450 - 'list_item_hover_border',
451 - [
452 - 'label' => esc_html__('Border Color', 'uicore-elements'),
453 - 'type' => Controls_Manager::COLOR,
454 - 'selectors' => [
455 - '{{WRAPPER}} .ui-e-wrap:hover' => 'border-color: {{VALUE}} !important',
456 - ],
457 - 'condition' => [
458 - 'list_item_border_border!' => ''
459 - ]
460 - ]
461 - );
462 -
463 - $this->add_group_control(
464 - Group_Control_Box_Shadow::get_type(),
465 - [
466 - 'name' => 'list_item_box_shadow_hover',
467 - 'label' => esc_html__('Box Shadow', 'uicore-elements'),
468 - 'selector' => '{{WRAPPER}} .ui-e-wrap:hover',
469 - ]
470 - );
471 -
472 - $this->add_responsive_control(
473 - 'list_item_transition',
474 - [
475 - 'label' => esc_html__('Transition', 'uicore-elements'),
476 - 'type' => Controls_Manager::SLIDER,
477 - 'size_units' => ['s'],
478 - 'range' => [
479 - 's' => [
480 - 'min' => 0.01,
481 - 'max' => 1,
482 - ],
483 - ],
484 - 'default' => [
485 - 'unit' => 's',
486 - 'size' => 0.2,
487 - ],
488 - 'selectors' => [
489 - '{{WRAPPER}} .ui-e-wrap' => '--ui-e-transition: {{SIZE}}{{UNIT}}',
490 - ],
491 - ]
492 - );
493 -
494 - $this->end_controls_tab();
495 -
496 - $this->end_controls_tabs();
497 -
498 - $this->add_control(
499 - 'hr',
500 - [
501 - 'type' => \Elementor\Controls_Manager::DIVIDER,
502 - ]
503 - );
504 -
505 - $this->add_responsive_control(
506 - 'list_item_border_radius',
507 - [
508 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
509 - 'type' => Controls_Manager::DIMENSIONS,
510 - 'size_units' => ['px', '%'],
511 - 'selectors' => [
512 - '{{WRAPPER}} .ui-e-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
513 - ],
514 - ]
515 - );
516 -
517 - $this->add_responsive_control(
518 - 'list_item_padding',
519 - [
520 - 'label' => esc_html__('Padding', 'uicore-elements'),
521 - 'type' => Controls_Manager::DIMENSIONS,
522 - 'size_units' => ['px', 'em', '%'],
523 - 'selectors' => [
524 - '{{WRAPPER}} .ui-e-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
525 - ],
526 - ]
527 - );
528 -
529 - $this->add_responsive_control(
530 - 'list_item_height',
531 - [
532 - 'label' => esc_html__('Height', 'uicore-elements'),
533 - 'type' => Controls_Manager::SLIDER,
534 - 'range' => [
535 - 'px' => [
536 - 'min' => 1,
537 - 'max' => 200,
538 - ],
539 - ],
540 - 'selectors' => [
541 - '{{WRAPPER}} .ui-e-wrap' => 'min-height: {{SIZE}}{{UNIT}}',
542 - ],
543 - ]
544 - );
545 -
546 - $this->add_responsive_control(
547 - 'list_item_spacing',
548 - [
549 - 'label' => esc_html__('Space between elements', 'uicore-elements'),
550 - 'type' => Controls_Manager::SLIDER,
551 - 'range' => [
552 - 'px' => [
553 - 'min' => 1,
554 - 'max' => 80,
555 - ],
556 - ],
557 - 'default' => [
558 - 'unit' => 'px',
559 - 'size' => 10,
560 - ],
561 - 'selectors' => [
562 - '{{WRAPPER}} .ui-e-wrap' => 'gap: {{SIZE}}{{UNIT}}',
563 - ],
564 - ]
565 - );
566 -
567 - $this->end_controls_section();
568 -
569 - $this->start_controls_section(
570 - 'section_icon',
571 - [
572 - 'label' => esc_html__('Number Count', 'uicore-elements'),
573 - 'tab' => Controls_Manager::TAB_STYLE,
574 - 'condition' => [
575 - 'show_number_icon' => 'yes',
576 - ],
577 - ]
578 - );
579 -
580 - $this->start_controls_tabs('tabs_number_icon_style');
581 -
582 - $this->start_controls_tab(
583 - 'tab_number_icon_normal',
584 - [
585 - 'label' => esc_html__('Normal', 'uicore-elements'),
586 - ]
587 - );
588 -
589 - $this->add_control(
590 - 'number_icon_color',
591 - [
592 - 'label' => esc_html__('Color', 'uicore-elements'),
593 - 'type' => Controls_Manager::COLOR,
594 - 'selectors' => [
595 - '{{WRAPPER}} .ui-e-number span' => 'color: {{VALUE}} ',
596 - ],
597 - ]
598 - );
599 -
600 - $this->add_control(
601 - 'icon_bg_color',
602 - [
603 - 'label' => esc_html__('Background Color', 'uicore-elements'),
604 - 'type' => Controls_Manager::COLOR,
605 - 'selectors' => [
606 - '{{WRAPPER}} .ui-e-number' => 'background-color: {{VALUE}}',
607 - ],
608 - ]
609 - );
610 -
611 - $this->add_group_control(
612 - Group_Control_Border::get_type(),
613 - [
614 - 'name' => 'icon_number_border',
615 - 'label' => esc_html__('Border', 'uicore-elements'),
616 - 'selector' => '{{WRAPPER}} .ui-e-number',
617 - ]
618 - );
619 -
620 - $this->add_responsive_control(
621 - 'icon_number_border_radius',
622 - [
623 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
624 - 'type' => Controls_Manager::DIMENSIONS,
625 - 'size_units' => ['px', '%'],
626 - 'selectors' => [
627 - '{{WRAPPER}} .ui-e-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
628 - ],
629 - ]
630 - );
631 -
632 - $this->add_responsive_control(
633 - 'icon_number_padding',
634 - [
635 - 'label' => esc_html__('Padding', 'uicore-elements'),
636 - 'type' => Controls_Manager::DIMENSIONS,
637 - 'size_units' => ['px', 'em', '%'],
638 - 'selectors' => [
639 - '{{WRAPPER}} .ui-e-number' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
640 - ],
641 - ]
642 - );
643 -
644 - $this->add_responsive_control(
645 - 'icon_number_margin',
646 - [
647 - 'label' => esc_html__('Margin', 'uicore-elements'),
648 - 'type' => Controls_Manager::DIMENSIONS,
649 - 'size_units' => ['px', 'em', '%'],
650 - 'selectors' => [
651 - '{{WRAPPER}} .ui-e-number' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
652 - ],
653 - ]
654 - );
655 -
656 - $this->add_group_control(
657 - Group_Control_Typography::get_type(),
658 - [
659 - 'name' => 'number_icon_typography',
660 - 'selector' => '{{WRAPPER}} .ui-e-number span',
661 - ]
662 - );
663 -
664 - $this->end_controls_tab();
665 -
666 - $this->start_controls_tab(
667 - 'tab_number_icon_hover',
668 - [
669 - 'label' => esc_html__('Hover', 'uicore-elements'),
670 - ]
671 - );
672 -
673 - $this->add_control(
674 - 'number_icon_color_hover',
675 - [
676 - 'label' => esc_html__('Color', 'uicore-elements'),
677 - 'type' => Controls_Manager::COLOR,
678 - 'selectors' => [
679 - '{{WRAPPER}} ul li:hover .ui-e-number span' => 'color: {{VALUE}} ',
680 - ],
681 - ]
682 - );
683 -
684 - $this->add_control(
685 - 'number_icon_bg_color_hover',
686 - [
687 - 'label' => esc_html__('Background Color', 'uicore-elements'),
688 - 'type' => Controls_Manager::COLOR,
689 - 'selectors' => [
690 - '{{WRAPPER}} ul li:hover .ui-e-number' => 'background-color: {{VALUE}}',
691 - ],
692 - ]
693 - );
694 -
695 - $this->add_control(
696 - 'number_icon_border_color_hover',
697 - [
698 - 'label' => esc_html__('Border Color', 'uicore-elements'),
699 - 'type' => Controls_Manager::COLOR,
700 - 'selectors' => [
701 - '{{WRAPPER}} ul li:hover .ui-e-number' => 'border-color: {{VALUE}}',
702 - ],
703 - 'condition' => [
704 - 'icon_number_border_border!' => ''
705 - ]
706 - ]
707 - );
708 -
709 - $this->end_controls_tab();
710 -
711 - $this->end_controls_tabs();
712 -
713 - $this->end_controls_section();
714 -
715 - $this->start_controls_section(
716 - 'section_text_style',
717 - [
718 - 'label' => esc_html__('Title / Subtitle', 'uicore-elements'),
719 - 'tab' => Controls_Manager::TAB_STYLE,
720 - ]
721 - );
722 -
723 - $this->start_controls_tabs('tabs_mode_style');
724 - $this->start_controls_tab(
725 - 'tab_normal_mode_normal',
726 - [
727 - 'label' => esc_html__('Normal', 'uicore-elements'),
728 - ]
729 - );
730 -
731 - $this->add_control(
732 - 'title_heading',
733 - [
734 - 'label' => esc_html__('Title', 'uicore-elements'),
735 - 'type' => Controls_Manager::HEADING,
736 - ]
737 - );
738 -
739 - $this->add_control(
740 - 'title_color',
741 - [
742 - 'label' => esc_html__('Color', 'uicore-elements'),
743 - 'type' => Controls_Manager::COLOR,
744 - 'selectors' => [
745 - '{{WRAPPER}} .ui-e-title ' => 'color: {{VALUE}} ',
746 - ],
747 - ]
748 - );
749 -
750 - $this->add_group_control(
751 - Group_Control_Typography::get_type(),
752 - [
753 - 'name' => 'title_typography',
754 - 'selector' => '{{WRAPPER}} .ui-e-title',
755 - ]
756 - );
757 -
758 - $this->add_control(
759 - 'subtitle_heading',
760 - [
761 - 'label' => esc_html__('Subtitle', 'uicore-elements'),
762 - 'type' => Controls_Manager::HEADING,
763 - 'separator' => 'before',
764 - ]
765 - );
766 -
767 - $this->add_control(
768 - 'subtitle_color',
769 - [
770 - 'label' => esc_html__('Color', 'uicore-elements'),
771 - 'type' => Controls_Manager::COLOR,
772 - 'selectors' => [
773 - '{{WRAPPER}} .ui-e-text' => 'color: {{VALUE}} ',
774 - ],
775 - ]
776 - );
777 -
778 - $this->add_group_control(
779 - Group_Control_Typography::get_type(),
780 - [
781 - 'name' => 'sub_title_typography',
782 - 'selector' => '{{WRAPPER}} .ui-e-text',
783 - ]
784 - );
785 -
786 - $this->add_responsive_control(
787 - 'subtitle_margin',
788 - [
789 - 'label' => esc_html__('Margin', 'uicore-elements'),
790 - 'type' => Controls_Manager::DIMENSIONS,
791 - 'size_units' => ['px', 'em', '%'],
792 - 'selectors' => [
793 - '{{WRAPPER}} .ui-e-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
794 - ],
795 - ]
796 - );
797 -
798 - $this->end_controls_tab();
799 -
800 - $this->start_controls_tab(
801 - 'tab_hover_mode_normal',
802 - [
803 - 'label' => esc_html__('Hover', 'uicore-elements'),
804 - ]
805 - );
806 -
807 - $this->add_control(
808 - 'title_color_hover',
809 - [
810 - 'label' => esc_html__('Title Color', 'uicore-elements'),
811 - 'type' => Controls_Manager::COLOR,
812 - 'selectors' => [
813 - '{{WRAPPER}} ul li:hover .ui-e-title' => 'color: {{VALUE}}',
814 - ],
815 - ]
816 - );
817 -
818 - $this->add_control(
819 - 'title_link_color',
820 - [
821 - 'label' => esc_html__('Linked Title Color', 'uicore-elements'),
822 - 'type' => Controls_Manager::COLOR,
823 - 'selectors' => [
824 - '{{WRAPPER}} ul li:hover a .ui-e-title ' => 'color: {{VALUE}} ',
825 - ],
826 - ]
827 - );
828 -
829 - $this->add_control(
830 - 'subtitle_color_hover',
831 - [
832 - 'label' => esc_html__('Subtitle Color', 'uicore-elements'),
833 - 'type' => Controls_Manager::COLOR,
834 - 'selectors' => [
835 - '{{WRAPPER}} ul li:hover .ui-e-text' => 'color: {{VALUE}}',
836 - ],
837 - 'separator' => 'before',
838 - ]
839 - );
840 -
841 - $this->add_control(
842 - 'subtitle_link_color',
843 - [
844 - 'label' => esc_html__('Linked Subtitle Color', 'uicore-elements'),
845 - 'type' => Controls_Manager::COLOR,
846 - 'selectors' => [
847 - '{{WRAPPER}} ul li:hover a .ui-e-text ' => 'color: {{VALUE}} ',
848 - ],
849 - ]
850 - );
851 -
852 - $this->end_controls_tab();
853 -
854 - $this->end_controls_tabs();
855 -
856 - $this->end_controls_section();
857 -
858 - $this->start_controls_section(
859 - 'section_icon_style',
860 - [
861 - 'label' => esc_html__('Icon', 'uicore-elements'),
862 - 'tab' => Controls_Manager::TAB_STYLE,
863 - ]
864 - );
865 -
866 - $this->add_control(
867 - 'icon_size',
868 - [
869 - 'label' => esc_html__( 'Icon Size', 'uicore-elements' ),
870 - 'type' => \Elementor\Controls_Manager::SLIDER,
871 - 'size_units' => [ 'px'],
872 - 'range' => [
873 - 'px' => [
874 - 'min' => 0,
875 - 'max' => 80,
876 - 'step' => 3,
877 - ],
878 - ],
879 - 'default' => [
880 - 'unit' => 'px',
881 - 'size' => 15,
882 - ],
883 - 'selectors' => [
884 - '{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
885 - ],
886 - ]
887 - );
888 -
889 - $this->start_controls_tabs('tabs_mode_style1');
890 - $this->start_controls_tab(
891 - 'tab_normal_mode_normal1',
892 - [
893 - 'label' => esc_html__('Normal', 'uicore-elements'),
894 - ]
895 - );
896 -
897 - $this->add_control(
898 - 'icon_color',
899 - [
900 - 'label' => esc_html__('Color', 'uicore-elements'),
901 - 'type' => Controls_Manager::COLOR,
902 - 'global' => [
903 - 'default' => Global_Colors::COLOR_PRIMARY,
904 - ],
905 - 'selectors' => [
906 - '{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-color: {{VALUE}}',
907 - ],
908 - ]
909 - );
910 -
911 - $this->add_control(
912 - 'right_icon_bg_color',
913 - [
914 - 'label' => esc_html__('Background Color', 'uicore-elements'),
915 - 'type' => Controls_Manager::COLOR,
916 - 'selectors' => [
917 - '{{WRAPPER}} .ui-e-icon ' => 'background: {{VALUE}} ;'
918 - ],
919 - ]
920 - );
921 -
922 - $this->add_group_control(
923 - Group_Control_Border::get_type(),
924 - [
925 - 'name' => 'icon_border',
926 - 'label' => esc_html__('Border', 'uicore-elements'),
927 - 'selector' => '{{WRAPPER}} .ui-e-icon',
928 - ]
929 - );
930 -
931 - $this->add_responsive_control(
932 - 'icon_border_radius',
933 - [
934 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
935 - 'type' => Controls_Manager::DIMENSIONS,
936 - 'size_units' => ['px', '%'],
937 - 'selectors' => [
938 - '{{WRAPPER}} .ui-e-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
939 - ],
940 - ]
941 - );
942 -
943 - $this->add_responsive_control(
944 - 'icon_padding',
945 - [
946 - 'label' => esc_html__('Padding', 'uicore-elements'),
947 - 'type' => Controls_Manager::DIMENSIONS,
948 - 'size_units' => ['px', 'em', '%'],
949 - 'default' => [
950 - 'unit' => 'px',
951 - 'size' => 8,
952 - ],
953 - 'selectors' => [
954 - '{{WRAPPER}} .ui-e-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
955 - ],
956 - ]
957 - );
958 -
959 - $this->add_responsive_control(
960 - 'icon_margin',
961 - [
962 - 'label' => esc_html__('Margin', 'uicore-elements'),
963 - 'type' => Controls_Manager::DIMENSIONS,
964 - 'size_units' => ['px', 'em', '%'],
965 - 'selectors' => [
966 - '{{WRAPPER}} .ui-e-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
967 - ],
968 - ]
969 - );
970 -
971 - $this->end_controls_tab();
972 -
973 - $this->start_controls_tab(
974 - 'tab_hover_mode_normal1',
975 - [
976 - 'label' => esc_html__('Hover', 'uicore-elements'),
977 - ]
978 - );
979 -
980 - $this->add_control(
981 - 'icon_color_hover',
982 - [
983 - 'label' => esc_html__('Color', 'uicore-elements'),
984 - 'type' => Controls_Manager::COLOR,
985 - 'selectors' => [
986 - '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'color: {{VALUE}} !important;',
987 - '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon i' => 'color: {{VALUE}} !important;',
988 - '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon svg' => 'fill: {{VALUE}} !important;',
989 - ],
990 - ]
991 - );
992 -
993 - $this->add_control(
994 - 'icon_bg_color_hover',
995 - [
996 - 'label' => esc_html__('Background Color', 'uicore-elements'),
997 - 'type' => Controls_Manager::COLOR,
998 - 'selectors' => [
999 - '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'background-color: {{VALUE}} ;',
1000 - ],
1001 - ]
1002 - );
1003 -
1004 - $this->add_control(
1005 - 'icon_border_color_hover',
1006 - [
1007 - 'label' => esc_html__('Border Color', 'uicore-elements'),
1008 - 'type' => Controls_Manager::COLOR,
1009 - 'condition' => [
1010 - 'icon_border_border!' => '',
1011 - ],
1012 - 'selectors' => [
1013 - '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'border-color: {{VALUE}} ;',
1014 - ],
1015 - ]
1016 - );
1017 -
1018 - $this->end_controls_tab();
1019 -
1020 - $this->end_controls_tabs();
1021 -
1022 - $this->end_controls_section();
1023 -
1024 - $this->start_controls_section(
1025 - 'section_line_style',
1026 - [
1027 - 'label' => esc_html__('Connector Line', 'uicore-elements'),
1028 - 'tab' => Controls_Manager::TAB_STYLE,
1029 - 'condition' => [
1030 - 'connector_line' => 'yes',
1031 - ],
1032 - ]
1033 - );
1034 -
1035 - $this->add_control(
1036 - 'line_color',
1037 - [
1038 - 'label' => esc_html__( 'Line Color', 'uicore-elements' ),
1039 - 'type' => \Elementor\Controls_Manager::COLOR,
1040 - 'default' => '#333',
1041 - 'global' => [
1042 - 'default' => Global_Colors::COLOR_PRIMARY,
1043 - ],
1044 - 'selectors' => [
1045 - '{{WRAPPER}} li:after' => 'background-color: {{VALUE}}',
1046 - ],
1047 - ]
1048 - );
1049 -
1050 - $this->add_responsive_control(
1051 - 'line_thick',
1052 - [
1053 - 'label' => esc_html__( 'Line Thickness', 'uicore-elements' ),
1054 - 'type' => \Elementor\Controls_Manager::SLIDER,
1055 - 'size_units' => [ 'px'],
1056 - 'range' => [
1057 - 'px' => [
1058 - 'min' => 1,
1059 - 'max' => 10,
1060 - 'step' => 1,
1061 - ],
1062 - ],
1063 - 'default' => [
1064 - 'unit' => 'px',
1065 - 'size' => 1,
1066 - ],
1067 - 'selectors' => [
1068 - '{{WRAPPER}} li:after' => 'width: {{SIZE}}{{UNIT}};',
1069 - ],
1070 - ]
1071 - );
1072 -
1073 - $this->add_responsive_control(
1074 - 'line_horizontal_offset',
1075 - [
1076 - 'label' => esc_html__( 'Line Horizontal Offset', 'uicore-elements' ),
1077 - 'type' => \Elementor\Controls_Manager::SLIDER,
1078 - 'size_units' => [ 'px'],
1079 - 'range' => [
1080 - 'px' => [
1081 - 'min' => 0,
1082 - 'max' => 50,
1083 - 'step' => 1,
1084 - ],
1085 - ],
1086 - 'default' => [
1087 - 'unit' => 'px',
1088 - 'size' => 5,
1089 - ],
1090 - 'selectors' => [
1091 - '{{WRAPPER}} li:after' => '{{icon_position.VALUE}}: {{SIZE}}{{UNIT}};',
1092 - ],
1093 - ]
1094 - );
1095 -
1096 - $this->add_responsive_control(
1097 - 'line_vertical_offset',
1098 - [
1099 - 'label' => esc_html__( 'Line Vertical Offset', 'uicore-elements' ),
1100 - 'type' => \Elementor\Controls_Manager::SLIDER,
1101 - 'size_units' => [ 'px'],
1102 - 'range' => [
1103 - 'px' => [
1104 - 'min' => 0,
1105 - 'max' => 100,
1106 - 'step' => 1,
1107 - ],
1108 - ],
1109 - 'default' => [
1110 - 'unit' => 'px',
1111 - 'size' => 15,
1112 - ],
1113 - 'selectors' => [
1114 - '{{WRAPPER}} li:after' => 'top: {{SIZE}}{{UNIT}};',
1115 - ],
1116 - ]
1117 - );
1118 -
1119 - $this->end_controls_section();
1120 -
1121 - $this->start_controls_section(
1122 - 'section_image_style',
1123 - [
1124 - 'label' => esc_html__('Image', 'uicore-elements'),
1125 - 'tab' => Controls_Manager::TAB_STYLE,
1126 - ]
1127 - );
1128 -
1129 - $this->add_group_control(
1130 - Group_Control_Border::get_type(),
1131 - [
1132 - 'name' => 'image_border',
1133 - 'label' => esc_html__('Border', 'uicore-elements'),
1134 - 'selector' => '{{WRAPPER}} .ui-e-img img',
1135 - ]
1136 - );
1137 -
1138 - $this->add_responsive_control(
1139 - 'border_radius',
1140 - [
1141 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
1142 - 'type' => Controls_Manager::DIMENSIONS,
1143 - 'size_units' => ['px', '%'],
1144 - 'selectors' => [
1145 - '{{WRAPPER}} .ui-e-img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
1146 - ],
1147 - ]
1148 - );
1149 -
1150 - $this->add_responsive_control(
1151 - 'image_margin',
1152 - [
1153 - 'label' => esc_html__('Margin', 'uicore-elements'),
1154 - 'type' => Controls_Manager::DIMENSIONS,
1155 - 'size_units' => ['px', 'em', '%'],
1156 - 'selectors' => [
1157 - '{{WRAPPER}} .ui-e-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1158 - ],
1159 - ]
1160 - );
1161 -
1162 - //size
1163 - $this->add_responsive_control(
1164 - 'image_size',
1165 - [
1166 - 'label' => esc_html__('Size', 'uicore-elements'),
1167 - 'type' => Controls_Manager::SLIDER,
1168 - 'range' => [
1169 - 'px' => [
1170 - 'min' => 10,
1171 - 'max' => 100,
1172 - ],
1173 - ],
1174 - 'default' => [
1175 - 'unit' => 'px',
1176 - 'size' => 40,
1177 - ],
1178 - 'selectors' => [
1179 - '{{WRAPPER}} .ui-e-img img' => 'width: {{SIZE}}{{UNIT}};',
1180 - ],
1181 - ]
1182 - );
1183 -
1184 - $this->end_controls_section();
1185 - }
1186 - protected function render()
1187 - {
1188 -
1189 - $settings = $this->get_settings_for_display();
1190 -
1191 - $ulClass = '';
1192 -
1193 - if($settings['show_number_icon']){
1194 - $ulClass .= ' ui-e-number';
1195 - }
1196 -
1197 - // Create atts
1198 - $this->add_render_attribute('icon_list', 'class', esc_attr($ulClass));
1199 - $this->add_render_attribute('list_item', 'class', 'elementor-icon-list-item');
1200 -
1201 - ?>
1202 - <ul>
1203 -
1204 - <?php
1205 - $i = 1; // counter
1206 - foreach ($settings['icon_list'] as $index => $item) : // starts the iteration
1207 -
1208 - // Render some basic atts
1209 - $repeater_setting_key = $this->get_repeater_setting_key('text', 'icon_list', $index);
1210 - $this->add_render_attribute($repeater_setting_key, 'class', 'elementor-icon-list-text');
1211 - $this->add_inline_editing_attributes($repeater_setting_key);
1212 -
1213 - // Render content atts and data
1214 - $this->add_render_attribute('list_title_tags', 'class', 'ui-e-title', true);
1215 - $tag = $settings['title_tags'];
1216 -
1217 - // Check if current item has link
1218 - if (!empty( $item['link']['url'] ) ) {
1219 - $link_key = 'link_' . $index; // creates an unique link key via index
1220 - $this->add_link_attributes( $link_key, $item['link'] ); // render links atts
1221 -
1222 - $wrapper = "<a class='ui-e-wrap' {$this->get_render_attribute_string($link_key)}>"; // creates the html
1223 - $wrapperClosure = 'a';
1224 - } else {
1225 - $wrapper = '<div class="ui-e-wrap">'; // if it hasn't, creates basic div wrapper
1226 - $wrapperClosure = 'div';
1227 - }
1228 -
1229 - // Check if the current item XXX
1230 - if ($i > intval($settings['columns'])) {
1231 - $this->add_render_attribute('list_class', 'class', 'ui-e-spacing', true);
1232 - }
1233 - ?>
1234 - <li <?php $this->print_render_attribute_string('list_class');?>>
1235 - <?php echo wp_kses_post($wrapper);?>
1236 -
1237 - <?php
1238 - //Number
1239 - if($settings['show_number_icon'] == 'yes') :
1240 - ?>
1241 - <div class='ui-e-number'><span><?php esc_html($i);?></span></div>
1242 - <?php
1243 - $i++;
1244 - endif;
1245 - ?>
1246 -
1247 - <?php
1248 - // Image
1249 - if (!empty($item['img']['url'])) : ?>
1250 - <div class="ui-e-img">
1251 - <?php
1252 - $thumb_url = $item['img']['url'];
1253 - if ($thumb_url) {
1254 - echo wp_kses_post(wp_get_attachment_image(
1255 - $item['img']['id'],
1256 - 'medium',
1257 - false,
1258 - [
1259 - 'alt' => esc_html($item['text'])
1260 - ]
1261 - ));
1262 - }
1263 - ?>
1264 - </div>
1265 - <?php endif; ?>
1266 -
1267 - <div class="ui-e-content">
1268 - <<?php esc_html($tag);?> <?php $this->print_render_attribute_string('list_title_tags');?>>
1269 - <?php echo wp_kses_post($item['text']); ?>
1270 - </<?php esc_html($tag);?>>
1271 - <p class="ui-e-text"> <?php echo wp_kses_post($item['text_details']);?> </p>
1272 - </div>
1273 -
1274 - <?php
1275 - // Icon element
1276 - if (!empty($item['list_icon']['value'])) : ?>
1277 - <div class="ui-e-icon">
1278 - <?php Icons_Manager::render_icon($item['list_icon'], ['aria-hidden' => 'true']); ?>
1279 - </div>
1280 - <?php endif; ?>
1281 -
1282 - </<?php esc_html($wrapperClosure)?>>
1283 - </li>
1284 - <?php $i++;
1285 - endforeach; ?>
1286 - </ul>
1287 - <?php
1288 - }
1289 -}
1290 -\Elementor\Plugin::instance()->widgets_manager->register(new IconList());
1 +<?php
2 +
3 +namespace UiCoreElements;
4 +
5 +use Elementor\Repeater;
6 +use Elementor\Controls_Manager;
7 +use Elementor\Icons_Manager;
8 +use Elementor\Group_Control_Border;
9 +use Elementor\Group_Control_Box_Shadow;
10 +use Elementor\Group_Control_Typography;
11 +use Elementor\Group_Control_Background;
12 +use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
13 +use UiCoreElements\UiCoreWidget;
14 +use UiCoreELements\Helper;
15 +
16 +defined('ABSPATH') || exit();
17 +
18 +/**
19 + * Icon List
20 + *
21 + * @author Lucas Marini Falbo <[email protected]>
22 + * @since 1.0.0
23 + */
24 +
25 +class IconList extends UiCoreWidget
26 +{
27 +
28 + public function get_name()
29 + {
30 + return 'uicore-icon-list';
31 + }
32 + public function get_title()
33 + {
34 + return esc_html__('Icon List', 'uicore-elements');
35 + }
36 + public function get_icon()
37 + {
38 + return 'eicon-post-list ui-e-widget';
39 + }
40 + public function get_categories()
41 + {
42 + return ['uicore'];
43 + }
44 + public function get_styles()
45 + {
46 + return ['icon-list'];
47 + }
48 + public function get_scripts()
49 + {
50 + return [];
51 + }
52 + public function has_widget_inner_wrapper(): bool
53 + {
54 + // TODO: remove after Optmized Markup experiment is merged to the core
55 + return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
56 + }
57 + public function get_keywords()
58 + {
59 + return ['icon', 'list', 'uicore'];
60 + }
61 + protected function register_controls()
62 + {
63 +
64 + $this->start_controls_section(
65 + 'section_layout',
66 + [
67 + 'label' => esc_html__('Items', 'uicore-elements'),
68 + ]
69 + );
70 +
71 + $this->add_control(
72 + 'padding_by_dimensions',
73 + [
74 + 'type' => Controls_Manager::NOTICE,
75 + 'notice_type' => 'warning',
76 + 'dismissible' => true,
77 + 'heading' => esc_html__("Number Count styles update", 'uicore-elements'),
78 + 'content' => esc_html__('The Number Count padding control was replaced by width/height controls. Please, check your widgets numbers styles.', 'uicore-elements'),
79 + 'condition' => [
80 + 'show_number_icon' => 'yes',
81 + ]
82 + ]
83 + );
84 +
85 +
86 + $repeater = new Repeater();
87 +
88 + $repeater->add_control(
89 + 'text',
90 + [
91 + 'label' => esc_html__('Title', 'uicore-elements'),
92 + 'type' => Controls_Manager::TEXT,
93 + 'label_block' => true,
94 + 'placeholder' => esc_html__('List Item', 'uicore-elements'),
95 + 'default' => esc_html__('List Item', 'uicore-elements'),
96 + 'dynamic' => [
97 + 'active' => true,
98 + ],
99 + ]
100 + );
101 +
102 + $repeater->add_control(
103 + 'text_details',
104 + [
105 + 'label' => esc_html__('Subtitle', 'uicore-elements'),
106 + 'type' => Controls_Manager::TEXT,
107 + 'label_block' => true,
108 + 'placeholder' => esc_html__('Subtitle', 'uicore-elements'),
109 + 'dynamic' => [
110 + 'active' => true,
111 + ],
112 + ]
113 + );
114 +
115 + $repeater->add_control(
116 + 'list_icon',
117 + [
118 + 'label' => esc_html__('Icon', 'uicore-elements'),
119 + 'type' => Controls_Manager::ICONS,
120 + 'label_block' => false,
121 + 'skin' => 'inline',
122 + 'default' => [
123 + 'value' => 'fas fa-check',
124 + 'library' => 'fa-solid',
125 + ],
126 + ]
127 + );
128 +
129 + $repeater->add_control(
130 + 'img',
131 + [
132 + 'label' => esc_html__('Image', 'uicore-elements'),
133 + 'type' => Controls_Manager::MEDIA,
134 + 'dynamic' => [
135 + 'active' => true,
136 + ],
137 + 'label_block' => false,
138 +
139 + ]
140 + );
141 +
142 + $repeater->add_control(
143 + 'link',
144 + [
145 + 'label' => esc_html__('Link', 'uicore-elements'),
146 + 'type' => Controls_Manager::URL,
147 + 'options' => ['url', 'is_external', 'nofollow'],
148 + 'default' => [
149 + 'url' => '',
150 + 'is_external' => false,
151 + 'nofollow' => false,
152 + ],
153 + 'dynamic' => [
154 + 'active' => true,
155 + ],
156 + 'label_block' => true,
157 + ]
158 + );
159 +
160 + $this->add_control(
161 + 'icon_list',
162 + [
163 + 'label' => '',
164 + 'type' => Controls_Manager::REPEATER,
165 + 'fields' => $repeater->get_controls(),
166 + 'default' => [
167 + [
168 + 'text' => esc_html__('List Item #1', 'uicore-elements'),
169 + ],
170 + [
171 + 'text' => esc_html__('List Item #2', 'uicore-elements'),
172 + ],
173 + [
174 + 'text' => esc_html__('List Item #3', 'uicore-elements'),
175 + ],
176 + ],
177 + 'title_field' => '{{{ elementor.helpers.renderIcon( this, list_icon, {}, "i", "panel" ) || \'<i class="{{ icon }}" aria-hidden="true"></i>\' }}} {{{ text }}}',
178 + ]
179 + );
180 +
181 + $this->add_responsive_control(
182 + 'columns',
183 + [
184 + 'label' => esc_html__('Columns', 'uicore-elements'),
185 + 'type' => Controls_Manager::SELECT,
186 + 'default' => '1',
187 + 'tablet_default' => '1',
188 + 'mobile_default' => '1',
189 + 'options' => [
190 + '1' => '1',
191 + '2' => '2',
192 + '3' => '3',
193 + '4' => '4',
194 + '5' => '5',
195 + '6' => '6',
196 + ],
197 + 'selectors' => [
198 + '{{WRAPPER}} ul' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
199 + ],
200 + 'separator' => 'before',
201 + ]
202 + );
203 +
204 + $this->add_responsive_control(
205 + 'list_item_space_between',
206 + [
207 + 'label' => esc_html__('Grid Gap', 'uicore-elements'),
208 + 'type' => Controls_Manager::SLIDER,
209 + 'range' => [
210 + 'px' => [
211 + 'min' => 0,
212 + 'max' => 50,
213 + ],
214 + ],
215 + 'default' => [
216 + 'unit' => 'px',
217 + 'size' => 10,
218 + ],
219 + 'selectors' => [
220 + '{{WRAPPER}}' => '--ui-e-grid-gap: {{SIZE}}{{UNIT}};',
221 + ],
222 + ]
223 + );
224 +
225 + $this->add_control(
226 + 'show_number_icon',
227 + [
228 + 'label' => esc_html__('Show Number Count', 'uicore-elements'),
229 + 'type' => Controls_Manager::SWITCHER,
230 + ]
231 + );
232 +
233 + $this->add_control(
234 + 'vertical_alignment_number',
235 + [
236 + 'label' => esc_html__('Number Vertical Alignment', 'uicore-elements'),
237 + 'type' => Controls_Manager::CHOOSE,
238 + 'toggle' => false,
239 + 'default' => 'center',
240 + 'options' => [
241 + 'start' => [
242 + 'title' => esc_html__('Top', 'uicore-elements'),
243 + 'icon' => 'eicon-v-align-top',
244 + ],
245 + 'center' => [
246 + 'title' => esc_html__('Center', 'uicore-elements'),
247 + 'icon' => 'eicon-v-align-middle',
248 + ],
249 + 'end' => [
250 + 'title' => esc_html__('Bottom', 'uicore-elements'),
251 + 'icon' => 'eicon-v-align-bottom',
252 + ],
253 + ],
254 + 'condition' => [
255 + 'show_number_icon' => 'yes'
256 + ],
257 + 'selectors' => [
258 + '{{WRAPPER}} .ui-e-number' => 'align-self: {{VALUE}}',
259 + ],
260 + ]
261 + );
262 +
263 + $this->add_control(
264 + 'connector_line',
265 + [
266 + 'label' => esc_html__('Connector Line', 'uicore-elements'),
267 + 'type' => Controls_Manager::SWITCHER,
268 + 'prefix_class' => 'ui-e-connector-line-'
269 + ]
270 + );
271 +
272 + $this->add_control(
273 + 'title_tags',
274 + [
275 + 'label' => esc_html__('Title HTML Tag', 'uicore-elements'),
276 + 'type' => Controls_Manager::SELECT,
277 + 'default' => 'span',
278 + 'options' => Helper::get_title_tags(),
279 + ]
280 + );
281 +
282 + $this->add_responsive_control(
283 + 'icon_position',
284 + [
285 + 'label' => esc_html__('Icon Position', 'uicore-elements'),
286 + 'type' => Controls_Manager::CHOOSE,
287 + 'toggle' => false,
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 + ],
297 + ],
298 + 'default' => is_rtl() ? 'right' : 'left',
299 + 'prefix_class' => 'ui-e-icon-',
300 + 'separator' => 'before'
301 + ]
302 + );
303 +
304 + $this->add_responsive_control(
305 + 'vertical_alignment',
306 + [
307 + 'label' => esc_html__('Icon Vertical Alignment', 'uicore-elements'),
308 + 'type' => Controls_Manager::CHOOSE,
309 + 'toggle' => false,
310 + 'options' => [
311 + 'start' => [
312 + 'title' => esc_html__('Top', 'uicore-elements'),
313 + 'icon' => 'eicon-v-align-top',
314 + ],
315 + 'center' => [
316 + 'title' => esc_html__('Center', 'uicore-elements'),
317 + 'icon' => 'eicon-v-align-middle',
318 + ],
319 + 'end' => [
320 + 'title' => esc_html__('Bottom', 'uicore-elements'),
321 + 'icon' => 'eicon-v-align-bottom',
322 + ],
323 + ],
324 + 'default' => 'center',
325 + 'selectors' => [
326 + '{{WRAPPER}} .ui-e-icon' => 'align-self: {{VALUE}}',
327 + ],
328 + ]
329 + );
330 +
331 + $this->add_responsive_control(
332 + 'vertical_alignment_offset',
333 + [
334 + 'label' => esc_html__('Vertical Alignment Offset', 'uicore-elements'),
335 + 'type' => \Elementor\Controls_Manager::SLIDER,
336 + 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
337 + 'range' => [
338 + 'px' => [
339 + 'min' => -25,
340 + 'max' => 25,
341 + 'step' => 1,
342 + ],
343 + '%' => [
344 + 'min' => -100,
345 + 'max' => 100,
346 + 'step' => 5,
347 + ],
348 + ],
349 + 'default' => [
350 + 'size' => 0,
351 + 'unit' => 'px',
352 + ],
353 + 'selectors' => [
354 + '{{WRAPPER}} .ui-e-icon' => 'transform: translate3d(0,{{SIZE}}{{UNIT}},0);',
355 + ],
356 + ]
357 + );
358 +
359 + $this->add_control(
360 + 'content_position',
361 + [
362 + 'label' => esc_html__('Content Position', 'uicore-elements'),
363 + 'type' => Controls_Manager::CHOOSE,
364 + 'toggle' => false,
365 + 'options' => [
366 + 'left' => [
367 + 'title' => esc_html__('Left', 'uicore-elements'),
368 + 'icon' => 'eicon-h-align-left',
369 + ],
370 + 'right' => [
371 + 'title' => esc_html__('Right', 'uicore-elements'),
372 + 'icon' => 'eicon-h-align-right',
373 + ],
374 + ],
375 + 'default' => is_rtl() ? 'right' : 'left',
376 + 'prefix_class' => 'ui-e-',
377 + ]
378 + );
379 +
380 + $this->add_responsive_control(
381 + 'list_item_align',
382 + [
383 + 'label' => esc_html__('Alignment', 'uicore-elements'),
384 + 'type' => Controls_Manager::CHOOSE,
385 + 'toggle' => false,
386 + 'options' => [
387 + 'left' => [
388 + 'title' => esc_html__('Left', 'uicore-elements'),
389 + 'icon' => 'eicon-h-align-left',
390 + ],
391 + 'center' => [
392 + 'title' => esc_html__('Center', 'uicore-elements'),
393 + 'icon' => 'eicon-h-align-center',
394 + ],
395 + 'right' => [
396 + 'title' => esc_html__('Right', 'uicore-elements'),
397 + 'icon' => 'eicon-h-align-right',
398 + ],
399 + ],
400 + 'default' => is_rtl() ? 'right' : 'left',
401 + 'prefix_class' => 'elementor%s-align-',
402 + ]
403 + );
404 +
405 + $this->end_controls_section();
406 +
407 + $this->start_controls_section(
408 + 'section_list_items',
409 + [
410 + 'label' => esc_html__('List Item', 'uicore-elements'),
411 + 'tab' => Controls_Manager::TAB_STYLE,
412 + ]
413 + );
414 +
415 + $this->start_controls_tabs(
416 + 'list_item_tabs'
417 + );
418 +
419 + $this->start_controls_tab(
420 + 'list_item_tabs_normal',
421 + [
422 + 'label' => esc_html__('Normal', 'uicore-elements'),
423 + ]
424 + );
425 +
426 + $this->add_group_control(
427 + Group_Control_Background::get_type(),
428 + [
429 + 'name' => 'list_item_bg_color',
430 + 'selector' => '{{WRAPPER}} .ui-e-wrap',
431 + ]
432 + );
433 +
434 + $this->add_group_control(
435 + Group_Control_Border::get_type(),
436 + [
437 + 'name' => 'list_item_border',
438 + 'label' => esc_html__('Border', 'uicore-elements'),
439 + 'selector' => '{{WRAPPER}} .ui-e-wrap',
440 + ]
441 + );
442 +
443 + $this->add_group_control(
444 + Group_Control_Box_Shadow::get_type(),
445 + [
446 + 'name' => 'list_item_box_shadow',
447 + 'label' => esc_html__('Box Shadow', 'uicore-elements'),
448 + 'selector' => '{{WRAPPER}} .ui-e-wrap',
449 + ]
450 + );
451 +
452 + $this->end_controls_tab();
453 +
454 + $this->start_controls_tab(
455 + 'list_item_tabs_hover',
456 + [
457 + 'label' => esc_html__('Hover', 'uicore-elements'),
458 + ]
459 + );
460 +
461 + $this->add_group_control(
462 + Group_Control_Background::get_type(),
463 + [
464 + 'name' => 'list_item_hover_bg_color',
465 + 'selector' => '{{WRAPPER}} .ui-e-wrap:hover',
466 + ]
467 + );
468 +
469 + $this->add_control(
470 + 'list_item_hover_border',
471 + [
472 + 'label' => esc_html__('Border Color', 'uicore-elements'),
473 + 'type' => Controls_Manager::COLOR,
474 + 'selectors' => [
475 + '{{WRAPPER}} .ui-e-wrap:hover' => 'border-color: {{VALUE}} !important',
476 + ],
477 + 'condition' => [
478 + 'list_item_border_border!' => ''
479 + ]
480 + ]
481 + );
482 +
483 + $this->add_group_control(
484 + Group_Control_Box_Shadow::get_type(),
485 + [
486 + 'name' => 'list_item_box_shadow_hover',
487 + 'label' => esc_html__('Box Shadow', 'uicore-elements'),
488 + 'selector' => '{{WRAPPER}} .ui-e-wrap:hover',
489 + ]
490 + );
491 +
492 + $this->add_responsive_control(
493 + 'list_item_transition',
494 + [
495 + 'label' => esc_html__('Transition', 'uicore-elements'),
496 + 'type' => Controls_Manager::SLIDER,
497 + 'size_units' => ['s'],
498 + 'range' => [
499 + 's' => [
500 + 'min' => 0.01,
501 + 'max' => 1,
502 + ],
503 + ],
504 + 'default' => [
505 + 'unit' => 's',
506 + 'size' => 0.2,
507 + ],
508 + 'selectors' => [
509 + '{{WRAPPER}} .ui-e-wrap' => '--ui-e-transition: {{SIZE}}{{UNIT}}',
510 + ],
511 + ]
512 + );
513 +
514 + $this->end_controls_tab();
515 +
516 + $this->end_controls_tabs();
517 +
518 + $this->add_control(
519 + 'hr',
520 + [
521 + 'type' => \Elementor\Controls_Manager::DIVIDER,
522 + ]
523 + );
524 +
525 + $this->add_responsive_control(
526 + 'list_item_border_radius',
527 + [
528 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
529 + 'type' => Controls_Manager::DIMENSIONS,
530 + 'size_units' => ['px', '%'],
531 + 'selectors' => [
532 + '{{WRAPPER}} .ui-e-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
533 + ],
534 + ]
535 + );
536 +
537 + $this->add_responsive_control(
538 + 'list_item_padding',
539 + [
540 + 'label' => esc_html__('Padding', 'uicore-elements'),
541 + 'type' => Controls_Manager::DIMENSIONS,
542 + 'size_units' => ['px', 'em', '%'],
543 + 'selectors' => [
544 + '{{WRAPPER}} .ui-e-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
545 + ],
546 + ]
547 + );
548 +
549 + $this->add_responsive_control(
550 + 'list_item_height',
551 + [
552 + 'label' => esc_html__('Height', 'uicore-elements'),
553 + 'type' => Controls_Manager::SLIDER,
554 + 'range' => [
555 + 'px' => [
556 + 'min' => 1,
557 + 'max' => 200,
558 + ],
559 + ],
560 + 'selectors' => [
561 + '{{WRAPPER}} .ui-e-wrap' => 'min-height: {{SIZE}}{{UNIT}}',
562 + ],
563 + ]
564 + );
565 +
566 + $this->add_responsive_control(
567 + 'list_item_spacing',
568 + [
569 + 'label' => esc_html__('Space between elements', 'uicore-elements'),
570 + 'type' => Controls_Manager::SLIDER,
571 + 'range' => [
572 + 'px' => [
573 + 'min' => 1,
574 + 'max' => 80,
575 + ],
576 + ],
577 + 'default' => [
578 + 'unit' => 'px',
579 + 'size' => 10,
580 + ],
581 + 'selectors' => [
582 + '{{WRAPPER}} .ui-e-wrap' => 'gap: {{SIZE}}{{UNIT}}',
583 + ],
584 + ]
585 + );
586 +
587 + $this->end_controls_section();
588 +
589 + $this->start_controls_section(
590 + 'section_icon',
591 + [
592 + 'label' => esc_html__('Number Count', 'uicore-elements'),
593 + 'tab' => Controls_Manager::TAB_STYLE,
594 + 'condition' => [
595 + 'show_number_icon' => 'yes',
596 + ],
597 + ]
598 + );
599 +
600 + $this->start_controls_tabs('tabs_number_icon_style');
601 +
602 + $this->start_controls_tab(
603 + 'tab_number_icon_normal',
604 + [
605 + 'label' => esc_html__('Normal', 'uicore-elements'),
606 + ]
607 + );
608 +
609 + $this->add_control(
610 + 'number_icon_color',
611 + [
612 + 'label' => esc_html__('Color', 'uicore-elements'),
613 + 'type' => Controls_Manager::COLOR,
614 + 'selectors' => [
615 + '{{WRAPPER}} .ui-e-number span' => 'color: {{VALUE}} ',
616 + ],
617 + ]
618 + );
619 +
620 + $this->add_control(
621 + 'icon_bg_color',
622 + [
623 + 'label' => esc_html__('Background Color', 'uicore-elements'),
624 + 'type' => Controls_Manager::COLOR,
625 + 'selectors' => [
626 + '{{WRAPPER}} .ui-e-number' => 'background-color: {{VALUE}}',
627 + ],
628 + ]
629 + );
630 +
631 + $this->add_group_control(
632 + Group_Control_Border::get_type(),
633 + [
634 + 'name' => 'icon_number_border',
635 + 'label' => esc_html__('Border', 'uicore-elements'),
636 + 'selector' => '{{WRAPPER}} .ui-e-number',
637 + ]
638 + );
639 +
640 + $this->add_responsive_control(
641 + 'icon_number_border_radius',
642 + [
643 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
644 + 'type' => Controls_Manager::DIMENSIONS,
645 + 'size_units' => ['px', '%'],
646 + 'selectors' => [
647 + '{{WRAPPER}} .ui-e-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
648 + ],
649 + ]
650 + );
651 +
652 + $this->add_control(
653 + 'icon_number_width',
654 + [
655 + 'label' => esc_html__('Width', 'uicore-elements'),
656 + 'type' => Controls_Manager::SLIDER,
657 + 'size_units' => ['px', 'em', 'rem', 'custom'],
658 + 'range' => [
659 + 'px' => [
660 + 'min' => 0,
661 + 'max' => 200,
662 + 'step' => 1,
663 + ],
664 + ],
665 + 'default' => [
666 + 'unit' => 'px',
667 + 'size' => 25,
668 + ],
669 + 'selectors' => [
670 + '{{WRAPPER}} .ui-e-number' => 'min-width: {{SIZE}}{{UNIT}};',
671 + ],
672 + ]
673 + );
674 +
675 + $this->add_control(
676 + 'icon_number_height',
677 + [
678 + 'label' => esc_html__('Height', 'uicore-elements'),
679 + 'type' => Controls_Manager::SLIDER,
680 + 'size_units' => ['px', 'em', 'rem', 'custom'],
681 + 'range' => [
682 + 'px' => [
683 + 'min' => 0,
684 + 'max' => 200,
685 + 'step' => 1,
686 + ],
687 + ],
688 + 'default' => [
689 + 'unit' => 'px',
690 + 'size' => 25,
691 + ],
692 + 'selectors' => [
693 + '{{WRAPPER}} .ui-e-number' => 'min-height: {{SIZE}}{{UNIT}};',
694 + ],
695 + ]
696 + );
697 +
698 + $this->add_responsive_control(
699 + 'icon_number_margin',
700 + [
701 + 'label' => esc_html__('Margin', 'uicore-elements'),
702 + 'type' => Controls_Manager::DIMENSIONS,
703 + 'size_units' => ['px', 'em', '%'],
704 + 'selectors' => [
705 + '{{WRAPPER}} .ui-e-number' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
706 + ],
707 + ]
708 + );
709 +
710 + $this->add_group_control(
711 + Group_Control_Typography::get_type(),
712 + [
713 + 'name' => 'number_icon_typography',
714 + 'selector' => '{{WRAPPER}} .ui-e-number span',
715 + ]
716 + );
717 +
718 + $this->end_controls_tab();
719 +
720 + $this->start_controls_tab(
721 + 'tab_number_icon_hover',
722 + [
723 + 'label' => esc_html__('Hover', 'uicore-elements'),
724 + ]
725 + );
726 +
727 + $this->add_control(
728 + 'number_icon_color_hover',
729 + [
730 + 'label' => esc_html__('Color', 'uicore-elements'),
731 + 'type' => Controls_Manager::COLOR,
732 + 'selectors' => [
733 + '{{WRAPPER}} ul li:hover .ui-e-number span' => 'color: {{VALUE}} ',
734 + ],
735 + ]
736 + );
737 +
738 + $this->add_control(
739 + 'number_icon_bg_color_hover',
740 + [
741 + 'label' => esc_html__('Background Color', 'uicore-elements'),
742 + 'type' => Controls_Manager::COLOR,
743 + 'selectors' => [
744 + '{{WRAPPER}} ul li:hover .ui-e-number' => 'background-color: {{VALUE}}',
745 + ],
746 + ]
747 + );
748 +
749 + $this->add_control(
750 + 'number_icon_border_color_hover',
751 + [
752 + 'label' => esc_html__('Border Color', 'uicore-elements'),
753 + 'type' => Controls_Manager::COLOR,
754 + 'selectors' => [
755 + '{{WRAPPER}} ul li:hover .ui-e-number' => 'border-color: {{VALUE}}',
756 + ],
757 + 'condition' => [
758 + 'icon_number_border_border!' => ''
759 + ]
760 + ]
761 + );
762 +
763 + $this->end_controls_tab();
764 +
765 + $this->end_controls_tabs();
766 +
767 + $this->end_controls_section();
768 +
769 + $this->start_controls_section(
770 + 'section_text_style',
771 + [
772 + 'label' => esc_html__('Title / Subtitle', 'uicore-elements'),
773 + 'tab' => Controls_Manager::TAB_STYLE,
774 + ]
775 + );
776 +
777 + $this->start_controls_tabs('tabs_mode_style');
778 + $this->start_controls_tab(
779 + 'tab_normal_mode_normal',
780 + [
781 + 'label' => esc_html__('Normal', 'uicore-elements'),
782 + ]
783 + );
784 +
785 + $this->add_control(
786 + 'title_heading',
787 + [
788 + 'label' => esc_html__('Title', 'uicore-elements'),
789 + 'type' => Controls_Manager::HEADING,
790 + ]
791 + );
792 +
793 + $this->add_control(
794 + 'title_color',
795 + [
796 + 'label' => esc_html__('Color', 'uicore-elements'),
797 + 'type' => Controls_Manager::COLOR,
798 + 'selectors' => [
799 + '{{WRAPPER}} .ui-e-title ' => 'color: {{VALUE}} ',
800 + ],
801 + ]
802 + );
803 +
804 + $this->add_group_control(
805 + Group_Control_Typography::get_type(),
806 + [
807 + 'name' => 'title_typography',
808 + 'selector' => '{{WRAPPER}} .ui-e-title',
809 + ]
810 + );
811 +
812 + $this->add_control(
813 + 'subtitle_heading',
814 + [
815 + 'label' => esc_html__('Subtitle', 'uicore-elements'),
816 + 'type' => Controls_Manager::HEADING,
817 + 'separator' => 'before',
818 + ]
819 + );
820 +
821 + $this->add_control(
822 + 'subtitle_color',
823 + [
824 + 'label' => esc_html__('Color', 'uicore-elements'),
825 + 'type' => Controls_Manager::COLOR,
826 + 'selectors' => [
827 + '{{WRAPPER}} .ui-e-text' => 'color: {{VALUE}} ',
828 + ],
829 + ]
830 + );
831 +
832 + $this->add_group_control(
833 + Group_Control_Typography::get_type(),
834 + [
835 + 'name' => 'sub_title_typography',
836 + 'selector' => '{{WRAPPER}} .ui-e-text',
837 + ]
838 + );
839 +
840 + $this->add_responsive_control(
841 + 'subtitle_margin',
842 + [
843 + 'label' => esc_html__('Margin', 'uicore-elements'),
844 + 'type' => Controls_Manager::DIMENSIONS,
845 + 'size_units' => ['px', 'em', '%'],
846 + 'selectors' => [
847 + '{{WRAPPER}} .ui-e-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
848 + ],
849 + ]
850 + );
851 +
852 + $this->end_controls_tab();
853 +
854 + $this->start_controls_tab(
855 + 'tab_hover_mode_normal',
856 + [
857 + 'label' => esc_html__('Hover', 'uicore-elements'),
858 + ]
859 + );
860 +
861 + $this->add_control(
862 + 'title_color_hover',
863 + [
864 + 'label' => esc_html__('Title Color', 'uicore-elements'),
865 + 'type' => Controls_Manager::COLOR,
866 + 'selectors' => [
867 + '{{WRAPPER}} ul li:hover .ui-e-title' => 'color: {{VALUE}}',
868 + ],
869 + ]
870 + );
871 +
872 + $this->add_control(
873 + 'title_link_color',
874 + [
875 + 'label' => esc_html__('Linked Title Color', 'uicore-elements'),
876 + 'type' => Controls_Manager::COLOR,
877 + 'selectors' => [
878 + '{{WRAPPER}} ul li:hover a .ui-e-title ' => 'color: {{VALUE}} ',
879 + ],
880 + ]
881 + );
882 +
883 + $this->add_control(
884 + 'subtitle_color_hover',
885 + [
886 + 'label' => esc_html__('Subtitle Color', 'uicore-elements'),
887 + 'type' => Controls_Manager::COLOR,
888 + 'selectors' => [
889 + '{{WRAPPER}} ul li:hover .ui-e-text' => 'color: {{VALUE}}',
890 + ],
891 + 'separator' => 'before',
892 + ]
893 + );
894 +
895 + $this->add_control(
896 + 'subtitle_link_color',
897 + [
898 + 'label' => esc_html__('Linked Subtitle Color', 'uicore-elements'),
899 + 'type' => Controls_Manager::COLOR,
900 + 'selectors' => [
901 + '{{WRAPPER}} ul li:hover a .ui-e-text ' => 'color: {{VALUE}} ',
902 + ],
903 + ]
904 + );
905 +
906 + $this->end_controls_tab();
907 +
908 + $this->end_controls_tabs();
909 +
910 + $this->end_controls_section();
911 +
912 + $this->start_controls_section(
913 + 'section_icon_style',
914 + [
915 + 'label' => esc_html__('Icon', 'uicore-elements'),
916 + 'tab' => Controls_Manager::TAB_STYLE,
917 + ]
918 + );
919 +
920 + $this->add_responsive_control(
921 + 'icon_size',
922 + [
923 + 'label' => esc_html__('Icon Size', 'uicore-elements'),
924 + 'type' => \Elementor\Controls_Manager::SLIDER,
925 + 'size_units' => ['px'],
926 + 'range' => [
927 + 'px' => [
928 + 'min' => 0,
929 + 'max' => 80,
930 + 'step' => 3,
931 + ],
932 + ],
933 + 'default' => [
934 + 'unit' => 'px',
935 + 'size' => 15,
936 + ],
937 + 'selectors' => [
938 + '{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
939 + ],
940 + ]
941 + );
942 +
943 + $this->start_controls_tabs('tabs_mode_style1');
944 + $this->start_controls_tab(
945 + 'tab_normal_mode_normal1',
946 + [
947 + 'label' => esc_html__('Normal', 'uicore-elements'),
948 + ]
949 + );
950 +
951 + $this->add_control(
952 + 'icon_color',
953 + [
954 + 'label' => esc_html__('Color', 'uicore-elements'),
955 + 'type' => Controls_Manager::COLOR,
956 + 'default' => 'var(--e-global-color-uicore_primary)',
957 +
958 + 'selectors' => [
959 + '{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-color: {{VALUE}}',
960 + ],
961 + ]
962 + );
963 +
964 + $this->add_control(
965 + 'right_icon_bg_color',
966 + [
967 + 'label' => esc_html__('Background Color', 'uicore-elements'),
968 + 'type' => Controls_Manager::COLOR,
969 + 'selectors' => [
970 + '{{WRAPPER}} .ui-e-icon ' => 'background: {{VALUE}} ;'
971 + ],
972 + ]
973 + );
974 +
975 + $this->add_group_control(
976 + Group_Control_Border::get_type(),
977 + [
978 + 'name' => 'icon_border',
979 + 'label' => esc_html__('Border', 'uicore-elements'),
980 + 'selector' => '{{WRAPPER}} .ui-e-icon',
981 + ]
982 + );
983 +
984 + $this->add_responsive_control(
985 + 'icon_border_radius',
986 + [
987 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
988 + 'type' => Controls_Manager::DIMENSIONS,
989 + 'size_units' => ['px', '%'],
990 + 'selectors' => [
991 + '{{WRAPPER}} .ui-e-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
992 + ],
993 + ]
994 + );
995 +
996 + $this->add_responsive_control(
997 + 'icon_padding',
998 + [
999 + 'label' => esc_html__('Padding', 'uicore-elements'),
1000 + 'type' => Controls_Manager::DIMENSIONS,
1001 + 'size_units' => ['px', 'em', '%'],
1002 + 'default' => [
1003 + 'unit' => 'px',
1004 + 'size' => 8,
1005 + ],
1006 + 'selectors' => [
1007 + '{{WRAPPER}} .ui-e-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1008 + ],
1009 + ]
1010 + );
1011 +
1012 + $this->add_responsive_control(
1013 + 'icon_margin',
1014 + [
1015 + 'label' => esc_html__('Margin', 'uicore-elements'),
1016 + 'type' => Controls_Manager::DIMENSIONS,
1017 + 'size_units' => ['px', 'em', '%'],
1018 + 'selectors' => [
1019 + '{{WRAPPER}} .ui-e-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1020 + ],
1021 + ]
1022 + );
1023 +
1024 + $this->end_controls_tab();
1025 +
1026 + $this->start_controls_tab(
1027 + 'tab_hover_mode_normal1',
1028 + [
1029 + 'label' => esc_html__('Hover', 'uicore-elements'),
1030 + ]
1031 + );
1032 +
1033 + $this->add_control(
1034 + 'icon_color_hover',
1035 + [
1036 + 'label' => esc_html__('Color', 'uicore-elements'),
1037 + 'type' => Controls_Manager::COLOR,
1038 + 'selectors' => [
1039 + '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'color: {{VALUE}} !important;',
1040 + '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon i' => 'color: {{VALUE}} !important;',
1041 + '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon svg' => 'fill: {{VALUE}} !important;',
1042 + ],
1043 + ]
1044 + );
1045 +
1046 + $this->add_control(
1047 + 'icon_bg_color_hover',
1048 + [
1049 + 'label' => esc_html__('Background Color', 'uicore-elements'),
1050 + 'type' => Controls_Manager::COLOR,
1051 + 'selectors' => [
1052 + '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'background-color: {{VALUE}} ;',
1053 + ],
1054 + ]
1055 + );
1056 +
1057 + $this->add_control(
1058 + 'icon_border_color_hover',
1059 + [
1060 + 'label' => esc_html__('Border Color', 'uicore-elements'),
1061 + 'type' => Controls_Manager::COLOR,
1062 + 'condition' => [
1063 + 'icon_border_border!' => '',
1064 + ],
1065 + 'selectors' => [
1066 + '{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'border-color: {{VALUE}} ;',
1067 + ],
1068 + ]
1069 + );
1070 +
1071 + $this->end_controls_tab();
1072 +
1073 + $this->end_controls_tabs();
1074 +
1075 + $this->end_controls_section();
1076 +
1077 + $this->start_controls_section(
1078 + 'section_line_style',
1079 + [
1080 + 'label' => esc_html__('Connector Line', 'uicore-elements'),
1081 + 'tab' => Controls_Manager::TAB_STYLE,
1082 + 'condition' => [
1083 + 'connector_line' => 'yes',
1084 + ],
1085 + ]
1086 + );
1087 +
1088 + $this->add_control(
1089 + 'line_color',
1090 + [
1091 + 'label' => esc_html__('Line Color', 'uicore-elements'),
1092 + 'type' => \Elementor\Controls_Manager::COLOR,
1093 + 'default' => 'var(--e-global-color-uicore_body)',
1094 +
1095 + 'selectors' => [
1096 + '{{WRAPPER}} li:after' => 'background-color: {{VALUE}}',
1097 + ],
1098 + ]
1099 + );
1100 +
1101 + $this->add_responsive_control(
1102 + 'line_thick',
1103 + [
1104 + 'label' => esc_html__('Line Thickness', 'uicore-elements'),
1105 + 'type' => \Elementor\Controls_Manager::SLIDER,
1106 + 'size_units' => ['px'],
1107 + 'range' => [
1108 + 'px' => [
1109 + 'min' => 1,
1110 + 'max' => 10,
1111 + 'step' => 1,
1112 + ],
1113 + ],
1114 + 'default' => [
1115 + 'unit' => 'px',
1116 + 'size' => 1,
1117 + ],
1118 + 'selectors' => [
1119 + '{{WRAPPER}} li:after' => 'width: {{SIZE}}{{UNIT}};',
1120 + ],
1121 + ]
1122 + );
1123 +
1124 + $this->add_responsive_control(
1125 + 'line_horizontal_offset',
1126 + [
1127 + 'label' => esc_html__('Line Horizontal Offset', 'uicore-elements'),
1128 + 'type' => \Elementor\Controls_Manager::SLIDER,
1129 + 'size_units' => ['px'],
1130 + 'range' => [
1131 + 'px' => [
1132 + 'min' => 0,
1133 + 'max' => 50,
1134 + 'step' => 1,
1135 + ],
1136 + ],
1137 + 'default' => [
1138 + 'unit' => 'px',
1139 + 'size' => 5,
1140 + ],
1141 + 'selectors' => [
1142 + '{{WRAPPER}} li:after' => '{{icon_position.VALUE}}: {{SIZE}}{{UNIT}};',
1143 + ],
1144 + ]
1145 + );
1146 +
1147 + $this->add_responsive_control(
1148 + 'line_vertical_offset',
1149 + [
1150 + 'label' => esc_html__('Line Vertical Offset', 'uicore-elements'),
1151 + 'type' => \Elementor\Controls_Manager::SLIDER,
1152 + 'size_units' => ['px'],
1153 + 'range' => [
1154 + 'px' => [
1155 + 'min' => 0,
1156 + 'max' => 100,
1157 + 'step' => 1,
1158 + ],
1159 + ],
1160 + 'default' => [
1161 + 'unit' => 'px',
1162 + 'size' => 15,
1163 + ],
1164 + 'selectors' => [
1165 + '{{WRAPPER}} li:after' => 'top: {{SIZE}}{{UNIT}};',
1166 + ],
1167 + ]
1168 + );
1169 +
1170 + $this->end_controls_section();
1171 +
1172 + $this->start_controls_section(
1173 + 'section_image_style',
1174 + [
1175 + 'label' => esc_html__('Image', 'uicore-elements'),
1176 + 'tab' => Controls_Manager::TAB_STYLE,
1177 + ]
1178 + );
1179 +
1180 + $this->add_group_control(
1181 + Group_Control_Border::get_type(),
1182 + [
1183 + 'name' => 'image_border',
1184 + 'label' => esc_html__('Border', 'uicore-elements'),
1185 + 'selector' => '{{WRAPPER}} .ui-e-img img',
1186 + ]
1187 + );
1188 +
1189 + $this->add_responsive_control(
1190 + 'border_radius',
1191 + [
1192 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
1193 + 'type' => Controls_Manager::DIMENSIONS,
1194 + 'size_units' => ['px', '%'],
1195 + 'selectors' => [
1196 + '{{WRAPPER}} .ui-e-img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
1197 + ],
1198 + ]
1199 + );
1200 +
1201 + $this->add_control(
1202 + 'image_background',
1203 + [
1204 + 'label' => esc_html__('Background Color', 'uicore-elements'),
1205 + 'type' => Controls_Manager::COLOR,
1206 + 'selectors' => [
1207 + '{{WRAPPER}} .ui-e-img img' => 'background-color: {{VALUE}};',
1208 + ],
1209 + ]
1210 + );
1211 +
1212 + $this->add_responsive_control(
1213 + 'image_margin',
1214 + [
1215 + 'label' => esc_html__('Margin', 'uicore-elements'),
1216 + 'type' => Controls_Manager::DIMENSIONS,
1217 + 'size_units' => ['px', 'em', '%'],
1218 + 'selectors' => [
1219 + '{{WRAPPER}} .ui-e-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1220 + ],
1221 + ]
1222 + );
1223 +
1224 + $this->add_responsive_control(
1225 + 'image_size',
1226 + [
1227 + 'label' => esc_html__('Size', 'uicore-elements'),
1228 + 'type' => Controls_Manager::SLIDER,
1229 + 'range' => [
1230 + 'px' => [
1231 + 'min' => 10,
1232 + 'max' => 100,
1233 + ],
1234 + ],
1235 + 'default' => [
1236 + 'unit' => 'px',
1237 + 'size' => 40,
1238 + ],
1239 + 'selectors' => [
1240 + '{{WRAPPER}} .ui-e-img img' => 'width: {{SIZE}}{{UNIT}};',
1241 + ],
1242 + ]
1243 + );
1244 +
1245 + $this->end_controls_section();
1246 + }
1247 + protected function render()
1248 + {
1249 +
1250 + $settings = $this->get_settings_for_display();
1251 + $this->add_render_attribute('icon_list', 'class', $this->is_option('show_number_icon', 'yes') ? 'ui-e-number' : '');
1252 +?>
1253 + <ul>
1254 + <?php foreach ($settings['icon_list'] as $index => $item) :
1255 +
1256 + $i = $index + 1; // index is 0 based
1257 +
1258 + // Prepare the atts
1259 + $repeater_setting_key = $this->get_repeater_setting_key('text', 'icon_list', $index);
1260 + $tag = $settings['title_tags'];
1261 + $this->add_render_attribute($repeater_setting_key, 'class', 'elementor-icon-list-text');
1262 + $this->add_render_attribute('list_title_tags', 'class', 'ui-e-title', true);
1263 +
1264 + // Build url wrapper if link is set
1265 + if (!empty($item['link']['url'])) {
1266 + $link_key = 'link_' . $index;
1267 + $this->add_link_attributes($link_key, $item['link']);
1268 +
1269 + $wrapper = "<a class='ui-e-wrap' {$this->get_render_attribute_string($link_key)}>";
1270 + $wrapperClosure = 'a';
1271 +
1272 + // Build default wrapper otherwise
1273 + } else {
1274 + $wrapper = '<div class="ui-e-wrap">';
1275 + $wrapperClosure = 'div';
1276 + }
1277 +
1278 + ?>
1279 + <li <?php $this->print_render_attribute_string('list_class'); ?>>
1280 +
1281 + <?php echo wp_kses_post($wrapper); ?>
1282 +
1283 + <?php if ($this->is_option('show_number_icon', 'yes')) : ?>
1284 + <div class='ui-e-number'>
1285 + <span> <?php echo esc_html($i); ?> </span>
1286 + </div>
1287 + <?php endif; ?>
1288 +
1289 + <?php if (!empty($item['img']['url'])) : ?>
1290 + <div class="ui-e-img">
1291 + <?php
1292 + $thumb_url = $item['img']['url'];
1293 + if ($thumb_url) {
1294 + echo wp_kses_post(wp_get_attachment_image(
1295 + $item['img']['id'],
1296 + 'medium',
1297 + false,
1298 + [
1299 + 'alt' => esc_html($item['text'])
1300 + ]
1301 + ));
1302 + }
1303 + ?>
1304 + </div>
1305 + <?php endif; ?>
1306 +
1307 + <div class="ui-e-content">
1308 + <<?php echo Helper::esc_tag($tag); ?> <?php $this->print_render_attribute_string('list_title_tags'); ?>>
1309 + <?php echo wp_kses_post($item['text']); ?>
1310 + </<?php echo Helper::esc_tag($tag); ?>>
1311 + <p class="ui-e-text"> <?php echo wp_kses_post($item['text_details']); ?> </p>
1312 + </div>
1313 +
1314 + <?php if (!empty($item['list_icon']['value'])) : ?>
1315 + <div class="ui-e-icon">
1316 + <?php Icons_Manager::render_icon($item['list_icon'], ['aria-hidden' => 'true']); ?>
1317 + </div>
1318 + <?php endif; ?>
1319 +
1320 + </<?php echo esc_html($wrapperClosure) ?>>
1321 + </li>
1322 + <?php
1323 + endforeach; ?>
1324 + </ul>
1325 +<?php
1326 + }
1327 +}
1328 +\Elementor\Plugin::instance()->widgets_manager->register(new IconList());