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

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

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