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.49, at includes/widgets/Styled_Text_Builder/Styled_Text_Builder.php

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