king-addons / includes / widgets / Styled_Text_Builder / Styled_Text_Builder.php

Styled_Text_Builder.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.83, at includes/widgets/Styled_Text_Builder/Styled_Text_Builder.php

1,529 lines 58.7 KB

Raw Download Zip

1	<?php
2
3	/** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
4
5	namespace King_Addons;
6
7	use Elementor\Controls_Manager;
8	use Elementor\Group_Control_Background;
9	use Elementor\Group_Control_Border;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Image_Size;
12	use Elementor\Group_Control_Typography;
13	use Elementor\Repeater;
14	use Elementor\Utils;
15	use Elementor\Widget_Base;
16
17	if (!defined('ABSPATH')) {
18	exit; // Exit if accessed directly.
19	}
20
21
22
23	class Styled_Text_Builder extends Widget_Base
24	{
25
26
27	public function get_name(): string
28	{
29	return 'king-addons-styled-text-builder';
30	}
31
32	public function get_title(): string
33	{
34	return esc_html__('Styled Text Builder', 'king-addons');
35	}
36
37	public function get_icon(): string
38	{
39	/** @noinspection SpellCheckingInspection */
40	return 'king-addons-icon king-addons-styled-text-builder';
41	}
42
43	public function get_style_depends(): array
44	{
45	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-styled-text-builder-style'];
46	}
47
48	/**
49	* Script dependencies.
50	*
51	* @return array<int, string>
52	*/
53	public function get_script_depends(): array
54	{
55	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-styled-text-builder-script'];
56	}
57
58	public function get_categories(): array
59	{
60	return ['king-addons'];
61	}
62
63	public function get_keywords(): array
64	{
65	return [
66	'image',
67	'images',
68	'txt',
69	'typography',
70	'text',
71	'animation',
72	'animated',
73	'build',
74	'complex',
75	'effect',
76	'interactive',
77	'click',
78	'target',
79	'point',
80	'builder',
81	'link',
82	'point',
83	'points',
84	'color',
85	'mouse',
86	'hover',
87	'over',
88	'hover over',
89	'picture',
90	'king',
91	'addons',
92	'kingaddons',
93	'king-addons',
94	'font',
95	'size',
96	'heading',
97	'header',
98	'paragraph',
99	'section',
100	'article',
101	'particle',
102	'document',
103	'writing',
104	'style',
105	'format',
106	'complex',
107	'auto',
108	'scroll',
109	'scrolling',
110	'auto-scroll',
111	'auto-scrolling',
112	'head',
113	'heading',
114	'title',
115	'subtitle'
116	];
117	}
118
119	public function get_custom_help_url()
120	{
121	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
122	}
123
124	protected function register_controls(): void
125	{
126	/** START TAB: CONTENT ===================== */
127	/** SECTION: Texts ===================== */
128	$this->start_controls_section(
129	'kng_styled_txt_content_section_content',
130	[
131	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
132	'tab' => Controls_Manager::TAB_CONTENT,
133	]
134	);
135
136	$repeater = new Repeater();
137
138	$repeater->add_control(
139	'kng_styled_txt_content_type',
140	[
141	'label' => '<b>' . esc_html__('Type of content', 'king-addons') . '</b>',
142	'type' => Controls_Manager::SELECT,
143	'options' => [
144	'text' => esc_html__('Text', 'king-addons'),
145	'image' => esc_html__('Image', 'king-addons'),
146	],
147	'default' => 'text',
148	'separator' => 'after',
149	]
150	);
151
152	$repeater->add_group_control(
153	Group_Control_Typography::get_type(),
154	[
155	'label' => esc_html__('Typography', 'king-addons'),
156	'name' => 'kng_styled_txt_typography',
157	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
158	'condition' => [
159	'kng_styled_txt_content_type' => 'text'
160	]
161	]
162	);
163
164	$repeater->add_control(
165	'kng_styled_txt_color',
166	[
167	'label' => esc_html__('Color', 'king-addons'),
168	'type' => Controls_Manager::COLOR,
169	'selectors' => [
170	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'color: {{VALUE}};',
171	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text a' => 'color: {{VALUE}};',
172	],
173	'condition' => [
174	'kng_styled_txt_content_type' => 'text'
175	]
176	]
177	);
178
179	$repeater->add_group_control(
180	Group_Control_Background::get_type(),
181	[
182	'name' => 'kng_styled_txt_bg_color',
183	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
184	'condition' => [
185	'kng_styled_txt_content_type' => 'text'
186	],
187	'separator' => 'before',
188	]
189	);
190
191	$repeater->add_control(
192	'kng_styled_txt_custom_vertical_align',
193	[
194	'label' => esc_html__('Custom Vertical Align', 'king-addons'),
195	'type' => Controls_Manager::SWITCHER,
196	'condition' => [
197	'kng_styled_txt_content_type' => 'text'
198	],
199	'separator' => 'before',
200	]
201	);
202
203	$repeater->add_responsive_control(
204	'kng_styled_txt_vertical_align',
205	[
206	'label' => esc_html__('Vertical Align', 'king-addons'),
207	'type' => Controls_Manager::SELECT,
208	'options' => [
209	'baseline' => esc_html__('baseline', 'king-addons'),
210	'top' => esc_html__('top', 'king-addons'),
211	'bottom' => esc_html__('bottom', 'king-addons'),
212	'sub' => esc_html__('sub', 'king-addons'),
213	'super' => esc_html__('super', 'king-addons'),
214	'text-top' => esc_html__('text-top', 'king-addons'),
215	'text-bottom' => esc_html__('text-bottom', 'king-addons'),
216	'middle' => esc_html__('middle', 'king-addons'),
217	],
218	'default' => 'baseline',
219	'selectors' => [
220	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'vertical-align: {{VALUE}};',
221	],
222	'condition' => [
223	'kng_styled_txt_custom_vertical_align!' => '',
224	'kng_styled_txt_content_type' => 'text'
225	]
226	]
227	);
228
229	$repeater->add_control(
230	'kng_styled_txt_padding_switcher',
231	[
232	'label' => esc_html__('Custom Padding', 'king-addons'),
233	'type' => Controls_Manager::SWITCHER,
234	'condition' => [
235	'kng_styled_txt_content_type' => 'text'
236	]
237	]
238	);
239
240	$repeater->add_responsive_control(
241	'kng_styled_txt_padding',
242	[
243	'label' => esc_html__('Padding', 'king-addons'),
244	'type' => Controls_Manager::DIMENSIONS,
245	'size_units' => ['px', 'em', '%'],
246	'default' => [
247	'top' => 0,
248	'right' => 0,
249	'bottom' => 0,
250	'left' => 0,
251	],
252	'selectors' => [
253	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
254	],
255	'condition' => [
256	'kng_styled_txt_padding_switcher!' => '',
257	'kng_styled_txt_content_type' => 'text'
258	]
259	]
260	);
261
262	$repeater->add_control(
263	'kng_styled_txt_margin_switcher',
264	[
265	'label' => esc_html__('Custom Margin', 'king-addons'),
266	'type' => Controls_Manager::SWITCHER,
267	'condition' => [
268	'kng_styled_txt_content_type' => 'text'
269	]
270	]
271	);
272
273	$repeater->add_responsive_control(
274	'kng_styled_txt_margin_left',
275	[
276	'label' => esc_html__('Margin Left', 'king-addons'),
277	'type' => Controls_Manager::NUMBER,
278	'step' => 1,
279	'selectors' => [
280	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-left: {{SIZE}}px;',
281	],
282	'condition' => [
283	'kng_styled_txt_margin_switcher!' => '',
284	'kng_styled_txt_content_type' => 'text'
285	]
286	]
287	);
288
289	$repeater->add_responsive_control(
290	'kng_styled_txt_margin_right',
291	[
292	'label' => esc_html__('Margin Right', 'king-addons'),
293	'type' => Controls_Manager::NUMBER,
294	'step' => 1,
295	'selectors' => [
296	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-right: {{SIZE}}px;',
297	],
298	'condition' => [
299	'kng_styled_txt_margin_switcher!' => '',
300	'kng_styled_txt_content_type' => 'text'
301	]
302	]
303	);
304
305	$repeater->add_control(
306	'kng_styled_txt_margin_info',
307	[
308	'type' => Controls_Manager::ALERT,
309	'alert_type' => 'info',
310	'content' => esc_html__('For vertical spacing use the line-height parameter in Typography, or optionally Custom Padding - top and bottom. Margin top and bottom parameters are available when Custom Width value is set. This is because of current HTML/CSS limitations for multiline text.', 'king-addons'),
311	'condition' => [
312	'kng_styled_txt_margin_switcher!' => '',
313	'kng_styled_txt_content_type' => 'text'
314	]
315	]
316	);
317
318	$repeater->add_control(
319	'kng_styled_txt_custom_border',
320	[
321	'label' => esc_html__('Custom Border', 'king-addons'),
322	'type' => Controls_Manager::SWITCHER,
323	'condition' => [
324	'kng_styled_txt_content_type' => 'text'
325	]
326	]
327	);
328
329	$repeater->add_group_control(
330	Group_Control_Border::get_type(),
331	[
332	'name' => 'kng_styled_txt_border',
333	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
334	'condition' => [
335	'kng_styled_txt_custom_border!' => '',
336	'kng_styled_txt_content_type' => 'text'
337	]
338	]
339	);
340
341	$repeater->add_responsive_control(
342	'kng_styled_txt_border_radius',
343	[
344	'label' => esc_html__('Border Radius', 'king-addons'),
345	'type' => Controls_Manager::DIMENSIONS,
346	'size_units' => ['px', '%'],
347	'default' => [
348	'top' => 0,
349	'right' => 0,
350	'bottom' => 0,
351	'left' => 0,
352	],
353	'selectors' => [
354	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
355	],
356	'condition' => [
357	'kng_styled_txt_custom_border!' => '',
358	'kng_styled_txt_content_type' => 'text'
359	]
360	]
361	);
362
363	$repeater->add_control(
364	'kng_styled_txt_custom_width_switcher',
365	[
366	'label' => esc_html__('Custom Width', 'king-addons'),
367	'type' => Controls_Manager::SWITCHER,
368	'condition' => [
369	'kng_styled_txt_content_type' => 'text'
370	]
371	]
372	);
373
374	$repeater->add_responsive_control(
375	'kng_styled_txt_custom_width',
376	[
377	'label' => esc_html__('Width (px)', 'king-addons'),
378	'description' => esc_html__('The custom width of the current content item is useful for creating multiline text snippets or limiting the image size.', 'king-addons'),
379	'type' => Controls_Manager::NUMBER,
380	'min' => 0,
381	'step' => 1,
382	'selectors' => [
383	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'width: {{SIZE}}px; display: inline-block;',
384	],
385	'condition' => [
386	'kng_styled_txt_custom_width_switcher!' => '',
387	'kng_styled_txt_content_type' => 'text'
388	]
389	]
390	);
391
392	$repeater->add_responsive_control(
393	'kng_styled_txt_margin_top',
394	[
395	'label' => esc_html__('Margin Top', 'king-addons'),
396	'type' => Controls_Manager::NUMBER,
397	'step' => 1,
398	'selectors' => [
399	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-top: {{SIZE}}px;',
400	],
401	'condition' => [
402	'kng_styled_txt_custom_width_switcher!' => '',
403	'kng_styled_txt_content_type' => 'text'
404	]
405	]
406	);
407
408	$repeater->add_responsive_control(
409	'kng_styled_txt_margin_bottom',
410	[
411	'label' => esc_html__('Margin Bottom', 'king-addons'),
412	'type' => Controls_Manager::NUMBER,
413	'step' => 1,
414	'selectors' => [
415	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-bottom: {{SIZE}}px;',
416	],
417	'condition' => [
418	'kng_styled_txt_custom_width_switcher!' => '',
419	'kng_styled_txt_content_type' => 'text'
420	]
421	]
422	);
423
424	/** ====================================================== */
425	/** TEXT EFFECTS ========================================== */
426	$pro_icon = king_addons_freemius()->can_use_premium_code() ? '' : '<i class="eicon-pro-icon"></i>';
427	$repeater->add_control(
428	'kng_styled_txt_effect',
429	[
430	'label' => '<b>' . esc_html__('Text Effect', 'king-addons') . '</b>',
431	'type' => Controls_Manager::SELECT,
432	'options' => [
433	'none' => esc_html__('None', 'king-addons'),
434	'text-gradient' => esc_html__('Text Gradient', 'king-addons'),
435	'underline-gradient' => esc_html__('Underline Gradient', 'king-addons'),
436	'outline-stroke' => esc_html__('Outline Stroke', 'king-addons'),
437	'spoiler-thanos' => sprintf(__('Spoiler / Thanos Snap %s', 'king-addons'), $pro_icon),
438	'typing' => sprintf(__('Typing Text %s', 'king-addons'), $pro_icon),
439	],
440	'label_block' => true,
441	'default' => 'none',
442	'separator' => 'before',
443	'condition' => [
444	'kng_styled_txt_content_type' => 'text'
445	]
446	]
447	);
448
449	if (!king_addons_freemius()->can_use_premium_code()) {
450	$repeater->add_control(
451	'kng_styled_txt_effect_spoiler_notice',
452	[
453	'type' => Controls_Manager::RAW_HTML,
454	'raw' => esc_html__('Spoiler / Thanos effect is available in Pro.', 'king-addons'),
455	'content_classes' => 'king-addons-pro-notice',
456	'condition' => [
457	'kng_styled_txt_effect' => 'spoiler-thanos',
458	'kng_styled_txt_content_type' => 'text',
459	'kng_styled_txt_effect!' => 'outline-stroke',
460	],
461	]
462	);
463	}
464
465	if (!king_addons_freemius()->can_use_premium_code()) {
466	$repeater->add_control(
467	'kng_styled_txt_effect_typing_notice',
468	[
469	'type' => Controls_Manager::RAW_HTML,
470	'raw' => esc_html__('Typing Text effect is available in Pro.', 'king-addons'),
471	'content_classes' => 'king-addons-pro-notice',
472	'condition' => [
473	'kng_styled_txt_effect' => 'typing',
474	'kng_styled_txt_content_type' => 'text',
475	],
476	]
477	);
478	}
479
480	$repeater->add_control(
481	'kng_styled_txt_spoiler_trigger_desktop',
482	[
483	'label' => esc_html__('Reveal on Desktop', 'king-addons'),
484	'type' => Controls_Manager::SELECT,
485	'default' => 'hover',
486	'options' => [
487	'hover' => esc_html__('Hover', 'king-addons'),
488	'hover-click' => esc_html__('Hover + Click (Remove)', 'king-addons'),
489	'click' => esc_html__('Click', 'king-addons'),
490	],
491	'condition' => [
492	'kng_styled_txt_effect' => 'spoiler-thanos',
493	'kng_styled_txt_content_type' => 'text'
494	]
495	]
496	);
497
498	$repeater->add_control(
499	'kng_styled_txt_spoiler_trigger_mobile',
500	[
501	'label' => esc_html__('Reveal on Mobile', 'king-addons'),
502	'type' => Controls_Manager::SELECT,
503	'default' => 'tap',
504	'options' => [
505	'tap' => esc_html__('Tap', 'king-addons'),
506	'hover' => esc_html__('Hover', 'king-addons'),
507	'hover-click' => esc_html__('Hover + Tap (Remove)', 'king-addons'),
508	],
509	'condition' => [
510	'kng_styled_txt_effect' => 'spoiler-thanos',
511	'kng_styled_txt_content_type' => 'text'
512	]
513	]
514	);
515
516	$repeater->add_control(
517	'kng_styled_txt_spoiler_color',
518	[
519	'label' => esc_html__('Spoiler Dots Color', 'king-addons'),
520	'type' => Controls_Manager::COLOR,
521	'default' => '#9ca3af',
522	'condition' => [
523	'kng_styled_txt_effect' => 'spoiler-thanos',
524	'kng_styled_txt_content_type' => 'text'
525	]
526	]
527	);
528
529	$repeater->add_control(
530	'kng_styled_txt_spoiler_opacity',
531	[
532	'label' => esc_html__('Spoiler Opacity', 'king-addons'),
533	'type' => Controls_Manager::SLIDER,
534	'size_units' => ['custom'],
535	'range' => [
536	'custom' => [
537	'min' => 0.1,
538	'max' => 1,
539	'step' => 0.05,
540	],
541	],
542	'default' => [
543	'size' => 0.92,
544	'unit' => 'custom',
545	],
546	'condition' => [
547	'kng_styled_txt_effect' => 'spoiler-thanos',
548	'kng_styled_txt_content_type' => 'text'
549	]
550	]
551	);
552
553	$repeater->add_control(
554	'kng_styled_txt_spoiler_speed',
555	[
556	'label' => esc_html__('Animation Speed (s)', 'king-addons'),
557	'type' => Controls_Manager::SLIDER,
558	'size_units' => ['custom'],
559	'range' => [
560	'custom' => [
561	'min' => 0.5,
562	'max' => 5,
563	'step' => 0.1,
564	],
565	],
566	'default' => [
567	'size' => 1.6,
568	'unit' => 'custom',
569	],
570	'condition' => [
571	'kng_styled_txt_effect' => 'spoiler-thanos',
572	'kng_styled_txt_content_type' => 'text'
573	]
574	]
575	);
576
577	$repeater->add_control(
578	'kng_styled_txt_typing_speed',
579	[
580	'label' => esc_html__('Typing Speed (ms)', 'king-addons'),
581	'type' => Controls_Manager::NUMBER,
582	'default' => 80,
583	'min' => 10,
584	'max' => 500,
585	'condition' => [
586	'kng_styled_txt_effect' => 'typing',
587	'kng_styled_txt_content_type' => 'text'
588	]
589	]
590	);
591
592	$repeater->add_control(
593	'kng_styled_txt_typing_delay',
594	[
595	'label' => esc_html__('Loop Delay (ms)', 'king-addons'),
596	'type' => Controls_Manager::NUMBER,
597	'default' => 1200,
598	'min' => 0,
599	'max' => 10000,
600	'condition' => [
601	'kng_styled_txt_effect' => 'typing',
602	'kng_styled_txt_content_type' => 'text'
603	]
604	]
605	);
606
607	$repeater->add_control(
608	'kng_styled_txt_typing_loop',
609	[
610	'label' => esc_html__('Loop Typing', 'king-addons'),
611	'type' => Controls_Manager::SWITCHER,
612	'return_value' => 'yes',
613	'default' => 'yes',
614	'condition' => [
615	'kng_styled_txt_effect' => 'typing',
616	'kng_styled_txt_content_type' => 'text'
617	]
618	]
619	);
620
621	$repeater->add_control(
622	'kng_styled_txt_typing_cursor',
623	[
624	'label' => esc_html__('Cursor', 'king-addons'),
625	'type' => Controls_Manager::TEXT,
626	'default' => '\|',
627	'condition' => [
628	'kng_styled_txt_effect' => 'typing',
629	'kng_styled_txt_content_type' => 'text'
630	]
631	]
632	);
633
634	/** Outline Stroke ========================================== */
635	$repeater->add_control(
636	'kng_styled_txt_effect_stroke_txt_color',
637	[
638	'label' => esc_html__('Text Color', 'king-addons'),
639	'type' => Controls_Manager::COLOR,
640	'default' => '#0000',
641	'selectors' => [
642	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => 'color: {{VALUE}};'
643	],
644	'condition' => [
645	'kng_styled_txt_effect' => 'outline-stroke',
646	'kng_styled_txt_content_type' => 'text'
647	]
648	]
649	);
650
651	$repeater->add_control(
652	'kng_styled_txt_effect_stroke_stroke_color',
653	[
654	'label' => esc_html__('Stroke Color', 'king-addons'),
655	'type' => Controls_Manager::COLOR,
656	'default' => '#dbdbdb',
657	'selectors' => [
658	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => '-webkit-text-stroke-color: {{VALUE}};'
659	],
660	'condition' => [
661	'kng_styled_txt_effect' => 'outline-stroke',
662	'kng_styled_txt_content_type' => 'text'
663	]
664	]
665	);
666
667	$repeater->add_control(
668	'kng_styled_txt_effect_stroke_width',
669	[
670	'label' => esc_html__('Stroke Width (px)', 'king-addons'),
671	'type' => Controls_Manager::NUMBER,
672	'min' => 1,
673	'step' => 1,
674	'default' => 1,
675	'selectors' => [
676	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => '-webkit-text-stroke-width: {{SIZE}}px;',
677	],
678	'condition' => [
679	'kng_styled_txt_effect' => 'outline-stroke',
680	'kng_styled_txt_content_type' => 'text'
681	]
682	]
683	);
684	/** END Outline Stroke ========================================== */
685
686	/** Text Gradient ========================================== */
687	$repeater->add_group_control(
688	Group_Control_Background::get_type(),
689	[
690	'name' => 'kng_styled_txt_effect_gradient',
691	'types' => ['gradient'],
692	'fields_options' => [
693	'color' => [
694	'default' => '#574ff7',
695	],
696	'background' => [
697	'default' => 'gradient',
698	]
699	],
700	'exclude' => ['classic', 'image'],
701	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner',
702	'condition' => [
703	'kng_styled_txt_effect' => 'text-gradient',
704	'kng_styled_txt_content_type' => 'text'
705	]
706	]
707	);
708	/** END: Text Gradient ========================================== */
709
710	/** Underline Gradient ========================================== */
711	$repeater->add_group_control(
712	Group_Control_Background::get_type(),
713	[
714	'name' => 'kng_styled_txt_underline_effects_gradient',
715	'types' => ['gradient'],
716	'fields_options' => [
717	'color' => [
718	'default' => '#84fab0',
719	],
720	'color_b' => [
721	'default' => '#8fd3f4',
722	],
723	'background' => [
724	'default' => 'gradient',
725	],
726	'gradient_type' => [
727	'default' => 'linear'
728	],
729	'gradient_angle' => [
730	'default' => [
731	'unit' => 'deg',
732	'size' => 120,
733	],
734	]
735	],
736	'exclude' => ['classic', 'image'],
737	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner',
738	'condition' => [
739	'kng_styled_txt_effect' => 'underline-gradient',
740	'kng_styled_txt_content_type' => 'text'
741	]
742	]
743	);
744
745	$repeater->add_control(
746	'kng_styled_txt_underline_effects_bg_position',
747	[
748	'label' => esc_html__('Vertical Position (%)', 'king-addons'),
749	'type' => Controls_Manager::SLIDER,
750	'size_units' => ['%'],
751	'range' => [
752	'%' => [
753	'min' => 0,
754	'max' => 100,
755	'step' => 1,
756	],
757	],
758	'default' => [
759	'unit' => '%',
760	'size' => 88,
761	],
762	'separator' => 'before',
763	'selectors' => [
764	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'background-position: 0 {{SIZE}}{{UNIT}}; background-repeat: no-repeat;',
765	],
766	'condition' => [
767	'kng_styled_txt_effect' => 'underline-gradient',
768	'kng_styled_txt_content_type' => 'text'
769	]
770	]
771	);
772
773	$repeater->add_control(
774	'kng_styled_txt_underline_effects_bg_height',
775	[
776	'label' => esc_html__('Height (%)', 'king-addons'),
777	'type' => Controls_Manager::SLIDER,
778	'size_units' => ['%'],
779	'range' => [
780	'%' => [
781	'min' => 0,
782	'max' => 100,
783	'step' => 1,
784	],
785	],
786	'default' => [
787	'unit' => '%',
788	'size' => 20,
789	],
790	'selectors' => [
791	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'background-size: 100% {{SIZE}}{{UNIT}};',
792	],
793	'condition' => [
794	'kng_styled_txt_effect' => 'underline-gradient',
795	'kng_styled_txt_content_type' => 'text'
796	]
797	]
798	);
799
800	$repeater->add_control(
801	'kng_styled_txt_underline_effects_bg_height_hover',
802	[
803	'label' => esc_html__('Height on mouse hover (%)', 'king-addons'),
804	'type' => Controls_Manager::SLIDER,
805	'size_units' => ['%'],
806	'range' => [
807	'%' => [
808	'min' => 0,
809	'max' => 100,
810	'step' => 1,
811	],
812	],
813	'default' => [
814	'unit' => '%',
815	'size' => 88,
816	],
817	'selectors' => [
818	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner:hover' => 'background-size: 100% {{SIZE}}{{UNIT}};',
819	],
820	'condition' => [
821	'kng_styled_txt_effect' => 'underline-gradient',
822	'kng_styled_txt_content_type' => 'text'
823	]
824	]
825	);
826
827	/** END: Underline Gradient ========================================== */
828
829	/** END: TEXT EFFECTS ========================================== */
830	/** =========================================================== */
831
832	$repeater->add_control(
833	'kng_styled_txt_content',
834	[
835	'label' => '<b>' . esc_html__('Text', 'king-addons') . '</b>',
836	'type' => Controls_Manager::TEXTAREA,
837	'default' => esc_html__('Text', 'king-addons'),
838	'condition' => [
839	'kng_styled_txt_content_type' => 'text'
840	],
841	'separator' => 'before',
842	]
843	);
844	/** END: Content Type TEXT ========================================== */
845
846	/** Content Type IMAGE ========================================== */
847	$repeater->add_control(
848	'kng_styled_txt_image',
849	[
850	'label' => esc_html__('Image', 'king-addons'),
851	'type' => Controls_Manager::MEDIA,
852	'default' => [
853	'url' => Utils::get_placeholder_image_src(),
854	],
855	'condition' => [
856	'kng_styled_txt_content_type' => 'image'
857	]
858	]
859	);
860
861	$repeater->add_group_control(
862	Group_Control_Image_Size::get_type(),
863	[
864	'name' => 'kng_styled_txt_image_size',
865	'default' => 'full',
866	'separator' => 'before',
867	'condition' => [
868	'kng_styled_txt_content_type' => 'image'
869	]
870	]
871	);
872
873	$repeater->add_responsive_control(
874	'kng_image_comparison_box_max_width',
875	[
876	'label' => esc_html__('Width (px)', 'king-addons'),
877	'type' => Controls_Manager::NUMBER,
878	'min' => 0,
879	'step' => 1,
880	'default' => 50,
881	'selectors' => [
882	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'width: {{SIZE}}px;'
883	],
884	'condition' => [
885	'kng_styled_txt_content_type' => 'image'
886	]
887	]
888	);
889
890	$repeater->add_group_control(
891	Group_Control_Box_Shadow::get_type(),
892	[
893	'name' => 'kng_styled_txt_image_shadow',
894	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img',
895	'condition' => [
896	'kng_styled_txt_content_type' => 'image'
897	]
898	]
899	);
900
901	$repeater->add_group_control(
902	Group_Control_Border::get_type(),
903	[
904	'name' => 'kng_styled_txt_image_border',
905	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img',
906	'condition' => [
907	'kng_styled_txt_content_type' => 'image'
908	]
909	]
910	);
911
912	$repeater->add_responsive_control(
913	'kng_styled_txt_image_border_radius',
914	[
915	'label' => esc_html__('Border Radius', 'king-addons'),
916	'type' => Controls_Manager::DIMENSIONS,
917	'size_units' => ['px', '%'],
918	'selectors' => [
919	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
920	],
921	'condition' => [
922	'kng_styled_txt_content_type' => 'image'
923	]
924	]
925	);
926
927	$repeater->add_control(
928	'kng_styled_txt_image_custom_vertical_align',
929	[
930	'label' => esc_html__('Custom Vertical Align', 'king-addons'),
931	'type' => Controls_Manager::SWITCHER,
932	'condition' => [
933	'kng_styled_txt_content_type' => 'image'
934	]
935	]
936	);
937
938	$repeater->add_responsive_control(
939	'kng_styled_txt_image_vertical_align',
940	[
941	'label' => esc_html__('Vertical Align', 'king-addons'),
942	'type' => Controls_Manager::SELECT,
943	'options' => [
944	'baseline' => esc_html__('baseline', 'king-addons'),
945	'top' => esc_html__('top', 'king-addons'),
946	'bottom' => esc_html__('bottom', 'king-addons'),
947	'sub' => esc_html__('sub', 'king-addons'),
948	'super' => esc_html__('super', 'king-addons'),
949	'text-top' => esc_html__('text-top', 'king-addons'),
950	'text-bottom' => esc_html__('text-bottom', 'king-addons'),
951	'middle' => esc_html__('middle', 'king-addons'),
952	],
953	'default' => 'baseline',
954	'selectors' => [
955	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'vertical-align: {{VALUE}};',
956	],
957	'condition' => [
958	'kng_styled_txt_image_custom_vertical_align!' => '',
959	'kng_styled_txt_content_type' => 'image'
960	]
961	]
962	);
963
964	$repeater->add_control(
965	'kng_styled_txt_image_margin_switcher',
966	[
967	'label' => esc_html__('Custom Margin', 'king-addons'),
968	'type' => Controls_Manager::SWITCHER,
969	'condition' => [
970	'kng_styled_txt_content_type' => 'image'
971	]
972	]
973	);
974
975	$repeater->add_responsive_control(
976	'kng_styled_txt_image_margin',
977	[
978	'label' => esc_html__('Margin', 'king-addons'),
979	'type' => Controls_Manager::DIMENSIONS,
980	'size_units' => ['px', '%'],
981	'default' => [
982	'top' => 0,
983	'right' => 0,
984	'bottom' => 0,
985	'left' => 0,
986	],
987	'selectors' => [
988	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin: 0;',
989	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
990	],
991	'condition' => [
992	'kng_styled_txt_image_margin_switcher!' => '',
993	'kng_styled_txt_content_type' => 'image'
994	]
995	]
996	);
997	/** END: Content Type IMAGE ========================================== */
998
999	$repeater->add_control(
1000	'kng_styled_txt_content_common_for_all_types_head',
1001	[
1002	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common for all types', 'king-addons'),
1003	'type' => Controls_Manager::HEADING,
1004	]
1005	);
1006
1007	$repeater->add_control(
1008	'kng_styled_txt_custom_css_class_switcher',
1009	[
1010	'label' => esc_html__('Custom CSS Class', 'king-addons'),
1011	'type' => Controls_Manager::SWITCHER,
1012	]
1013	);
1014
1015	$repeater->add_control(
1016	'kng_styled_txt_custom_css_class',
1017	[
1018	'label' => esc_html__('CSS Class', 'king-addons'),
1019	'type' => Controls_Manager::TEXT,
1020	'placeholder' => esc_html__('Type or paste the class', 'king-addons'),
1021	'ai' => [
1022	'active' => false,
1023	],
1024	'separator' => 'after',
1025	'condition' => [
1026	'kng_styled_txt_custom_css_class_switcher!' => '',
1027	]
1028	]
1029	);
1030
1031	$repeater->add_control(
1032	'kng_styled_txt_transform_switcher',
1033	[
1034	'label' => esc_html__('Transform', 'king-addons'),
1035	'type' => Controls_Manager::SWITCHER,
1036	]
1037	);
1038
1039	$repeater->add_responsive_control(
1040	'kng_styled_txt_transform_rotate',
1041	[
1042	'label' => esc_html__('Rotate', 'king-addons') . ' (deg)',
1043	'type' => Controls_Manager::NUMBER,
1044	'min' => -360,
1045	'max' => 360,
1046	'step' => 5,
1047	'default' => 0,
1048	'selectors' => [
1049	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'transform: rotateZ({{SIZE}}deg); display: inline-block;',
1050	],
1051	'condition' => [
1052	'kng_styled_txt_transform_switcher!' => '',
1053	],
1054	'frontend_available' => true,
1055	]
1056	);
1057
1058	$repeater->add_responsive_control(
1059	'kng_styled_txt_transform_offset_X',
1060	[
1061	'label' => esc_html__('Offset X', 'king-addons'),
1062	'type' => Controls_Manager::SLIDER,
1063	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1064	'range' => [
1065	'%' => [
1066	'min' => -100,
1067	'max' => 100,
1068	],
1069	'px' => [
1070	'min' => -1000,
1071	'max' => 1000,
1072	],
1073	],
1074	'condition' => [
1075	'kng_styled_txt_transform_switcher!' => '',
1076	],
1077	'selectors' => [
1078	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => 'transform: translateX({{SIZE}}{{UNIT}}); display: inline-block;',
1079	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner img' => 'transform: translateX({{SIZE}}{{UNIT}}); display: inline-block;',
1080	],
1081	'frontend_available' => true,
1082	]
1083	);
1084
1085	$repeater->add_responsive_control(
1086	'kng_styled_txt_transform_offset_Y',
1087	[
1088	'label' => esc_html__('Offset Y', 'king-addons'),
1089	'type' => Controls_Manager::SLIDER,
1090	'size_units' => ['px', '%', 'em', 'rem', 'vh', 'custom'],
1091	'range' => [
1092	'%' => [
1093	'min' => -100,
1094	'max' => 100,
1095	],
1096	'px' => [
1097	'min' => -1000,
1098	'max' => 1000,
1099	],
1100	],
1101	'condition' => [
1102	'kng_styled_txt_transform_switcher!' => '',
1103	],
1104	'selectors' => [
1105	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'transform: translateY({{SIZE}}{{UNIT}}); display: inline-block;',
1106	],
1107	'frontend_available' => true,
1108	]
1109	);
1110
1111	$repeater->add_control(
1112	'kng_styled_txt_link_switcher',
1113	[
1114	'label' => esc_html__('Link', 'king-addons'),
1115	'type' => Controls_Manager::SWITCHER,
1116	]
1117	);
1118
1119	$repeater->add_control(
1120	'kng_styled_txt_link',
1121	[
1122	'label' => esc_html__('Link', 'king-addons'),
1123	'type' => Controls_Manager::URL,
1124	'condition' => [
1125	'kng_styled_txt_link_switcher!' => '',
1126	]
1127	]
1128	);
1129
1130	$this->add_control(
1131	'kng_styled_txt_content_items',
1132	[
1133	'type' => Controls_Manager::REPEATER,
1134	'fields' => $repeater->get_controls(),
1135	'default' => [
1136	[
1137	'kng_styled_txt_content_type' => 'text',
1138	'kng_styled_txt_content' => esc_html__('King', 'king-addons'),
1139	],
1140	[
1141	'kng_styled_txt_content_type' => 'image',
1142	'kng_styled_txt_image' => Utils::get_placeholder_image_src(),
1143	],
1144	[
1145	'kng_styled_txt_content_type' => 'text',
1146	'kng_styled_txt_content' => esc_html__('Addons', 'king-addons'),
1147	],
1148	],
1149	'title_field' => '<# if( "text" === kng_styled_txt_content_type ) { #> {{kng_styled_txt_content}} <# } else if( "image" === kng_styled_txt_content_type) {#> <img class="king-addons-repeater-list-img-icon" src="{{kng_styled_txt_image.url}}"> <# } #>',
1150	]
1151	);
1152
1153	$this->end_controls_section();
1154	/** END SECTION: Texts ===================== */
1155	/** END TAB: CONTENT ===================== */
1156
1157	/** START TAB: STYLE ===================== */
1158	/** SECTION: Common Styles ===================== */
1159	$this->start_controls_section(
1160	'kng_styled_txt_style_section_commmon_styles',
1161	[
1162	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common Styles', 'king-addons'),
1163	'tab' => Controls_Manager::TAB_STYLE,
1164	]
1165	);
1166
1167	$this->add_group_control(
1168	Group_Control_Typography::get_type(),
1169	[
1170	'label' => esc_html__('Item Typography', 'king-addons'),
1171	'name' => 'kng_styled_txt_common_typography',
1172	'selector' => '{{WRAPPER}} .king-addons-styled-text',
1173	'fields_options' => [
1174	'font_size' => [
1175	'default' => [
1176	'size' => 50,
1177	'unit' => 'px'
1178	],
1179	],
1180	'typography' => [
1181	'default' => 'custom',
1182	]
1183	],
1184	]
1185	);
1186
1187	$this->add_control(
1188	'kng_styled_txt_common_color',
1189	[
1190	'label' => esc_html__('Item Text Color', 'king-addons'),
1191	'type' => Controls_Manager::COLOR,
1192	'selectors' => [
1193	'{{WRAPPER}} .king-addons-styled-text' => 'color: {{VALUE}};',
1194	],
1195	]
1196	);
1197
1198	$this->add_responsive_control(
1199	'kng_styled_txt_common_content_align',
1200	[
1201	'label' => esc_html__('Content Align', 'king-addons'),
1202	'type' => Controls_Manager::SELECT,
1203	'options' => [
1204	'left' => esc_html__('Left', 'king-addons'),
1205	'center' => esc_html__('Center', 'king-addons'),
1206	'right' => esc_html__('Right', 'king-addons'),
1207	],
1208	'default' => 'left',
1209	'separator' => 'before',
1210	'selectors' => [
1211	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'text-align: {{VALUE}};',
1212	],
1213	]
1214	);
1215
1216	$this->add_responsive_control(
1217	'kng_styled_txt_common_items_margin',
1218	[
1219	'label' => esc_html__('Item Margin', 'king-addons'),
1220	'type' => Controls_Manager::DIMENSIONS,
1221	'size_units' => ['px', 'em', '%'],
1222	'default' => [
1223	'top' => 0,
1224	'right' => 10,
1225	'bottom' => 0,
1226	'left' => 0,
1227	'unit' => 'px',
1228	'isLinked' => false
1229	],
1230	'selectors' => [
1231	'{{WRAPPER}} .king-addons-styled-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1232	],
1233	'separator' => 'before',
1234	]
1235	);
1236
1237	$this->add_responsive_control(
1238	'kng_styled_txt_common_items_padding',
1239	[
1240	'label' => esc_html__('Item Padding', 'king-addons'),
1241	'type' => Controls_Manager::DIMENSIONS,
1242	'size_units' => ['px', 'em', '%'],
1243	'default' => [
1244	'top' => 0,
1245	'right' => 0,
1246	'bottom' => 0,
1247	'left' => 0,
1248	'unit' => 'px',
1249	],
1250	'selectors' => [
1251	'{{WRAPPER}} .king-addons-styled-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1252	],
1253	'separator' => 'before',
1254	]
1255	);
1256
1257	$this->end_controls_section();
1258	/** END SECTION: Common Styles ===================== */
1259
1260	/** SECTION: Wrapper Settings ===================== */
1261	$this->start_controls_section(
1262	'kng_styled_txt_style_section_wrapper_settings',
1263	[
1264	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Wrapper Tag Settings', 'king-addons'),
1265	'tab' => Controls_Manager::TAB_STYLE,
1266	]
1267	);
1268
1269	if (king_addons_freemius()->can_use_premium_code()) {
1270	$this->add_control(
1271	'kng_styled_txt_wrapper_html_tag',
1272	[
1273	'label' => esc_html__('HTML Tag', 'king-addons'),
1274	'type' => Controls_Manager::SELECT,
1275	'options' => [
1276	'div' => 'div',
1277	'h1' => 'h1',
1278	'h2' => 'h2',
1279	'h3' => 'h3',
1280	'h4' => 'h4',
1281	'h5' => 'h5',
1282	'h6' => 'h6',
1283	'section' => 'section',
1284	'article' => 'article',
1285	'aside' => 'aside',
1286	'header' => 'header',
1287	'footer' => 'footer',
1288	'nav' => 'nav',
1289	'main' => 'main',
1290	'span' => 'span',
1291	'p' => 'p',
1292	],
1293	'default' => 'div',
1294	]
1295	);
1296	} else {
1297	$this->add_control(
1298	'kng_styled_txt_wrapper_html_tag',
1299	[
1300	'label' => esc_html__('HTML Tag', 'king-addons'),
1301	'type' => Controls_Manager::SELECT,
1302	'options' => [
1303	'div' => 'div',
1304	'p' => 'p',
1305	'section' => 'section',
1306	'article' => 'article',
1307	'aside' => 'aside',
1308	'header' => 'header',
1309	'footer' => 'footer',
1310	'nav' => 'nav',
1311	'main' => 'main',
1312	'span' => 'span',
1313	],
1314	'default' => 'div',
1315	]
1316	);
1317
1318	$this->add_control(
1319	'kng_styled_txt_wrapper_html_tag_pro_notice',
1320	[
1321	'type' => Controls_Manager::RAW_HTML,
1322	'raw' => 'H1, H2, H3, H4, H5, H6 tags are available in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-styled-txt-builder&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
1323	'content_classes' => 'king-addons-pro-notice',
1324	]
1325	);
1326	}
1327
1328	$this->add_group_control(
1329	Group_Control_Typography::get_type(),
1330	[
1331	'name' => 'kng_styled_txt_wrapper_typography',
1332	'label' => esc_html__('Tag Typography', 'king-addons'),
1333	'description' => esc_html__('This is the typography for the wrapper tag. The Item Typography setting can override this.', 'king-addons'),
1334	'selector' => '{{WRAPPER}} .king-addons-styled-text-builder-items',
1335	'separator' => 'before',
1336	]
1337	);
1338
1339	$this->add_control(
1340	'kng_styled_txt_wrapper_color',
1341	[
1342	'label' => esc_html__('Tag Color', 'king-addons'),
1343	'type' => Controls_Manager::COLOR,
1344	'selectors' => [
1345	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'color: {{VALUE}};',
1346	],
1347	]
1348	);
1349
1350	$this->add_responsive_control(
1351	'kng_styled_txt_wrapper_padding',
1352	[
1353	'label' => esc_html__('Tag Padding', 'king-addons'),
1354	'type' => Controls_Manager::DIMENSIONS,
1355	'size_units' => ['px', 'em', '%', 'rem'],
1356	'default' => [
1357	'top' => 0,
1358	'right' => 0,
1359	'bottom' => 0,
1360	'left' => 0,
1361	'unit' => 'px',
1362	],
1363	'selectors' => [
1364	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1365	],
1366	'separator' => 'before',
1367	]
1368	);
1369
1370	$this->add_responsive_control(
1371	'kng_styled_txt_wrapper_margin',
1372	[
1373	'label' => esc_html__('Tag Margin', 'king-addons'),
1374	'type' => Controls_Manager::DIMENSIONS,
1375	'size_units' => ['px', 'em', '%', 'rem'],
1376	'default' => [
1377	'top' => 0,
1378	'right' => 0,
1379	'bottom' => 0,
1380	'left' => 0,
1381	'unit' => 'px',
1382	],
1383	'selectors' => [
1384	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1385	],
1386	]
1387	);
1388
1389	$this->end_controls_section();
1390	/** END SECTION: Wrapper Settings ===================== */
1391	/** END TAB: STYLE ===================== */
1392	}
1393
1394	protected function render(): void
1395	{
1396	$settings = Core::displaySettings($this);
1397
1398	// Get the wrapper HTML tag, default to 'div' if not set
1399	$wrapper_tag = isset($settings['kng_styled_txt_wrapper_html_tag']) ? $settings['kng_styled_txt_wrapper_html_tag'] : 'div';
1400	?>
1401	<<?php echo esc_html($wrapper_tag); ?> class="king-addons-styled-text-builder-items">
1402	<?php
1403
1404	$item_count = 0;
1405
1406	/** @noinspection PhpUnusedLocalVariableInspection */
1407	foreach ($settings['kng_styled_txt_content_items'] as $key => $item) {
1408
1409	$content_type = $item['kng_styled_txt_content_type'];
1410	$item_tag = 'span';
1411
1412	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'class', 'king-addons-styled-text-inner');
1413
1414	// If the item has link
1415	if ('yes' === $item['kng_styled_txt_link_switcher']) {
1416	if ('' !== $item['kng_styled_txt_link']['url']) {
1417
1418	$item_tag = 'a';
1419
1420	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'href', esc_url($item['kng_styled_txt_link']['url']));
1421
1422	if ($item['kng_styled_txt_link']['is_external']) {
1423	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'target', '_blank');
1424	}
1425
1426	if ($item['kng_styled_txt_link']['nofollow']) {
1427	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'rel', 'nofollow');
1428	}
1429	}
1430	}
1431
1432	// If the item has custom CSS class
1433	if ('yes' === $item['kng_styled_txt_custom_css_class_switcher']) {
1434	if ('' !== $item['kng_styled_txt_custom_css_class']) {
1435	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'class', esc_attr($item['kng_styled_txt_custom_css_class']));
1436	}
1437	}
1438
1439	/** START: Text Item ===================== */
1440	if ('text' === $content_type) {
1441
1442	$txt_effect = $item['kng_styled_txt_effect'];
1443	$txt_effect_class = '';
1444	$data_attrs = '';
1445	$inline_style = '';
1446
1447	if (in_array($txt_effect, ['spoiler-thanos', 'typing'], true) && !king_addons_freemius()->can_use_premium_code__premium_only()) {
1448	$txt_effect = 'none';
1449	}
1450
1451	switch ($txt_effect) {
1452	case 'text-gradient':
1453	$txt_effect_class = ' king-addons-styled-text-gradient';
1454	break;
1455	case 'underline-gradient':
1456	$txt_effect_class = ' king-addons-styled-text-underline-gradient';
1457	break;
1458	case 'spoiler-thanos':
1459	$txt_effect_class = ' king-addons-styled-text--spoiler';
1460
1461	$spoiler_color = $item['kng_styled_txt_spoiler_color'] ?? '#9ca3af';
1462	$spoiler_opacity = isset($item['kng_styled_txt_spoiler_opacity']['size']) ? (float) $item['kng_styled_txt_spoiler_opacity']['size'] : 0.92;
1463	$spoiler_speed = isset($item['kng_styled_txt_spoiler_speed']['size']) ? (float) $item['kng_styled_txt_spoiler_speed']['size'] : 1.6;
1464	$trigger_desktop = $item['kng_styled_txt_spoiler_trigger_desktop'] ?? 'hover';
1465	$trigger_mobile = $item['kng_styled_txt_spoiler_trigger_mobile'] ?? 'tap';
1466
1467	$data_attrs = ' data-effect="spoiler" data-spoiler-desktop="' . esc_attr($trigger_desktop) . '" data-spoiler-mobile="' . esc_attr($trigger_mobile) . '"';
1468	$inline_style = ' style="--kng-spoiler-color:' . esc_attr($spoiler_color) . ';--kng-spoiler-opacity:' . esc_attr($spoiler_opacity) . ';--kng-spoiler-speed:' . esc_attr($spoiler_speed) . 's;"';
1469	break;
1470	case 'typing':
1471	$txt_effect_class = ' king-addons-styled-text--typing';
1472	$typing_speed = isset($item['kng_styled_txt_typing_speed']) ? (int) $item['kng_styled_txt_typing_speed'] : 80;
1473	$typing_delay = isset($item['kng_styled_txt_typing_delay']) ? (int) $item['kng_styled_txt_typing_delay'] : 1200;
1474	$typing_loop = ($item['kng_styled_txt_typing_loop'] ?? 'yes') === 'yes';
1475	$typing_cursor = $item['kng_styled_txt_typing_cursor'] ?? '\|';
1476	$data_attrs = ' data-effect="typing" data-typing-speed="' . esc_attr($typing_speed) . '" data-typing-delay="' . esc_attr($typing_delay) . '" data-typing-loop="' . ($typing_loop ? 'yes' : 'no') . '" data-typing-cursor="' . esc_attr($typing_cursor) . '"';
1477	break;
1478	}
1479
1480	if ('' !== $item['kng_styled_txt_content']) {
1481
1482	echo '<span class="elementor-repeater-item-' .
1483	esc_attr($item['_id']) .
1484	esc_attr($txt_effect_class) . ' king-addons-styled-text"' . $data_attrs . $inline_style . '>';
1485
1486	$html = '<' . esc_attr($item_tag) . ' ' . $this->get_render_attribute_string('kng_styled_txt_content_inner_attribute' . $item_count) . '>';
1487	echo wp_kses($html, wp_kses_allowed_html('post'));
1488
1489	echo '<span>' . wp_kses_post($item['kng_styled_txt_content']) . '</span>';
1490	echo '</' . esc_attr($item_tag) . '></span>';
1491	}
1492	}
1493	/** END: Text Item ===================== */
1494
1495	/** START: Image Item ===================== */
1496	if ('image' === $content_type) {
1497
1498	if ('' !== $item['kng_styled_txt_image']) {
1499
1500	echo '<span class="elementor-repeater-item-' .
1501	esc_attr($item['_id']) . ' king-addons-styled-text">';
1502
1503	$html = '<' . esc_attr($item_tag) . ' ' . $this->get_render_attribute_string('kng_styled_txt_content_inner_attribute' . $item_count) . '>';
1504	echo wp_kses($html, wp_kses_allowed_html('post'));
1505
1506	$image_html = Group_Control_Image_Size::get_attachment_image_html($item, 'kng_styled_txt_image_size', 'kng_styled_txt_image');
1507
1508	// Define allowed tags and attributes
1509	$allowed_tags = wp_kses_allowed_html('post');
1510	$allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
1511	$allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
1512	$allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
1513	$allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
1514
1515	// Sanitize the image HTML using the extended set of allowed tags and attributes
1516	echo wp_kses($image_html, $allowed_tags);
1517
1518	echo '</' . esc_attr($item_tag) . '></span>';
1519	}
1520	}
1521	/** END: Image Item ===================== */
1522
1523	$item_count++;
1524	} ?>
1525	</<?php echo esc_html($wrapper_tag); ?>>
1526	<?php
1527	}
1528	}
1529